strong-arc
Version:
A visual suite for the StrongLoop API Platform
112 lines (105 loc) • 3.83 kB
JavaScript
/*global angular */
/*
jQuery UI Datepicker plugin wrapper
@note If ≤ IE8 make sure you have a polyfill for Date.toISOString()
@param [ui-date] {object} Options to pass to $.fn.datepicker() merged onto ui.config
*/
angular.module('ui.directives')
.directive('uiDate', ['ui.config', function (uiConfig) {
'use strict';
var options;
options = {};
if (angular.isObject(uiConfig.date)) {
angular.extend(options, uiConfig.date);
}
return {
require:'?ngModel',
link:function (scope, element, attrs, controller) {
var getOptions = function () {
return angular.extend({}, uiConfig.date, scope.$eval(attrs.uiDate));
};
var initDateWidget = function () {
var opts = getOptions();
// If we have a controller (i.e. ngModelController) then wire it up
if (controller) {
var updateModel = function () {
scope.$apply(function () {
var date = element.datepicker("getDate");
element.datepicker("setDate", element.val());
controller.$setViewValue(date);
element.blur();
});
};
if (opts.onSelect) {
// Caller has specified onSelect, so call this as well as updating the model
var userHandler = opts.onSelect;
opts.onSelect = function (value, picker) {
updateModel();
scope.$apply(function() {
userHandler(value, picker);
});
};
} else {
// No onSelect already specified so just update the model
opts.onSelect = updateModel;
}
// In case the user changes the text directly in the input box
element.bind('change', updateModel);
// Update the date picker when the model changes
controller.$render = function () {
var date = controller.$viewValue;
if ( angular.isDefined(date) && date !== null && !angular.isDate(date) ) {
throw new Error('ng-Model value must be a Date object - currently it is a ' + typeof date + ' - use ui-date-format to convert it from a string');
}
element.datepicker("setDate", date);
};
}
// If we don't destroy the old one it doesn't update properly when the config changes
element.datepicker('destroy');
// Create the new datepicker widget
element.datepicker(opts);
if ( controller ) {
// Force a render to override whatever is in the input text box
controller.$render();
}
};
// Watch for changes to the directives options
scope.$watch(getOptions, initDateWidget, true);
}
};
}
])
.directive('uiDateFormat', ['ui.config', function(uiConfig) {
var directive = {
require:'ngModel',
link: function(scope, element, attrs, modelCtrl) {
var dateFormat = attrs.uiDateFormat || uiConfig.dateFormat;
if ( dateFormat ) {
// Use the datepicker with the attribute value as the dateFormat string to convert to and from a string
modelCtrl.$formatters.push(function(value) {
if (angular.isString(value) ) {
return $.datepicker.parseDate(dateFormat, value);
}
});
modelCtrl.$parsers.push(function(value){
if (value) {
return $.datepicker.formatDate(dateFormat, value);
}
});
} else {
// Default to ISO formatting
modelCtrl.$formatters.push(function(value) {
if (angular.isString(value) ) {
return new Date(value);
}
});
modelCtrl.$parsers.push(function(value){
if (value) {
return value.toISOString();
}
});
}
}
};
return directive;
}]);