一、日期插件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"
});
顯示效果如下: