Skip to content

Commit

Permalink
Angular-UI update
Browse files Browse the repository at this point in the history 
Updated code to benefit from the features of angular 1.4.0+ and
angular-ui 1.0.0+.  Features like timezone and ngModelOptions included.
Also added missing options such as formatDay, formatMonth etc
  • Loading branch information
@Gillardo
Gillardo committed Jan 18, 2016
1 parent 998b253 commit 63d3972
Show file tree
Hide file tree
Showing 8 changed files with 113 additions and 91 deletions.
5 changes: 3 additions & 2 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,8 @@ Now datetimePicker options are globally set by default. If you do not state the
closeOnDateSelection: true,
appendToBody: false,
showButtonBar: true,
defaultTime: '00:00 PM'
defaultTime: '00:00:00',
ngModelOptions: {}
})
```

Expand Down Expand Up @@ -152,4 +153,4 @@ app.controller('MyController', function() {
```

## Support
This was developed using angular-ui bootstrap Version: 0.13.2 - 2015-08-02. If you have a bug, please check what version of angular-ui you are using. If you are using a version prior to this, then please upgrade if you can and try it. If the problem persists, please let me know. I do have a day job but will try to get back to you asap. If you can fix the bug, then let me know how, or even better, submit a pull request.
This was developed using angular-ui bootstrap Version: 1.1.0 - 2016-01-18. If you have a bug, please check what version of angular-ui you are using. If you are using a version prior to this, then please upgrade if you can and try it. If the problem persists, please let me know. I do have a day job but will try to get back to you asap. If you can fix the bug, then let me know how, or even better, submit a pull request.
4 changes: 2 additions & 2 deletions bower.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "bootstrap-ui-datetime-picker",
"version": "2.0.7",
"version": "2.1.0",
"homepage": "https://github.com/Gillardo/bootstrap-ui-datetime-picker",
"authors": [
"Gillardo <[email protected]>"
Expand Down Expand Up @@ -29,6 +29,6 @@
"tests"
],
"dependencies": {
"angular-bootstrap": "~0.14.0"
"angular-bootstrap": "~1.1.0"
}
}
87 changes: 49 additions & 38 deletions datetime-picker.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
angular.module('ui.bootstrap.datetimepicker', ['ui.bootstrap.dateparser', 'ui.bootstrap.position'])
.constant('uiDatetimePickerConfig', {
dateFormat: 'yyyy-MM-dd HH:mm',
defaultTime: '00:00 PM',
defaultTime: '00:00:00',
html5Types: {
date: 'yyyy-MM-dd',
'datetime-local': 'yyyy-MM-ddTHH:mm:ss.sss',
Expand All @@ -19,19 +19,19 @@
appendToBody: false,
showButtonBar: true,
altInputFormats: [],
timezone: 'UTC'
ngModelOptions: { }
})
.controller('DateTimePickerController', ['$scope', '$element', '$attrs', '$compile', '$parse', '$document', '$timeout', '$uibPosition', 'dateFilter', 'uibDateParser', 'uiDatetimePickerConfig', '$rootScope',
function (scope, element, attrs, $compile, $parse, $document, $timeout, $uibPosition, dateFilter, uibDateParser, uiDatetimePickerConfig, $rootScope) {
var dateFormat = uiDatetimePickerConfig.dateFormat,
ngModel, timezone, $popup, cache = {}, watchListeners = [],
ngModel, ngModelOptions, $popup, cache = {}, watchListeners = [],
closeOnDateSelection = angular.isDefined(attrs.closeOnDateSelection) ? scope.$parent.$eval(attrs.closeOnDateSelection) : uiDatetimePickerConfig.closeOnDateSelection,
appendToBody = angular.isDefined(attrs.datepickerAppendToBody) ? scope.$parent.$eval(attrs.datepickerAppendToBody) : uiDatetimePickerConfig.appendToBody,
altInputFormats = angular.isDefined(attrs.altInputFormats) ? scope.$parent.$eval(attrs.altInputFormats) : uiDatetimePickerConfig.altInputFormats;

this.init = function(_ngModel) {
ngModel = _ngModel;
timezone = attrs.timezone || uiDatetimePickerConfig.timezone;
ngModelOptions = ngModel.$options || uiDatetimePickerConfig.ngModelOptions;

scope.watchData = {};
scope.showButtonBar = angular.isDefined(attrs.showButtonBar) ? scope.$parent.$eval(attrs.showButtonBar) : uiDatetimePickerConfig.showButtonBar;
Expand Down Expand Up @@ -73,9 +73,13 @@
'<div uib-timepicker style="margin:0 auto"></div>' +
'</div>');

scope.ngModelOptions = angular.copy(ngModelOptions);
scope.ngModelOptions.timezone = null;

// get attributes from directive
popupEl.attr({
'ng-model': 'date',
'ng-model-options': 'ngModelOptions',
'ng-change': 'dateSelection(date)'
});

Expand All @@ -93,7 +97,7 @@
var options = scope.$parent.$eval(attrs.datepickerOptions);

if (options && options.initDate) {
scope.initDate = options.initDate;
scope.initDate = dateParser.fromTimezone(options.initDate, ngModelOptions.timezone);
datepickerEl.attr('init-date', 'initDate');
delete options.initDate;
}
Expand Down Expand Up @@ -183,12 +187,19 @@
ngModel.$validators.datetime = validator;
ngModel.$parsers.unshift(parseDate);
ngModel.$formatters.push(function(value) {
scope.date = value;
return ngModel.$isEmpty(value) ? value : dateFilter(value, dateFormat, timezone);
if (ngModel.$isEmpty(value)) {
scope.date = value;
return value;
}
scope.date = uibDateParser.fromTimezone(value, ngModelOptions.timezone);;
dateFormat = dateFormat.replace(/M!/, 'MM')
.replace(/d!/, 'dd');

return dateFilter(scope.date, dateFormat);
});
} else {
ngModel.$formatters.push(function(value) {
scope.date = value;
scope.date = uibDateParser.fromTimezone(value, ngModelOptions.timezone);;
return value;
});
}
Expand Down Expand Up @@ -259,7 +270,7 @@
scope.date = dt;
}

var date = scope.date ? dateFilter(scope.date, dateFormat, timezone) : null;
var date = scope.date ? dateFilter(scope.date, dateFormat, ngModelOptions.timezone) : null;

element.val(date);
ngModel.$setViewValue(date);
Expand Down Expand Up @@ -441,11 +452,11 @@
return viewValue;
} else if (angular.isString(viewValue)) {
var date = parseDateString(viewValue);
if (isNaN(date)) {
return undefined;
if (!isNaN(date)) {
return uibDateParser.toTimezone(date, ngModelOptions.timezone);
}

return date;
return undefined;
} else {
return undefined;
}
Expand Down Expand Up @@ -477,31 +488,31 @@

}])
.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 (scope, element, attrs, ctrls) {
var ngModel = ctrls[0],
ctrl = ctrls[1];

ctrl.init(ngModel);
}
};
})
return {
restrict: 'A',
require: ['ngModel', 'datetimePicker'],
controller: 'DateTimePickerController',
scope: {
isOpen: '=?',
enableDate: '=?',
enableTime: '=?',
todayText: '@',
nowText: '@',
dateText: '@',
timeText: '@',
clearText: '@',
closeText: '@',
dateDisabled: '&',
customClass: '&'
},
link: function (scope, element, attrs, ctrls) {
var ngModel = ctrls[0],
ctrl = ctrls[1];

ctrl.init(ngModel);
}
};
})
.directive('datePickerWrap', function () {
return {
restrict: 'EA',
Expand All @@ -518,4 +529,4 @@
transclude: true,
templateUrl: 'template/time-picker.html'
};
});
});
88 changes: 49 additions & 39 deletions dist/datetime-picker.js
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
// https://github.com/Gillardo/bootstrap-ui-datetime-picker
// Version: 2.0.7
// 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 PM',
defaultTime: '00:00:00',
html5Types: {
date: 'yyyy-MM-dd',
'datetime-local': 'yyyy-MM-ddTHH:mm:ss.sss',
Expand All @@ -22,19 +22,19 @@ angular.module('ui.bootstrap.datetimepicker', ['ui.bootstrap.dateparser', 'ui.bo
appendToBody: false,
showButtonBar: true,
altInputFormats: [],
timezone: 'UTC'
ngModelOptions: { }
})
.controller('DateTimePickerController', ['$scope', '$element', '$attrs', '$compile', '$parse', '$document', '$timeout', '$uibPosition', 'dateFilter', 'uibDateParser', 'uiDatetimePickerConfig', '$rootScope',
function (scope, element, attrs, $compile, $parse, $document, $timeout, $uibPosition, dateFilter, uibDateParser, uiDatetimePickerConfig, $rootScope) {
var dateFormat = uiDatetimePickerConfig.dateFormat,
ngModel, timezone, $popup, cache = {}, watchListeners = [],
ngModel, ngModelOptions, $popup, cache = {}, watchListeners = [],
closeOnDateSelection = angular.isDefined(attrs.closeOnDateSelection) ? scope.$parent.$eval(attrs.closeOnDateSelection) : uiDatetimePickerConfig.closeOnDateSelection,
appendToBody = angular.isDefined(attrs.datepickerAppendToBody) ? scope.$parent.$eval(attrs.datepickerAppendToBody) : uiDatetimePickerConfig.appendToBody,
altInputFormats = angular.isDefined(attrs.altInputFormats) ? scope.$parent.$eval(attrs.altInputFormats) : uiDatetimePickerConfig.altInputFormats;

this.init = function(_ngModel) {
ngModel = _ngModel;
timezone = attrs.timezone || uiDatetimePickerConfig.timezone;
ngModelOptions = ngModel.$options || uiDatetimePickerConfig.ngModelOptions;

scope.watchData = {};
scope.showButtonBar = angular.isDefined(attrs.showButtonBar) ? scope.$parent.$eval(attrs.showButtonBar) : uiDatetimePickerConfig.showButtonBar;
Expand Down Expand Up @@ -76,9 +76,13 @@ angular.module('ui.bootstrap.datetimepicker', ['ui.bootstrap.dateparser', 'ui.bo
'<div uib-timepicker style="margin:0 auto"></div>' +
'</div>');

scope.ngModelOptions = angular.copy(ngModelOptions);
scope.ngModelOptions.timezone = null;

// get attributes from directive
popupEl.attr({
'ng-model': 'date',
'ng-model-options': 'ngModelOptions',
'ng-change': 'dateSelection(date)'
});

Expand All @@ -96,7 +100,7 @@ angular.module('ui.bootstrap.datetimepicker', ['ui.bootstrap.dateparser', 'ui.bo
var options = scope.$parent.$eval(attrs.datepickerOptions);

if (options && options.initDate) {
scope.initDate = options.initDate;
scope.initDate = dateParser.fromTimezone(options.initDate, ngModelOptions.timezone);
datepickerEl.attr('init-date', 'initDate');
delete options.initDate;
}
Expand Down Expand Up @@ -186,12 +190,19 @@ angular.module('ui.bootstrap.datetimepicker', ['ui.bootstrap.dateparser', 'ui.bo
ngModel.$validators.datetime = validator;
ngModel.$parsers.unshift(parseDate);
ngModel.$formatters.push(function(value) {
scope.date = value;
return ngModel.$isEmpty(value) ? value : dateFilter(value, dateFormat, timezone);
if (ngModel.$isEmpty(value)) {
scope.date = value;
return value;
}
scope.date = uibDateParser.fromTimezone(value, ngModelOptions.timezone);;
dateFormat = dateFormat.replace(/M!/, 'MM')
.replace(/d!/, 'dd');

return dateFilter(scope.date, dateFormat);
});
} else {
ngModel.$formatters.push(function(value) {
scope.date = value;
scope.date = uibDateParser.fromTimezone(value, ngModelOptions.timezone);;
return value;
});
}
Expand Down Expand Up @@ -262,7 +273,7 @@ angular.module('ui.bootstrap.datetimepicker', ['ui.bootstrap.dateparser', 'ui.bo
scope.date = dt;
}

var date = scope.date ? dateFilter(scope.date, dateFormat, timezone) : null;
var date = scope.date ? dateFilter(scope.date, dateFormat, ngModelOptions.timezone) : null;

element.val(date);
ngModel.$setViewValue(date);
Expand Down Expand Up @@ -444,11 +455,11 @@ angular.module('ui.bootstrap.datetimepicker', ['ui.bootstrap.dateparser', 'ui.bo
return viewValue;
} else if (angular.isString(viewValue)) {
var date = parseDateString(viewValue);
if (isNaN(date)) {
return undefined;
if (!isNaN(date)) {
return uibDateParser.toTimezone(date, ngModelOptions.timezone);
}

return date;
return undefined;
} else {
return undefined;
}
Expand Down Expand Up @@ -480,31 +491,31 @@ angular.module('ui.bootstrap.datetimepicker', ['ui.bootstrap.dateparser', 'ui.bo

}])
.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 (scope, element, attrs, ctrls) {
var ngModel = ctrls[0],
ctrl = ctrls[1];

ctrl.init(ngModel);
}
};
})
return {
restrict: 'A',
require: ['ngModel', 'datetimePicker'],
controller: 'DateTimePickerController',
scope: {
isOpen: '=?',
enableDate: '=?',
enableTime: '=?',
todayText: '@',
nowText: '@',
dateText: '@',
timeText: '@',
clearText: '@',
closeText: '@',
dateDisabled: '&',
customClass: '&'
},
link: function (scope, element, attrs, ctrls) {
var ngModel = ctrls[0],
ctrl = ctrls[1];

ctrl.init(ngModel);
}
};
})
.directive('datePickerWrap', function () {
return {
restrict: 'EA',
Expand All @@ -522,7 +533,6 @@ angular.module('ui.bootstrap.datetimepicker', ['ui.bootstrap.dateparser', 'ui.bo
templateUrl: 'template/time-picker.html'
};
});

angular.module('ui.bootstrap.datetimepicker').run(['$templateCache', function($templateCache) {
'use strict';

Expand Down
Loading

0 comments on commit 63d3972

Please sign in to comment.