效果图: 下载地址: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