因為BootStrap預設沒有日期或時間的UI元件，搜尋一下發現其他開發者提供的好用外掛

Bootstrap.v3.Datetimepicker!!

首先我的環境是ASP.NET和最原始的WebForm專案

1.安裝Bootstrap.v3.Datetimepicker

直接使用NuGet套件管理員安裝，如下

2.使用 Bootstrap.v3.Datetimepicker

2.1在Site.Master的 <head> 區塊輸入


<link rel="stylesheet" href="Content/bootstrap-datetimepicker.css" />

2.2在Site.Master 的<body> 區塊輸入


<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 同時使用日期和時間


<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 只有時間


    <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 只有日期


    <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/