第二章 時間控件（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>