[ Bootstrap Plugin ] – bootstrap-datetimepicker

以往專案都只用到datepicker，但最近的案子需要細到分(這部份其實是有timepicker)；但因為資料庫我想要存datetime 年月日時分秒 所以 找了這套 bootstrap-datetimepicker ，官網上已有滿多範例所以下面的範例是以日期時間區間的需求，也就是有綁定 開始日期時間 與 結速日期時間 是不能重疊，且也不給使用者使用輸入框 欄位唯讀設定，以及設定界面的語系。

官網：https://eonasdan.github.io/bootstrap-datetimepicker/

<!-- css部份 -->
<link href="./css/bootstrap-datetimepicker.css" rel="stylesheet">
<style>
.container {
	margin-top: 80px;
}
</style>

<!-- html部份 -->
<div class='input-group date' id='dt_start'>
    <span class="input-group-addon">開始日期時間</span>
    <input type='text'  class="form-control" readonly/>
    <span class="input-group-addon">
        <span class="glyphicon glyphicon-calendar"></span>
    </span>
</div>
<div class='input-group date' id='dt_start'>
    <span class="input-group-addon">結速日期時間</span>
    <input type='text'  class="form-control" readonly/>
    <span class="input-group-addon">
        <span class="glyphicon glyphicon-calendar"></span>
    </span>
</div>

<!-- javascript 部份 -->
<script src="./js/moment-with-locales.js"></script>
<script src="./js/bootstrap-datetimepicker.js"></script>
<script>
	$(document).ready(function() {
		$("#dt_start").datetimepicker({
			locale: 'zh-tw',//使用繁體中文界面
			format: 'YYYY-MM-D HH:mm:ss',//日期時間格式
			ignoreReadonly: true  //禁止使用者輸入 啟用唯讀
		});
		$("#dt_end).datetimepicker({
			locale: 'zh-tw',
			format: 'YYYY-MM-D HH:mm:ss',
			useCurrent: false,
			ignoreReadonly: true
		});
                //日期時間區間
		$("#dt_start").on("dp.change", function (e) {
          		$('#dt_end').data("DateTimePicker").minDate(e.date);
        	});
        	$("#dt_end").on("dp.change", function (e) {
            		$('#dt_start').data("DateTimePicker").maxDate(e.date);
        	});
	});
</script>