bootstrap日期控件的使用

bootstrap日期控件構建非常豐富，可根據調用dateTimepicker()方法的參數設置可選語言，可選日期時間範圍，起始時間，結束時間，視圖顯示格式等等。那麼具體怎麼用呢？

下面我來介紹下：

1、首先引入所需要的依賴，直接上代碼：

<head>
   <meta charset="UTF-8">
   <title>Bootstrap.dataTimepicker</title>
   <link rel="stylesheet" href="../res/bootstrap.min.css">
   <link rel="stylesheet" href="../res/bootstrap-datetimepicker.min.css">
   <script src="../res/jquery-3.2.1.js"></script>
   <script src="../res/bootstrap.js"></script>
   <script src="../res/bootstrap-datetimepicker.js"></script>
   <script src="../res/bootstrap-datetimepicker.zh-CN.js"></script>
</head>

當然了，要引入相應的依賴，還得去下載所依賴bootstrap的文件，下載這裏就不介紹了。bootstrap-datetimepicker.zh-CN.js 這個文件是爲了要顯示中文，默認是英文的，你也可以選擇其它國家的語言。在這個文件夾下的文件是各個國家的語文包，bootstrap實現了國際化。

2.HTML代碼，HTML代碼可根據需要，有多種選擇，可使用帶有重置按鈕（用於清空輸入框）的組件模版式：

<body>
   <div class="input-append date" id="datetimepicker">
      <input class="span2" size="16" type="text" value="12-02-2012">
      <span class="add-on"><i class="icon-remove"></i></span>
      <span class="add-on"><i class="icon-th"></i></span>
   </div>                                                                           <body>

或者只要個input輸入框也行，這樣更簡潔

<body>
  <input id="date">
</body>

接下來就是啓用控件了，直接調用API接口：

<script>
    $("#date").datetimepicker();
</script>

就是這樣，這樣就可以在網頁中點擊 input 彈出選擇面板了.同時這個方法還可以設置許多參數，就是用來控制顯示語言，日期時間範圍等等的。

<script>
    $("#date").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>