效果圖: 下載地址：https://github.com/WangChangyao/jquery-dataTimePicker.git
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="jquery.datetimepicker.css"/>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="angular.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.datetimepicker.js" type="text/javascript" charset="utf-8"></script>
</head>
<body ng-app='app' ng-controller='controller'>
<h2>{{selectTime}}</h2>
<input type="text" id="datetimepicker" /><br><br>
<script type="text/javascript">
angular.module('app',[]).controller('controller',function($scope){
$('#datetimepicker').datetimepicker({
lang:'ch',
format:'Y-m-d H:00:00', //可固定秒的時間，如"Y-m-d H:00:10"
onChangeDateTime:function(data,mon,dd){ //時間發生改變回調的方法
$scope.$apply(function(){
$scope.selectTime=mon[0].value;
});
},
});
});
</script>
</body>
</html>
打開js文件的源碼可以看到更多的設置屬性與回調函數：
value:'',
lang:'en',
format:'Y/m/d H:i',
formatTime:'H:i',
formatDate:'Y/m/d',
step:60,
closeOnDateSelect:0,
closeOnWithoutClick:true,
timepicker:true,
datepicker:true,
minDate:false,
maxDate:false,
minTime:false,
maxTime:false,
allowTimes:[],
opened:false,
inline:false,
onSelectDate:function() {},
onSelectTime:function() {},
onChangeMonth:function() {},
onChangeDateTime:function() {},
onShow:function() {},
onClose:function() {},
onGenerate:function() {},
withoutCopyright:true,
inverseButton:false,
hours12:false,
next: 'xdsoft_next',
prev : 'xdsoft_prev',
dayOfWeekStart:0,
timeHeightInTimePicker:25,
timepickerScrollbar:true,
todayButton:true, // 2.1.0
defaultSelect:true, // 2.1.0
scrollMonth:true,
scrollTime:true,
scrollInput:true,
mask:false,
validateOnBlur:true,
allowBlank:false,
yearStart:1950,
yearEnd:2050,
style:'',
id:'',
roundTime:'round', // ceil, floor
className:'',
weekends : [],
yearOffset:0