在大多數專案中使用者介面的時間選擇是必不可少的，在專案的使用者體驗友善度這個大前提下，不讓使用者自己輸入時間就顯得格外的重要。而且使用者輸入時間還會有格式不固定的問題，加大後台的開發量。在這個時候就需要用到時間輸入插件了，格式由我們自己設置，也減少了使用者的輸入環節提高了使用者體驗友善度。
使用
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: 'zh-CN',
//默认选择格式
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 = $('#startTime').datetimepicker();
var picker2 = $("#endTime").datetimepicker();
//动态设置最小值(选择前面一个日期后：后面一个日期不能小于前面一个)
picker1.on('changeDate', function (e) {
picker2.datetimepicker('setStartDate', e.date);
});
//动态设置最大值(选择后面一个日期后：前面一个日期不能大于前面一个）
picker2.on('changeDate', function (e) {
picker1.datetimepicker('setEndDate', e.date);
});
});
</script>以上是bootstrap的表單怎麼選日期的詳細內容。更多資訊請關注PHP中文網其他相關文章！
