//http://trentrichardson.com/examples/timepicker/#rest_examples // angular: http://docs.angularjs.org/api/ng.filter:date //.net: http://msdn.microsoft.com/en-us/library/8kb3ddd4(v=vs.110).aspx // jquery: http://api.jqueryui.com/datepicker/ //http://trentrichardson.com/examples/timepicker/#slider_examples evoapp.directive('datepicker', function($timeout, $filter, globals) { var options; options = {}; return { restrict: 'A', require: '?ngModel', link : function (scope, element, attrs, controller) { //convert angularjs formats to jquery format var dateFormat = $dateFormat.convert(globals.settings.dateFormat, $dateFormat.angularjs, $dateFormat.jquery); var timeFormat = $dateFormat.convert(globals.settings.timeFormat, $dateFormat.angularjs, $dateFormat.jquery); //parse attributes var showTime = attrs.showTime != undefined ? scope.$eval(attrs.showTime) : false, timeOnly = attrs.timeOnly != undefined ? scope.$eval(attrs.timeOnly) : false; if (controller) { controller.$render = function () { var date = controller.$viewValue; if(angular.isDate(date)) { $(element).datetimepicker('setDate', date); controller.$setViewValue(controller.$viewValue); } }; }; $(element).datetimepicker('destroy'); //TODO: see _defaults line, line 48 ! $(element).datetimepicker({ separator: showTime ? ' ' : '', firstDay: 1, timeFormat: showTime ? timeFormat : '',//HH:mm dateFormat: dateFormat,//dd-mm-yy stepHour: 1, stepMinute: 5, stepSecond: 10, showButtonPanel: true, timeOnly: timeOnly, showHour: null, showMinute: null, showSecond: null, showMillisec: null, showMicrosec: null, showTimezone: null, showTime: showTime, currentText: 'Hoje', closeText: '', beforeShow: function(input, dp_inst){ var $datePicker = $(element); var zIndexModal = $datePicker.closest(".modal-scrollable").css("z-index"); zIndexModal++; setTimeout(function(){ $('#ui-datepicker-div').css("z-index", zIndexModal); }, 0); }, onClose: function(dateText, inst) { scope.$emit('onClose', {dateText: dateText, inst: inst}); }, onSelect: function (selectedDateTime){ scope.$emit('onSelect', {selectedDateTime: selectedDateTime}); //if(!showTime) //{ // $(element).datetimepicker('hide'); //} } }); $(element).change(function(el){ if (controller){ var date = $(element).datetimepicker('getDate'); if(angular.isDate(date) && !scope.$$phase) { scope.$apply(function () { controller.$setViewValue(date); $(element).blur(); }); } } }); scope.domEl = $(element); if(attrs.itemId != undefined) { //TODO: this might differ - scope might refer to the controller and in other places refer to this only! //TODO: we might need to check if 'scope.$parent' is a valid controller //TODO: use scope or scope.$parent for creating an instance of this control in the parent controller/view //add reference to this datepicker, in controller if(scope.$parent[attrs.itemId] == undefined) { scope.$parent[attrs.itemId] = scope; } else { throw Error('datepicker ' + attrs.itemId + ' already exists!'); } } if (controller) { controller.$render(); } } } });