因為BootStrap預設沒有日期或時間的UI元件，搜尋一下發現其他開發者提供的好用外掛
Bootstrap.v3.Datetimepicker!!
首先我的環境是ASP.NET和最原始的WebForm專案
1.安裝Bootstrap.v3.Datetimepicker
直接使用NuGet套件管理員安裝，如下
2.使用 Bootstrap.v3.Datetimepicker
2.1在Site.Master的 <head> 區塊輸入
<![CDATA[
<link rel="stylesheet" href="Content/bootstrap-datetimepicker.css" />
]]>
2.2在Site.Master 的<body> 區塊輸入
<![CDATA[
<script src="Scripts/jquery-3.4.1.min.js"></script>
<script src="Scripts/moment.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script src="Scripts/bootstrap-datetimepicker.js"></script>
]]>
3. Bootstrap.v3.Datetimepicker 的宣告和使用
Datetimepicker可同時使用日期和時間，也可以單獨使用日期或時間。
3.1 同時使用日期和時間
<![CDATA[
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker();
});
</script>
</div>
</div>
]]>
畫面如下
日期和時間
3.2 只有時間
<![CDATA[
<div class="container">
<div class="row">
<div class='col-sm-3'>
<div class="form-group">
<div class='input-group date' id='dateAndtime'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#dateAndtime').datetimepicker({
format: 'LT'
});
});
</script>
</div>
</div>
]]>
畫面如下
只有時間
3.3 只有日期
<![CDATA[
<div class="container">
<div class="row">
<div class='col-sm-3'>
<div class="form-group">
<div class='input-group date' id='dateAndtime'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#dateAndtime').datetimepicker({
format: 'DD/MM/YYYY'
});
});
</script>
</div>
</div>
]]>
只有日期 可以看到差異只在選擇哪個icon和在js中呼叫datetimepicker的格式
參考官網 https://getdatepicker.com/4/
