diff --git a/README.md b/README.md index 5eaff6c..18a73b4 100644 --- a/README.md +++ b/README.md @@ -28,12 +28,7 @@ You have the following properties available to use with the directive. All are * closeOnDateSelection (true/false) * enableDate (true/false) * enableTime (true/false) -* todayText (string) -* nowText (string) -* dateText (string) -* timeText (string) -* clearText (string) -* closeText (string) +* buttonBar (object) * dateDisabled * datepickerOptions (object) * timepickerOptions (object) @@ -47,18 +42,9 @@ Close popup once a date has been chosen. TimePicker will stay open until user cl Whether you would like the user to be able to select a date. Defaults to true ##### enableTime Whether you would like the user to be able to select a time. Defaults to true -##### todayText -The text for the button that allows the user to select today when the date picker is visible -##### nowText -The text for the button that allows the user to select the current time when the time picker is visible. If the date is already populated this will only change the time of the existing date. -##### dateText -The text for the button that allows the user to change to the date picker while the time picker is visible. -##### timeText -The text for the button that allows the user to change to the time picker while the date picker is visible. -##### clearText -The text for the button that allows the user to clear the currently selected date / time -##### closeText -The text for the button that closes the date / time popup/dropdown +##### buttonBar +To show or hide the button bar, or any of the buttons inside it. Defaults to the uiDatetimePickerConfig. +Only specify the elements that you want to override, as each button defaults to the uiDatetimePickerConfig setup, if it is not configured on scope of the datetimePicker ##### dateDisabled From angularUI site -> An optional expression to disable visible options based on passing date and current mode (day|month|year). ##### datepickerOptions @@ -67,27 +53,57 @@ Object to configure settings for the datepicker (can be found on angularUI site) Object to configure settings for the timepicker (can be found on angularUI site) ##### defaultTime Initial time when a new date is selected (e.g. "14:00:00" or "2:00 pm") +##### customClass +From angularUI site -> An optional expression to add classes based on passing a date and current mode +##### whenClosed +An callback function to call when the picker dropdown is closed. See demo for more details. ## uiDatetimePickerConfig Now datetimePicker options are globally set by default. If you do not state the values within the declaration, the config options are used instead. Here are the default options ``` .constant('uiDatetimePickerConfig', { - dateFormat: 'yyyy-MM-dd HH:mm', - enableDate: true, - enableTime: true, - todayText: 'Today', - nowText: 'Now', - clearText: 'Clear', - closeText: 'Done', - dateText: 'Date', - timeText: 'Time', - closeOnDateSelection: true, - appendToBody: false, - showButtonBar: true, - defaultTime: '00:00:00', - ngModelOptions: {} -}) + dateFormat: 'yyyy-MM-dd HH:mm', + defaultTime: '00:00:00', + html5Types: { + date: 'yyyy-MM-dd', + 'datetime-local': 'yyyy-MM-ddTHH:mm:ss.sss', + 'month': 'yyyy-MM' + }, + enableDate: true, + enableTime: true, + buttonBar: { + show: true, + now: { + show: true, + text: 'Now' + }, + today: { + show: true, + text: 'Today' + }, + clear: { + show: true, + text: 'Clear' + }, + date: { + show: true, + text: 'Date' + }, + time: { + show: true, + text: 'Time' + }, + close: { + show: true, + text: 'Close' + } + }, + closeOnDateSelection: true, + appendToBody: false, + altInputFormats: [], + ngModelOptions: { } + }) ``` ## Css diff --git a/bower.json b/bower.json index 79913cc..b219ee3 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "bootstrap-ui-datetime-picker", - "version": "2.1.0", + "version": "2.2.0", "homepage": "https://github.com/Gillardo/bootstrap-ui-datetime-picker", "authors": [ "Gillardo " diff --git a/datetime-picker.js b/datetime-picker.js index bf2746d..fbd1688 100644 --- a/datetime-picker.js +++ b/datetime-picker.js @@ -9,15 +9,35 @@ }, enableDate: true, enableTime: true, - todayText: 'Today', - nowText: 'Now', - clearText: 'Clear', - closeText: 'Done', - dateText: 'Date', - timeText: 'Time', + buttonBar: { + show: true, + now: { + show: true, + text: 'Now' + }, + today: { + show: true, + text: 'Today' + }, + clear: { + show: true, + text: 'Clear' + }, + date: { + show: true, + text: 'Date' + }, + time: { + show: true, + text: 'Time' + }, + close: { + show: true, + text: 'Close' + } + }, closeOnDateSelection: true, appendToBody: false, - showButtonBar: true, altInputFormats: [], ngModelOptions: { } }) @@ -34,7 +54,7 @@ ngModelOptions = ngModel.$options || uiDatetimePickerConfig.ngModelOptions; scope.watchData = {}; - scope.showButtonBar = angular.isDefined(attrs.showButtonBar) ? scope.$parent.$eval(attrs.showButtonBar) : uiDatetimePickerConfig.showButtonBar; + scope.buttonBar = angular.isDefined(attrs.buttonBar) ? scope.$parent.$eval(attrs.buttonBar) : uiDatetimePickerConfig.buttonBar; // determine which pickers should be available. Defaults to date and time scope.enableDate = angular.isDefined(scope.enableDate) ? scope.enableDate : uiDatetimePickerConfig.enableDate; @@ -225,7 +245,15 @@ // get text scope.getText = function (key) { - return scope[key + 'Text'] || uiDatetimePickerConfig[key + 'Text']; + return scope.buttonBar[key].text || uiDatetimePickerConfig.buttonBar[key].text; + }; + + // determine if button is to be shown or not + scope.doShow = function(key) { + if (angular.isDefined(scope.buttonBar[key].show)) + return scope.buttonBar[key].show; + else + return uiDatetimePickerConfig.buttonBar[key].show; }; // Inner change @@ -285,7 +313,7 @@ scope.showPicker = 'time'; }, 0); } else { - scope.close(); + scope.close(false); } } } @@ -294,7 +322,7 @@ scope.keydown = function(evt) { if (evt.which === 27) { - scope.close(); + scope.close(false); element[0].focus(); } }; @@ -305,6 +333,8 @@ }; if (value) { + cache['openDate'] = scope.date; + var position = appendToBody ? $uibPosition.offset(element) : $uibPosition.position(element); if (appendToBody) { @@ -359,13 +389,18 @@ scope.close(); }; - scope.close = function () { + scope.close = function (closePressed) { scope.isOpen = false; // if enableDate and enableTime are true, reopen the picker in date mode first if (scope.enableDate && scope.enableTime) scope.showPicker = 'date'; + // if a on-close-fn has been defined, lets call it + // we only call this if closePressed is defined! + if (angular.isDefined(closePressed)) + scope.whenClosed({ args: {closePressed: closePressed, openDate: cache['openDate'] || null, closeDate: scope.date } }); + element[0].focus(); }; @@ -401,7 +436,7 @@ if (scope.isOpen && !(dpContainsTarget || popupContainsTarget)) { scope.$apply(function() { - scope.isOpen = false; + scope.close(false); }); } } @@ -411,7 +446,7 @@ evt.preventDefault(); evt.stopPropagation(); scope.$apply(function() { - scope.close(); + scope.close(false); }); element[0].focus(); } else if (evt.which === 40 && !scope.isOpen) { @@ -496,14 +531,9 @@ isOpen: '=?', enableDate: '=?', enableTime: '=?', - todayText: '@', - nowText: '@', - dateText: '@', - timeText: '@', - clearText: '@', - closeText: '@', dateDisabled: '&', - customClass: '&' + customClass: '&', + whenClosed: '&' }, link: function (scope, element, attrs, ctrls) { var ngModel = ctrls[0], diff --git a/dist/datetime-picker.js b/dist/datetime-picker.js index 0940c39..d32e971 100644 --- a/dist/datetime-picker.js +++ b/dist/datetime-picker.js @@ -1,6 +1,6 @@ // https://github.com/Gillardo/bootstrap-ui-datetime-picker -// Version: 2.1.0 -// Released: 2016-01-18 +// Version: 2.2.0 +// Released: 2016-01-28 angular.module('ui.bootstrap.datetimepicker', ['ui.bootstrap.dateparser', 'ui.bootstrap.position']) .constant('uiDatetimePickerConfig', { dateFormat: 'yyyy-MM-dd HH:mm', @@ -12,15 +12,35 @@ angular.module('ui.bootstrap.datetimepicker', ['ui.bootstrap.dateparser', 'ui.bo }, enableDate: true, enableTime: true, - todayText: 'Today', - nowText: 'Now', - clearText: 'Clear', - closeText: 'Done', - dateText: 'Date', - timeText: 'Time', + buttonBar: { + show: true, + now: { + show: true, + text: 'Now' + }, + today: { + show: true, + text: 'Today' + }, + clear: { + show: true, + text: 'Clear' + }, + date: { + show: true, + text: 'Date' + }, + time: { + show: true, + text: 'Time' + }, + close: { + show: true, + text: 'Close' + } + }, closeOnDateSelection: true, appendToBody: false, - showButtonBar: true, altInputFormats: [], ngModelOptions: { } }) @@ -37,7 +57,7 @@ angular.module('ui.bootstrap.datetimepicker', ['ui.bootstrap.dateparser', 'ui.bo ngModelOptions = ngModel.$options || uiDatetimePickerConfig.ngModelOptions; scope.watchData = {}; - scope.showButtonBar = angular.isDefined(attrs.showButtonBar) ? scope.$parent.$eval(attrs.showButtonBar) : uiDatetimePickerConfig.showButtonBar; + scope.buttonBar = angular.isDefined(attrs.buttonBar) ? scope.$parent.$eval(attrs.buttonBar) : uiDatetimePickerConfig.buttonBar; // determine which pickers should be available. Defaults to date and time scope.enableDate = angular.isDefined(scope.enableDate) ? scope.enableDate : uiDatetimePickerConfig.enableDate; @@ -228,7 +248,15 @@ angular.module('ui.bootstrap.datetimepicker', ['ui.bootstrap.dateparser', 'ui.bo // get text scope.getText = function (key) { - return scope[key + 'Text'] || uiDatetimePickerConfig[key + 'Text']; + return scope.buttonBar[key].text || uiDatetimePickerConfig.buttonBar[key].text; + }; + + // determine if button is to be shown or not + scope.doShow = function(key) { + if (angular.isDefined(scope.buttonBar[key].show)) + return scope.buttonBar[key].show; + else + return uiDatetimePickerConfig.buttonBar[key].show; }; // Inner change @@ -288,7 +316,7 @@ angular.module('ui.bootstrap.datetimepicker', ['ui.bootstrap.dateparser', 'ui.bo scope.showPicker = 'time'; }, 0); } else { - scope.close(); + scope.close(false); } } } @@ -297,7 +325,7 @@ angular.module('ui.bootstrap.datetimepicker', ['ui.bootstrap.dateparser', 'ui.bo scope.keydown = function(evt) { if (evt.which === 27) { - scope.close(); + scope.close(false); element[0].focus(); } }; @@ -308,6 +336,8 @@ angular.module('ui.bootstrap.datetimepicker', ['ui.bootstrap.dateparser', 'ui.bo }; if (value) { + cache['openDate'] = scope.date; + var position = appendToBody ? $uibPosition.offset(element) : $uibPosition.position(element); if (appendToBody) { @@ -362,13 +392,18 @@ angular.module('ui.bootstrap.datetimepicker', ['ui.bootstrap.dateparser', 'ui.bo scope.close(); }; - scope.close = function () { + scope.close = function (closePressed) { scope.isOpen = false; // if enableDate and enableTime are true, reopen the picker in date mode first if (scope.enableDate && scope.enableTime) scope.showPicker = 'date'; + // if a on-close-fn has been defined, lets call it + // we only call this if closePressed is defined! + if (angular.isDefined(closePressed)) + scope.whenClosed({ args: {closePressed: closePressed, openDate: cache['openDate'] || null, closeDate: scope.date } }); + element[0].focus(); }; @@ -404,7 +439,7 @@ angular.module('ui.bootstrap.datetimepicker', ['ui.bootstrap.dateparser', 'ui.bo if (scope.isOpen && !(dpContainsTarget || popupContainsTarget)) { scope.$apply(function() { - scope.isOpen = false; + scope.close(false); }); } } @@ -414,7 +449,7 @@ angular.module('ui.bootstrap.datetimepicker', ['ui.bootstrap.dateparser', 'ui.bo evt.preventDefault(); evt.stopPropagation(); scope.$apply(function() { - scope.close(); + scope.close(false); }); element[0].focus(); } else if (evt.which === 40 && !scope.isOpen) { @@ -499,14 +534,9 @@ angular.module('ui.bootstrap.datetimepicker', ['ui.bootstrap.dateparser', 'ui.bo isOpen: '=?', enableDate: '=?', enableTime: '=?', - todayText: '@', - nowText: '@', - dateText: '@', - timeText: '@', - clearText: '@', - closeText: '@', dateDisabled: '&', - customClass: '&' + customClass: '&', + whenClosed: '&' }, link: function (scope, element, attrs, ctrls) { var ngModel = ctrls[0], @@ -537,12 +567,12 @@ angular.module('ui.bootstrap.datetimepicker').run(['$templateCache', function($t 'use strict'; $templateCache.put('template/date-picker.html', - "" + "" ); $templateCache.put('template/time-picker.html', - "" + "" ); }]); diff --git a/dist/datetime-picker.min.js b/dist/datetime-picker.min.js index 935f898..e442700 100644 --- a/dist/datetime-picker.min.js +++ b/dist/datetime-picker.min.js @@ -1,4 +1,4 @@ // https://github.com/Gillardo/bootstrap-ui-datetime-picker -// Version: 2.1.0 -// Released: 2016-01-18 -angular.module("ui.bootstrap.datetimepicker",["ui.bootstrap.dateparser","ui.bootstrap.position"]).constant("uiDatetimePickerConfig",{dateFormat:"yyyy-MM-dd HH:mm",defaultTime:"00:00:00",html5Types:{date:"yyyy-MM-dd","datetime-local":"yyyy-MM-ddTHH:mm:ss.sss",month:"yyyy-MM"},enableDate:!0,enableTime:!0,todayText:"Today",nowText:"Now",clearText:"Clear",closeText:"Done",dateText:"Date",timeText:"Time",closeOnDateSelection:!0,appendToBody:!1,showButtonBar:!0,altInputFormats:[],ngModelOptions:{}}).controller("DateTimePickerController",["$scope","$element","$attrs","$compile","$parse","$document","$timeout","$uibPosition","dateFilter","uibDateParser","uiDatetimePickerConfig","$rootScope",function(a,b,c,d,e,f,g,h,i,j,k,l){function m(c){var d=u[0],e=b[0].contains(c.target),f=void 0!==d.contains&&d.contains(c.target);!a.isOpen||e||f||a.$apply(function(){a.isOpen=!1})}function n(c){27===c.which&&a.isOpen?(c.preventDefault(),c.stopPropagation(),a.$apply(function(){a.close()}),b[0].focus()):40!==c.which||a.isOpen||(c.preventDefault(),c.stopPropagation(),a.$apply(function(){a.isOpen=!0}))}function o(a){return a.replace(/([A-Z])/g,function(a){return"-"+a.toLowerCase()})}function p(b){var c=j.parse(b,v,a.date);if(isNaN(c))for(var d=0;d
');a.ngModelOptions=angular.copy(t),a.ngModelOptions.timezone=null,l.attr({"ng-model":"date","ng-model-options":"ngModelOptions","ng-change":"dateSelection(date)"});var m=angular.element(l.children()[0]);if(h&&"month"===c.type&&(m.attr("datepicker-mode",'"month"'),m.attr("min-mode","month")),c.datepickerOptions){var x=a.$parent.$eval(c.datepickerOptions);x&&x.initDate&&(a.initDate=dateParser.fromTimezone(x.initDate,t.timezone),m.attr("init-date","initDate"),delete x.initDate),angular.forEach(x,function(a,b){m.attr(o(b),a)})}angular.isDefined(c.datepickerMode)||(c.datepickerMode="day"),c.dateDisabled&&m.attr("date-disabled","dateDisabled({ date: date, mode: mode })"),angular.forEach(["formatDay","formatMonth","formatYear","formatDayHeader","formatDayTitle","formatMonthTitle","showWeeks","startingDay","yearRows","yearColumns"],function(a){angular.isDefined(c[a])&&m.attr(o(a),c[a])}),c.customClass&&m.attr("custom-class","customClass({ date: date, mode: mode })"),angular.forEach(["minMode","maxMode","datepickerMode","shortcutPropagation"],function(b){if(c[b]){var d=e(c[b]);if(w.push(a.$parent.$watch(d,function(c){a.watchData[b]=c})),m.attr(o(b),"watchData."+b),"datepickerMode"===b){var f=d.assign;w.push(a.$watch("watchData."+b,function(b,c){angular.isFunction(f)&&b!==c&&f(a.$parent,b)}))}}});var z=angular.element(l.children()[1]);if(c.timepickerOptions){var x=a.$parent.$eval(c.timepickerOptions);angular.forEach(x,function(b,c){a.watchData[c]=b,z.attr(o(c),"watchData."+c)})}angular.forEach(["minDate","maxDate","initDate"],function(b){if(c[b]){var d=e(c[b]);w.push(a.$parent.$watch(d,function(c){a.watchData[b]=c})),m.attr(o(b),"watchData."+b),"minDate"==b?z.attr("min","watchData.minDate"):"maxDate"==b&&z.attr("max","watchData.maxDate")}}),h?s.$formatters.push(function(b){return a.date=j.fromTimezone(b,t.timezone),b}):(s.$$parserName="datetime",s.$validators.datetime=r,s.$parsers.unshift(q),s.$formatters.push(function(b){return s.$isEmpty(b)?(a.date=b,b):(a.date=j.fromTimezone(b,t.timezone),v=v.replace(/M!/,"MM").replace(/d!/,"dd"),i(a.date,v))})),s.$viewChangeListeners.push(function(){a.date=p(s.$viewValue)}),b.bind("keydown",n),u=d(l)(a),l.remove(),y?f.find("body").append(u):b.after(u)},a.getText=function(b){return a[b+"Text"]||k[b+"Text"]},a.dateSelection=function(d){if(a.enableTime&&"time"===a.showPicker&&(d||null!=d)&&(angular.isDefined(a.date)&&null!=a.date||(a.date=new Date),d&&null!=d)){var e=new Date(a.date);e.setHours(d.getHours()),e.setMinutes(d.getMinutes()),e.setSeconds(d.getSeconds()),e.setMilliseconds(d.getMilliseconds()),d=e}if(angular.isDefined(d)){if(!a.date){var f=angular.isDefined(c.defaultTime)?c.defaultTime:k.defaultTime,h=new Date("2001-01-01 "+f);isNaN(h)||(d.setHours(h.getHours()),d.setMinutes(h.getMinutes()),d.setSeconds(h.getSeconds()),d.setMilliseconds(h.getMilliseconds()))}a.date=d}var e=a.date?i(a.date,v,t.timezone):null;b.val(e),s.$setViewValue(e),x&&"time"!=a.showPicker&&null!=e&&(a.enableTime?g(function(){a.showPicker="time"},0):a.close())},a.keydown=function(c){27===c.which&&(a.close(),b[0].focus())},a.$watch("isOpen",function(c){if(a.dropdownStyle={display:c?"block":"none"},c){var d=y?h.offset(b):h.position(b);y?a.dropdownStyle.top=d.top+b.prop("offsetHeight")+"px":a.dropdownStyle.top=void 0,a.dropdownStyle.left=d.left+"px",g(function(){a.$broadcast("uib:datepicker.focus"),f.bind("click",m)},0,!1)}else f.unbind("click",m)}),a.isDisabled=function(b){return("today"===b||"now"===b)&&(b=new Date),a.watchData.minDate&&a.compare(b,a.watchData.minDate)<0||a.watchData.maxDate&&a.compare(b,a.watchData.maxDate)>0},a.compare=function(a,b){return new Date(a.getFullYear(),a.getMonth(),a.getDate())-new Date(b.getFullYear(),b.getMonth(),b.getDate())},a.select=function(b){var c=null;if("today"===b||"now"==b){var d=new Date;angular.isDate(a.date)?(c=new Date(a.date),c.setFullYear(d.getFullYear(),d.getMonth(),d.getDate()),c.setHours(d.getHours(),d.getMinutes(),d.getSeconds(),d.getMilliseconds())):c=d}a.dateSelection(c),"clear"==b&&a.close()},a.close=function(){a.isOpen=!1,a.enableDate&&a.enableTime&&(a.showPicker="date"),b[0].focus()},a.changePicker=function(b,c){b.preventDefault(),b.stopPropagation(),a.showPicker=c},a.$on("$destroy",function(){a.isOpen===!0&&(l.$$phase||a.$apply(function(){a.close()})),w.forEach(function(a){a()}),u.remove(),b.unbind("keydown",n),f.unbind("click",m)})}]).directive("datetimePicker",function(){return{restrict:"A",require:["ngModel","datetimePicker"],controller:"DateTimePickerController",scope:{isOpen:"=?",enableDate:"=?",enableTime:"=?",todayText:"@",nowText:"@",dateText:"@",timeText:"@",clearText:"@",closeText:"@",dateDisabled:"&",customClass:"&"},link:function(a,b,c,d){var e=d[0],f=d[1];f.init(e)}}}).directive("datePickerWrap",function(){return{restrict:"EA",replace:!0,transclude:!0,templateUrl:"template/date-picker.html"}}).directive("timePickerWrap",function(){return{restrict:"EA",replace:!0,transclude:!0,templateUrl:"template/time-picker.html"}}),angular.module("ui.bootstrap.datetimepicker").run(["$templateCache",function(a){"use strict";a.put("template/date-picker.html",''),a.put("template/time-picker.html",'')}]); \ No newline at end of file +// Version: 2.2.0 +// Released: 2016-01-28 +angular.module("ui.bootstrap.datetimepicker",["ui.bootstrap.dateparser","ui.bootstrap.position"]).constant("uiDatetimePickerConfig",{dateFormat:"yyyy-MM-dd HH:mm",defaultTime:"00:00:00",html5Types:{date:"yyyy-MM-dd","datetime-local":"yyyy-MM-ddTHH:mm:ss.sss",month:"yyyy-MM"},enableDate:!0,enableTime:!0,buttonBar:{show:!0,now:{show:!0,text:"Now"},today:{show:!0,text:"Today"},clear:{show:!0,text:"Clear"},date:{show:!0,text:"Date"},time:{show:!0,text:"Time"},close:{show:!0,text:"Close"}},closeOnDateSelection:!0,appendToBody:!1,altInputFormats:[],ngModelOptions:{}}).controller("DateTimePickerController",["$scope","$element","$attrs","$compile","$parse","$document","$timeout","$uibPosition","dateFilter","uibDateParser","uiDatetimePickerConfig","$rootScope",function(a,b,c,d,e,f,g,h,i,j,k,l){function m(c){var d=u[0],e=b[0].contains(c.target),f=void 0!==d.contains&&d.contains(c.target);!a.isOpen||e||f||a.$apply(function(){a.close(!1)})}function n(c){27===c.which&&a.isOpen?(c.preventDefault(),c.stopPropagation(),a.$apply(function(){a.close(!1)}),b[0].focus()):40!==c.which||a.isOpen||(c.preventDefault(),c.stopPropagation(),a.$apply(function(){a.isOpen=!0}))}function o(a){return a.replace(/([A-Z])/g,function(a){return"-"+a.toLowerCase()})}function p(b){var c=j.parse(b,v,a.date);if(isNaN(c))for(var d=0;d
');a.ngModelOptions=angular.copy(t),a.ngModelOptions.timezone=null,l.attr({"ng-model":"date","ng-model-options":"ngModelOptions","ng-change":"dateSelection(date)"});var m=angular.element(l.children()[0]);if(h&&"month"===c.type&&(m.attr("datepicker-mode",'"month"'),m.attr("min-mode","month")),c.datepickerOptions){var w=a.$parent.$eval(c.datepickerOptions);w&&w.initDate&&(a.initDate=dateParser.fromTimezone(w.initDate,t.timezone),m.attr("init-date","initDate"),delete w.initDate),angular.forEach(w,function(a,b){m.attr(o(b),a)})}angular.isDefined(c.datepickerMode)||(c.datepickerMode="day"),c.dateDisabled&&m.attr("date-disabled","dateDisabled({ date: date, mode: mode })"),angular.forEach(["formatDay","formatMonth","formatYear","formatDayHeader","formatDayTitle","formatMonthTitle","showWeeks","startingDay","yearRows","yearColumns"],function(a){angular.isDefined(c[a])&&m.attr(o(a),c[a])}),c.customClass&&m.attr("custom-class","customClass({ date: date, mode: mode })"),angular.forEach(["minMode","maxMode","datepickerMode","shortcutPropagation"],function(b){if(c[b]){var d=e(c[b]);if(x.push(a.$parent.$watch(d,function(c){a.watchData[b]=c})),m.attr(o(b),"watchData."+b),"datepickerMode"===b){var f=d.assign;x.push(a.$watch("watchData."+b,function(b,c){angular.isFunction(f)&&b!==c&&f(a.$parent,b)}))}}});var y=angular.element(l.children()[1]);if(c.timepickerOptions){var w=a.$parent.$eval(c.timepickerOptions);angular.forEach(w,function(b,c){a.watchData[c]=b,y.attr(o(c),"watchData."+c)})}angular.forEach(["minDate","maxDate","initDate"],function(b){if(c[b]){var d=e(c[b]);x.push(a.$parent.$watch(d,function(c){a.watchData[b]=c})),m.attr(o(b),"watchData."+b),"minDate"==b?y.attr("min","watchData.minDate"):"maxDate"==b&&y.attr("max","watchData.maxDate")}}),h?s.$formatters.push(function(b){return a.date=j.fromTimezone(b,t.timezone),b}):(s.$$parserName="datetime",s.$validators.datetime=r,s.$parsers.unshift(q),s.$formatters.push(function(b){return s.$isEmpty(b)?(a.date=b,b):(a.date=j.fromTimezone(b,t.timezone),v=v.replace(/M!/,"MM").replace(/d!/,"dd"),i(a.date,v))})),s.$viewChangeListeners.push(function(){a.date=p(s.$viewValue)}),b.bind("keydown",n),u=d(l)(a),l.remove(),z?f.find("body").append(u):b.after(u)},a.getText=function(b){return a.buttonBar[b].text||k.buttonBar[b].text},a.doShow=function(b){return angular.isDefined(a.buttonBar[b].show)?a.buttonBar[b].show:k.buttonBar[b].show},a.dateSelection=function(d){if(a.enableTime&&"time"===a.showPicker&&(d||null!=d)&&(angular.isDefined(a.date)&&null!=a.date||(a.date=new Date),d&&null!=d)){var e=new Date(a.date);e.setHours(d.getHours()),e.setMinutes(d.getMinutes()),e.setSeconds(d.getSeconds()),e.setMilliseconds(d.getMilliseconds()),d=e}if(angular.isDefined(d)){if(!a.date){var f=angular.isDefined(c.defaultTime)?c.defaultTime:k.defaultTime,h=new Date("2001-01-01 "+f);isNaN(h)||(d.setHours(h.getHours()),d.setMinutes(h.getMinutes()),d.setSeconds(h.getSeconds()),d.setMilliseconds(h.getMilliseconds()))}a.date=d}var e=a.date?i(a.date,v,t.timezone):null;b.val(e),s.$setViewValue(e),y&&"time"!=a.showPicker&&null!=e&&(a.enableTime?g(function(){a.showPicker="time"},0):a.close(!1))},a.keydown=function(c){27===c.which&&(a.close(!1),b[0].focus())},a.$watch("isOpen",function(c){if(a.dropdownStyle={display:c?"block":"none"},c){w.openDate=a.date;var d=z?h.offset(b):h.position(b);z?a.dropdownStyle.top=d.top+b.prop("offsetHeight")+"px":a.dropdownStyle.top=void 0,a.dropdownStyle.left=d.left+"px",g(function(){a.$broadcast("uib:datepicker.focus"),f.bind("click",m)},0,!1)}else f.unbind("click",m)}),a.isDisabled=function(b){return("today"===b||"now"===b)&&(b=new Date),a.watchData.minDate&&a.compare(b,a.watchData.minDate)<0||a.watchData.maxDate&&a.compare(b,a.watchData.maxDate)>0},a.compare=function(a,b){return new Date(a.getFullYear(),a.getMonth(),a.getDate())-new Date(b.getFullYear(),b.getMonth(),b.getDate())},a.select=function(b){var c=null;if("today"===b||"now"==b){var d=new Date;angular.isDate(a.date)?(c=new Date(a.date),c.setFullYear(d.getFullYear(),d.getMonth(),d.getDate()),c.setHours(d.getHours(),d.getMinutes(),d.getSeconds(),d.getMilliseconds())):c=d}a.dateSelection(c),"clear"==b&&a.close()},a.close=function(c){a.isOpen=!1,a.enableDate&&a.enableTime&&(a.showPicker="date"),angular.isDefined(c)&&a.whenClosed({args:{closePressed:c,openDate:w.openDate||null,closeDate:a.date}}),b[0].focus()},a.changePicker=function(b,c){b.preventDefault(),b.stopPropagation(),a.showPicker=c},a.$on("$destroy",function(){a.isOpen===!0&&(l.$$phase||a.$apply(function(){a.close()})),x.forEach(function(a){a()}),u.remove(),b.unbind("keydown",n),f.unbind("click",m)})}]).directive("datetimePicker",function(){return{restrict:"A",require:["ngModel","datetimePicker"],controller:"DateTimePickerController",scope:{isOpen:"=?",enableDate:"=?",enableTime:"=?",dateDisabled:"&",customClass:"&",whenClosed:"&"},link:function(a,b,c,d){var e=d[0],f=d[1];f.init(e)}}}).directive("datePickerWrap",function(){return{restrict:"EA",replace:!0,transclude:!0,templateUrl:"template/date-picker.html"}}).directive("timePickerWrap",function(){return{restrict:"EA",replace:!0,transclude:!0,templateUrl:"template/time-picker.html"}}),angular.module("ui.bootstrap.datetimepicker").run(["$templateCache",function(a){"use strict";a.put("template/date-picker.html",'
'),a.put("template/time-picker.html",'
')}]); \ No newline at end of file diff --git a/dist/datetime-picker.tpls.js b/dist/datetime-picker.tpls.js index 57fc82e..0f0790c 100644 --- a/dist/datetime-picker.tpls.js +++ b/dist/datetime-picker.tpls.js @@ -2,12 +2,12 @@ angular.module('ui.bootstrap.datetimepicker').run(['$templateCache', function($t 'use strict'; $templateCache.put('template/date-picker.html', - "
" + "
" ); $templateCache.put('template/time-picker.html', - "
" + "
" ); }]); diff --git a/example/index.html b/example/index.html index 437853a..f70b516 100644 --- a/example/index.html +++ b/example/index.html @@ -5,7 +5,7 @@ - + @@ -27,9 +27,9 @@

