forked from Textalk/angular-schema-form-datepicker
-
Notifications
You must be signed in to change notification settings - Fork 2
/
bootstrap-datepicker.js
151 lines (131 loc) · 5.88 KB
/
bootstrap-datepicker.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
angular.module("schemaForm").run(["$templateCache", function($templateCache) {$templateCache.put("directives/decorators/bootstrap/datepicker/datepicker.html","<div class=\"form-group {{form.htmlClass}}\" ng-class=\"{\'has-error\': hasError()}\">\n <label class=\"control-label\" ng-show=\"showTitle()\">{{form.title}}</label>\n <div ng-class=\"{\'input-group\': (form.fieldAddonLeft || form.fieldAddonRight)}\">\n <span ng-if=\"form.fieldAddonLeft\"\n class=\"input-group-addon\"\n ng-bind-html=\"form.fieldAddonLeft\"></span>\n <input ng-show=\"form.key\"\n style=\"background-color: white\"\n type=\"text\"\n class=\"form-control {{form.fieldHtmlClass}}\"\n schema-validate=\"form\"\n ng-model=\"$$value$$\"\n ng-disabled=\"form.readonly\"\n pick-a-date=\"form.pickadate\"\n min-date=\"form.minDate\"\n max-date=\"form.maxDate\"\n name=\"{{form.key.slice(-1)[0]}}\"\n format=\"form.format\" />\n <span ng-if=\"form.fieldAddonRight\"\n class=\"input-group-addon\"\n ng-bind-html=\"form.fieldAddonRight\"></span>\n </div>\n <span class=\"help-block\">{{ (hasError() && errorMessage(schemaError())) || form.description}}</span>\n</div>\n");}]);
angular.module('schemaForm').directive('pickADate', function () {
//String dates for min and max is not supported
//https://github.com/amsul/pickadate.js/issues/439
//So strings we create dates from
var formatDate = function(value) {
//Strings or timestamps we make a date of
if (angular.isString(value) || angular.isNumber(value)) {
return new Date(value);
}
return value; //We hope it's a date object
};
return {
restrict: 'A',
require: 'ngModel',
scope: {
ngModel: '=',
pickADate: '=',
minDate: '=',
maxDate: '=',
format: '='
},
link: function (scope, element, attrs, ngModel) {
//Bail out gracefully if pickadate is not loaded.
if (!element.pickadate) {
return;
}
//By setting formatSubmit to null we inhibit the
//hidden field that pickadate likes to create.
//We use ngModel formatters instead to format the value.
var opts = {
onClose: function () {
element.blur();
},
formatSubmit: null
};
if (scope.pickADate) {
angular.extend(opts, scope.pickADate);
}
element.pickadate(opts);
//Defaultformat is for json schema date-time is ISO8601
//i.e. "yyyy-mm-dd"
var defaultFormat = 'yyyy-mm-dd';
//View format on the other hand we get from the pickadate translation file
var viewFormat = $.fn.pickadate.defaults.format;
var picker = element.pickadate('picker');
//The view value
ngModel.$formatters.push(function(value) {
if (angular.isUndefined(value) || value === null) {
return value;
}
//We set 'view' and 'highlight' instead of 'select'
//since the latter also changes the input, which we do not want.
picker.set('view', value, {format: scope.format || defaultFormat});
picker.set('highlight', value, {format: scope.format || defaultFormat});
//piggy back on highlight to and let pickadate do the transformation.
return picker.get('highlight', viewFormat);
});
ngModel.$parsers.push(function() {
return picker.get('select', scope.format || defaultFormat);
});
//bind once.
if (angular.isDefined(attrs.minDate)) {
var onceMin = scope.$watch('minDate', function (value) {
if (value) {
picker.set('min', formatDate(value));
onceMin();
}
}, true);
}
if (angular.isDefined(attrs.maxDate)) {
var onceMax = scope.$watch('maxDate', function (value) {
if (value) {
picker.set('max', formatDate(value));
onceMax();
}
}, true);
}
}
};
});
angular.module('schemaForm').config(
['schemaFormProvider', 'schemaFormDecoratorsProvider', 'sfPathProvider',
function(schemaFormProvider, schemaFormDecoratorsProvider, sfPathProvider) {
var datepicker = function(name, schema, options) {
if (schema.type === 'string' && (schema.format === 'date' || schema.format === 'date-time')) {
var f = schemaFormProvider.stdFormObj(name, schema, options);
f.key = options.path;
f.type = 'datepicker';
options.lookup[sfPathProvider.stringify(options.path)] = f;
return f;
}
};
schemaFormProvider.defaults.string.unshift(datepicker);
//Add to the bootstrap directive
schemaFormDecoratorsProvider.addMapping(
'bootstrapDecorator',
'datepicker',
'directives/decorators/bootstrap/datepicker/datepicker.html'
);
schemaFormDecoratorsProvider.createDirective(
'datepicker',
'directives/decorators/bootstrap/datepicker/datepicker.html'
);
}
]);
angular.module('schemaForm').config(
['schemaFormProvider', 'schemaFormDecoratorsProvider', 'sfPathProvider',
function(schemaFormProvider, schemaFormDecoratorsProvider, sfPathProvider) {
var timepicker = function(name, schema, options) {
if (schema.type === 'string' && (schema.format === 'time')) {
var f = schemaFormProvider.stdFormObj(name, schema, options);
f.key = options.path;
f.type = 'timepicker';
options.lookup[sfPathProvider.stringify(options.path)] = f;
return f;
}
};
schemaFormProvider.defaults.string.unshift(timepicker);
//Add to the bootstrap directive
schemaFormDecoratorsProvider.addMapping(
'bootstrapDecorator',
'timepicker',
'directives/decorators/bootstrap/datepicker/timepicker.html'
);
schemaFormDecoratorsProvider.createDirective(
'timepicker',
'directives/decorators/bootstrap/datepicker/timepicker.html'
);
}
]);