DateTimePickerDirective.js
angular.module('myApp.directives',[]) .directive('datetimepicker', function() { return { //强制AngularJS把指令限定为只支持属性 restrict: 'A', //总是和ng-model配合使用 require:'?ngModel', scope: { //此方法需要与预先定义好,然后传递给视图控制器中的指令 select: '&' //把我们所引用的select函数绑定到右边的作用域中 }, link: function(scope, element, attrs, ngModel) { if(!ngModel) return; var optionsObj = {}; optionsObj.timeFormat = 'HH:mm:ss'; var updateModel = function(dateTimeTxt) { scope.$apply(function() { //调用AngularJS内部的工具更新双向绑定关系 ngModel.$setViewValue(dateTimeTxt); }); }; optionsObj.onSelect = function(dateTimeTxt, picker) { updateModel(dateTimeTxt); if(scope.select) { scope.$apply(function() { scope.select({date: dateTimeTxt}); }); } }; ngModel.$render = function() { //使用AngularJS内部的'binding-specific'变量 element.datepicker('setDate', ngModel.$viewValue || ''); }; element.datetimepicker(optionsObj); } }; });
DateTimePickerController.js
var app = angular.module('myApp', ['myApp.directives']); app.controller('MainCtrl', function($scope) { $scope.myText = 'Not Selected'; $scope.currentDateTime = ''; $scope.updateMyText = function(dateTime) { $scope.myText = 'Selected'; }; });
DateTimePickerHtml.html
<!DOCTYPE html> <html ng-app="myApp"> <head lang="en"> <meta charset="utf-8"></meta> <title>AngularJS DateTimepicker</title> <script src="jquery/jquery-1.8.3.js"></script> <script src="jquery-ui/js/jquery-ui-1.9.2.js"></script> <script src="angular/angular.js"></script> <link rel="stylesheet" href="jquery-ui/css/custom-theme/jquery-ui-1.9.2.css"></link> <link href="jQuery-Timepicker-Addon/jquery-ui-timepicker-addon.css" type="text/css" /> <link href="jQuery-Timepicker-Addon/demos.css" rel="stylesheet" type="text/css" /> <script src="jQuery-Timepicker-Addon/jquery-ui-timepicker-addon.js" type="text/javascript"></script> <script src="directive/DateTimePickerDirective.js"></script> <script src="controller/DateTimePickerController.js"></script> <!--中文--> <script src="jquery-ui/js/jquery.ui.datepicker-zh-CN.js" type="text/javascript" charset="gb2312"></script> <script src="jquery-ui/js/jquery-ui-timepicker-zh-CN.js" type="text/javascript"></script> </head> <body ng-controller="MainCtrl"> <input id="dateField" datetimepicker ng-model="$parent.currentDateTime" select="updateMyText(dateTime)"></input> <br></br> {{myText}} - {{currentDateTime}} </body> </html>
运行效果:
相关推荐
主要介绍了angularjs封装bootstrap时间插件datetimepicker 的相关资料,需要的朋友可以参考下
NULL 博文链接:https://hoodbc.iteye.com/blog/1107779
jQuery日期和时间插件DateTimePicker是一款非常实用的jquery.datetimepicker插件。
jquery datetimepicker插件
DateTimepicker - jQuery日期时间选择插件
bootstrap-datetimepicker开始时间小于等于结束时间-相互约束-清除时间; JQuery的datetimepicker插件,限制开始时间小于等于结束时间
前端项目-jquery-datetimepicker,jQuery Plugin DateTimePicker it is DatePicker and TimePicker in one
主要为大家详细介绍了AngularJs中Bootstrap3 datetimepicker使用实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
jQuery制作日期和时间选择插件DateTimePicker,一款不错的日期选择空间。 演示地址:http://www.xwcms.net/js/rqsj/57381.html
DateTimePicket jQuery插件:使用这个插件来悄悄地添加一个DateTimePicker,日期选择器或timepicker下拉到您的表单。
jquery datetimepicker 时间日期插件,里面有demo
我只是搬运工,因为DateTimePicker的插件需要连,不然无法下载。从作者的github上面下载下来上传的供大家下载和学习,如需要深入学习该控件,可以去看原作者的github网站:https://github.com/xdan/datetimepicker
日期时间选择器,找了好长时间才找到。 jquery ui datetimepicker
DateTime Picker是一个基于jQuery的时间选择插件,支持web和移动。用户可以使用+ / -按钮或改变数值或直接到文本框中直接输入. 演示地址:http://www.jq22.com/jquery-info516
DateTimePicket jQuery插件:使用这个插件来悄悄地添加一个DateTimePicker,日期选择器或timepicker下拉到您的表单。
bootstap-datetimepicker.js 设置秒可以选择,主要修改了原js,把秒下拉框显示出来
修改了源代码,将原本的今日修改为清空操作,不一定符合全部的需求。