一、日期外掛datepicker顯示年月日(見效果一)

引入如下檔案：

<script src="lib/jQuery/jquery-ui.min.js"></script>
<script src="lib/jQuery/jquery-ui-timepicker-addon.js"></script>

Html

<div class="col-xs-6">
    時間<input type="text" class="date-input" ui-date="dateOptions" ng-model="directInfo.alertTime" placeholder="請輸入時間，如2017-07-31"
             id="alertTime" alias="時間"/>
</div>
 

js

var date_config_default = {
    changeMonth: true,
    changeYear: true,
    numberOfMonths:1,//顯示幾個月
    showButtonPanel:false,//是否顯示按鈕面板
    dateFormat: 'yy-mm-dd',//日期格式
    clearText:"清除",//清除日期的按鈕名稱
    closeText:"關閉",//關閉選擇框的按鈕名稱
    yearSuffix: '年', //年的字尾
    currentText:"今天",
    showMonthAfterYear:true,//是否把月放在年的後面
    monthNames: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
    monthNamesShort: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
    dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],
    dayNamesShort: ['週日','週一','週二','週三','週四','週五','週六'],
    dayNamesMin: ['日','一','二','三','四','五','六']
};
$scope.dateOptions = date_config_default;
 

二、日期外掛datepicker顯示年月日時分(見效果二)

引入如下檔案：

<link rel="stylesheet" href="lib/jQuery/jquery-ui-timepicker-addon.css"/>
<script src="lib/jQuery/jquery-ui.min.js"></script>
<script src="lib/jQuery/jquery-ui-timepicker-addon.js"></script>
<script src="lib/jQuery/jquery.ui.datepicker-zh-CN.js"></script>
<script src="lib/jQuery/jquery-ui-timepicker-zh-CN.js"></script>
 

Html

<div class="col-xs-6">
    時間<input type="text" class="date-input ui_timepicker" ng-model="directInfo.alertTime" placeholder="請輸入時間，如2017-07-31 10:27"
             id="alertTime" alias="時間"/>
</div>

js

jQuery('.ui_timepicker').datetimepicker({
    timeFormat: "HH:mm",
    dateFormat: "yy-mm-dd"
});

顯示效果如下：