jquery-ui日期插件datepicker显示时分

一、日期插件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"
});

显示效果如下：

效果一

效果二