• 第二章 时间控件(DateTime Picker)


      这家伙太懒了,碰到问题才写博文,嘿嘿。

      好了进入正题,二话不说,先放地址:

      中文:http://www.bootcss.com/p/bootstrap-datetimepicker/index.htm

         http://www.malot.fr/bootstrap-datetimepicker/demo.php

         http://www.malot.fr/bootstrap-datetimepicker/

      今天碰到一个问题是这样的,时间控件显示小时分钟。死定了,全是英文,找了白天才发现startView的意思

      上菜了:

      

    @Styles.Render("~/Content/themes/default/bootstrap-datetimepicker.css")
    @Scripts.Render("~/Scripts/bootstrap-datetimepicker.js")
    @Scripts.Render("~/Scripts/bootstrap-datetimepicker.zh-CN.js")

    <div class="container" style="padding: 0 15px;"> <small>时间 </small> <input type="text" id="datetimepicker"> </div> <script type="text/javascript"> $(function () { $('#datetimepicker').datetimepicker({ format: 'hh:ii', startView:1 }); }); </script>

    效果图:

    补充:2013-10-29

    1.实现日期的选择

    主要代码:

    $('#datetimepicker').datetimepicker({ 
      minView:
    "month", //选择日期后,不会再跳转去选择时分秒
      format:
    "yyyy-mm-dd", //选择日期后,文本框显示的日期格式
      language:
    'zh-CN', //汉化
      autoclose:
    true //选择日期后自动关闭
    });

     补充:2013-11-29

    出生日期

    1.data-date、data-date-format、input的日期格式必须一致,否则产生时间显示格式不匹配等小问题

    2. minView: 'month',为显示选择日期的面板,可根据需要进行调整

    <div class="form-group  col-md-6">
        <label class="control-label col-md-4">
            出生日期</label>
        <div class="col-md-8">
            <div id="BirthDiv" class="input-group date form_datetime" data-date="@Model.BirthDT.ToString("yyyy-MM-dd")" data-date-format="yyyy-mm-dd" >
                 @Html.TextBox("BirthDT", Model.BirthDT.ToString("yyyy-MM-dd"), new { @class = "form-control " })
                 <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span>
                    </span><span class="input-group-addon"><span class="glyphicon glyphicon-th"></span>
                 </span>
            </div>
             @Html.ValidationMessageFor(t => t.BirthDT, null, new { @class = "help-block" })
        </div>
     </div>
     <script type="text/javascript">
            $(function () {
                $('#BirthDiv').datetimepicker({
                    language: 'zh-CN',
                    autoclose: 1,
                    todayBtn: 1,
                    pickerPosition: "bottom-left",
                    minuteStep: 5,
                    format: 'yyyy-mm-dd',
                    minView: 'month'    //日期时间选择器所能够提供的最精确的时间选择视图。
                });
            });
        </script>
  • 相关阅读:
    Redis和Lombok的下载安装
    (五)模仿学习完成后台管理页面删除
    (六)模仿学习后台管理页面添加
    模拟学习动漫论坛合集
    (八)模仿学习展现可视化大屏
    基于C/S 结构的IM即时通讯软件下篇
    排序算法之基排
    qt学习001之运行对话框
    每日一练之大整数加法(P1255 数楼梯)
    每日算法之递推排序(P1866 编号)
  • 原文地址:https://www.cnblogs.com/xcsn/p/3375116.html
Copyright © 2020-2023  润新知