Bootstrap~日期控制

回到目錄

一個成熟的框架，日期控制是少不了的，在網上也有不少日期控制能夠選擇，而主框架用了bootstrap，日期控制也當前要用它本身的，

控件地址：http://www.bootcss.com/p/bootstrap-datetimepicker/index.htm

GitHub上開源地址：https://github.com/smalot/bootstrap-datetimepicker

在使用datetimepicker以前，先要通過如下幾個步驟

１　引用JS腳本庫

<script src="/Content/bootstraps/js/bootstrap.js"></script>
<script src="/Content/bootstraps/js/bootstrap-datetimepicker.js"></script>
<script src="/Content/bootstraps/js/bootstrap-datetimepicker.zh-CN.js"></script>

其中bootstrap-datetimepicker.zh-CN.js表示能夠使用中文的語言顯示日期時間

２　引入CSS類庫

<link href="/Content/bootstraps/css/bootstrap.css" rel="stylesheet"/>
<link href="/Content/bootstraps/css/bootstrap-datetimepicker.css" rel="stylesheet"/>

３　定義HTML標籤

<input class="form_datetime form-control" type="text" value="2016-03-07" size="16">

４　編寫datetimepicker事件

<script type="text/javascript">
    $(".form_datetime").datetimepicker({
        format: "yyyy-mm-dd",
        autoclose: true,
        todayBtn: true,
        todayHighlight: true,
        showMeridian: true,
        pickerPosition: "bottom-left",
        language: 'zh-CN',//中文，須要引用zh-CN.js包
        startView: 2,//月視圖
        minView: 2//日期時間選擇器所可以提供的最精確的時間選擇視圖
    });    
</script>

注意，有不少朋友都在網上問過，如何只用日期，或者不用時間，由於默認狀況下，每次使用datetimepicker選擇時，都要選到日間那個級別上，非常不爽，大叔在研究中發展，使用minView這個參數解決了這個問題，它至關於在控制上，最小的顯示精度，

０表示分鐘（默認），１表示小時，而２表示天，咱們把值設爲２就不會再出現選擇小時的頁面了！

回到目錄