第二章 时间控件（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>