bootstrap的表單怎麼選日期

在大多數專案中使用者介面的時間選擇是必不可少的，在專案的使用者體驗友善度這個大前提下，不讓使用者自己輸入時間就顯得格外的重要。而且使用者輸入時間還會有格式不固定的問題，加大後台的開發量。在這個時候就需要用到時間輸入插件了，格式由我們自己設置，也減少了使用者的輸入環節提高了使用者體驗友善度。

使用

bootStrap的時間外掛程式datetimepicker支援介面多元化有專門的的一個網址來說明這個時間選擇器。

Demo

利用外掛程式所帶的方法和時間。可以做一個簡單的demo 

demo功能點： 

１.輸入日期格式為yyyy-MM-dd hh:ii:ss(格式可以自訂) 。 

２.前一個日期的時間輸入以後，後面一個日期的輸入值不能小於前一個日期 。

３.後一個日期的時間輸入以後，前面一個日期的輸入值不能大於前一個日期。

相關推薦：《bootstrap入門教學》

需要bootstrap提供封裝的css和js

<link href="bootstrap-datetimepicker.min.css" rel="external nofollow" rel="stylesheet" />
<script src="bootstrap-datetimepicker.js"></script>
<script src="bootstrap-datetimepicker.zh-CN.js"></script>
<script>
 $.fn.datetimepicker.defaults = {
  //默认语言
  language: &#39;zh-CN&#39;,
  //默认选择格式
  format: "yyyy-mm-dd hh:ii:ss",
  autoclose: true,
  todayBtn: true,
  //选择板所在输入框位置
  pickerPosition: "bottom-left"
 };
</script>
 <div class="input-append date form_datetime">
 <input size="16" type="text" value="" id="startTime" readonly>
 <input size="16" type="text" value="" id="endTime" readonly>
</div>
<script>
 $(function () {
  var picker1 = $(&#39;#startTime&#39;).datetimepicker();
  var picker2 = $("#endTime").datetimepicker();
  //动态设置最小值(选择前面一个日期后：后面一个日期不能小于前面一个)
  picker1.on(&#39;changeDate&#39;, function (e) {
   picker2.datetimepicker(&#39;setStartDate&#39;, e.date);
  });
  //动态设置最大值(选择后面一个日期后：前面一个日期不能大于前面一个）
  picker2.on(&#39;changeDate&#39;, function (e) {
   picker1.datetimepicker(&#39;setEndDate&#39;, e.date);
  });
 });
</script>

以上是bootstrap的表單怎麼選日期的詳細內容。更多資訊請關注PHP中文網其他相關文章！