Pick a date

- - - + + +

@@ -51,9 +51,9 @@

Pick a time

- - - + + +

@@ -72,9 +72,9 @@

Pick a date and time

- - - + + +

@@ -94,9 +94,9 @@

Pick two dates to calculate difference

- - - + + +

@@ -105,9 +105,9 @@

Pick two dates to calculate difference

- - - + + +

@@ -126,9 +126,9 @@

Global Configured DateTime Picker

- - - + + +

@@ -147,9 +147,9 @@

Use bootstrap dropup class

- - - + + +

@@ -169,9 +169,9 @@

View Mode

- - - + + +

@@ -191,9 +191,9 @@

Default Time

- - - + + +

@@ -212,9 +212,9 @@

Min / Max times

- - - + + +

@@ -223,15 +223,49 @@

Min / Max times

- - - + + +

- +

Customize Button bar

+
+
+ +
+

+ + + + +

+
+
+
+
+

Call function when closed

+
+
+ +
+

+ + + + +

+
+
+
+ +
+

{{ ctrl.closedArgs }}

+
+
+
diff --git a/example/index.js b/example/index.js index 6a37c4a..cc49800 100644 --- a/example/index.js +++ b/example/index.js @@ -18,7 +18,9 @@ app.controller('MyController', ['$scope', function($scope) { date8: new Date(), date9: null, date10: new Date('2015-03-01T09:00:00Z'), - date11: new Date('2015-03-01T10:00:00Z') + date11: new Date('2015-03-01T10:00:00Z'), + date12: new Date('2015-03-01T10:00:00Z'), + date13: null, }; this.open = { @@ -32,7 +34,9 @@ app.controller('MyController', ['$scope', function($scope) { date8: false, date9: false, date10: false, - date11: false + date11: false, + date12: false, + date13: false }; // Disable today selection @@ -55,6 +59,38 @@ app.controller('MyController', ['$scope', function($scope) { maxMode: 'year' }; + this.buttonBar = { + show: true, + now: { + show: true, + text: 'Now!' + }, + today: { + show: true, + text: 'Today!' + }, + clear: { + show: false, + text: 'Wipe' + }, + date: { + show: true, + text: 'Date' + }, + time: { + show: true, + text: 'Time' + }, + close: { + show: true, + text: 'Shut' + } + }; + + this.onClosed = function(args) { + that.closedArgs = args; + }; + this.openCalendar = function(e, date) { that.open[date] = true; }; diff --git a/package.json b/package.json index b53507b..27d4b98 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "bootstrap-ui-datetime-picker", - "version": "2.1.0", + "version": "2.2.0", "url": "https://github.com/Gillardo/bootstrap-ui-datetime-picker", "authors": [ "Gillardo " diff --git a/template/date-picker.html b/template/date-picker.html index cbe95b0..8a702d8 100644 --- a/template/date-picker.html +++ b/template/date-picker.html @@ -1,15 +1,15 @@ -
    +
      • -
    • - - - +
    • + + + - - - + + +
    \ No newline at end of file diff --git a/template/time-picker.html b/template/time-picker.html index 86be499..b715e4f 100644 --- a/template/time-picker.html +++ b/template/time-picker.html @@ -1,15 +1,15 @@ -
      +
        • -
      • - - - +
      • + + + - - - + + +
      \ No newline at end of file