Skip to content

Commit b09787e

Browse files
benleshbenlesh
committed
feat(input): add support for datetime-local
partially closes angular#757
1 parent 0a77f06 commit b09787e

File tree

2 files changed

+258
-10
lines changed

2 files changed

+258
-10
lines changed

‎src/ng/directive/input.js

+141-10
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ var URL_REGEXP = /^(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\
1212
var EMAIL_REGEXP = /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,6}$/;
1313
var NUMBER_REGEXP = /^\s*(\-|\+)?(\d+|(\d*(\.\d*)))\s*$/;
1414
var DATE_REGEXP = /^(\d{4})-(\d{2})-(\d{2})$/;
15+
var DATETIMELOCAL_REGEXP = /^(\d{4})-(\d\d)-(\d\d)T(\d\d):(\d\d)$/;
1516

1617
var inputType = {
1718

@@ -156,6 +157,72 @@ var inputType = {
156157
*/
157158
'date': dateInputType,
158159

160+
/**
161+
* @ngdoc inputType
162+
* @name ng.directive:input.dateTimeLocal
163+
*
164+
* @description
165+
* HTML5 or text input with datetime validation and transformation. In browsers that do not yet support
166+
* the HTML5 date input, a text element will be used. The text must be entered in a valid ISO-8601
167+
* local datetime format (yyyy-MM-ddTHH:mm), for example: `2010-12-28T14:57`. Will also accept a valid ISO
168+
* datetime string or Date object as model input, but will always output a Date object to the model.
169+
*
170+
* @param {string} ngModel Assignable angular expression to data-bind to.
171+
* @param {string=} name Property name of the form under which the control is published.
172+
* @param {string=} min Sets the `min` validation error key if the value entered is less than `min`.
173+
* @param {string=} max Sets the `max` validation error key if the value entered is greater than `max`.
174+
* @param {string=} required Sets `required` validation error key if the value is not entered.
175+
* @param {string=} ngRequired Adds `required` attribute and `required` validation constraint to
176+
* the element when the ngRequired expression evaluates to true. Use `ngRequired` instead of
177+
* `required` when you want to data-bind to the `required` attribute.
178+
* @param {string=} ngChange Angular expression to be executed when input changes due to user
179+
* interaction with the input element.
180+
*
181+
* @example
182+
<doc:example>
183+
<doc:source>
184+
<script>
185+
function Ctrl($scope) {
186+
$scope.value = '2010-12-28T14:57';
187+
}
188+
</script>
189+
<form name="myForm" ng-controller="Ctrl as dateCtrl">
190+
Pick a date in 2013:
191+
<input type="datetime-local" name="input" ng-model="value"
192+
placeholder="yyyy-MM-ddTHH:mm" min="2013-01-01T00:00" max="2013-12-31T00:00" required />
193+
<span class="error" ng-show="myForm.input.$error.required">
194+
Required!</span>
195+
<span class="error" ng-show="myForm.input.$error.datetimelocal">
196+
Not a valid date!</span>
197+
<tt>value = {{value}}</tt><br/>
198+
<tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
199+
<tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
200+
<tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
201+
<tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/>
202+
</form>
203+
</doc:source>
204+
<doc:scenario>
205+
it('should initialize to model', function() {
206+
expect(binding('value')).toEqual('2010-12-28T14:57');
207+
expect(binding('myForm.input.$valid')).toEqual('true');
208+
});
209+
210+
it('should be invalid if empty', function() {
211+
input('value').enter('');
212+
expect(binding('value')).toEqual('');
213+
expect(binding('myForm.input.$valid')).toEqual('false');
214+
});
215+
216+
it('should be invalid if over max', function() {
217+
input('value').enter('2015-01-01T23:59');
218+
expect(binding('value')).toEqual('');
219+
expect(binding('myForm.input.$valid')).toEqual('false');
220+
});
221+
</doc:scenario>
222+
</doc:example>
223+
*/
224+
'datetime-local': dateTimeLocalInputType,
225+
159226
/**
160227
* @ngdoc inputType
161228
* @name ng.directive:input.number
@@ -596,7 +663,77 @@ function textInputType(scope, element, attr, ctrl, $sniffer, $browser) {
596663
}
597664
}
598665

599-
function dateInputType(scope, element, attr, ctrl, $sniffer, $browser) {
666+
function dateTimeLocalInputType(scope, element, attr, ctrl, $sniffer, $browser, $filter) {
667+
textInputType(scope, element, attr, ctrl, $sniffer, $browser);
668+
669+
ctrl.$parsers.push(function(value) {
670+
if(ctrl.$isEmpty(value)) {
671+
ctrl.$setValidity('datetimelocal', true);
672+
return value;
673+
}
674+
675+
if(DATETIMELOCAL_REGEXP.test(value)) {
676+
ctrl.$setValidity('datetimelocal', true);
677+
return new Date(getTime(value));
678+
}
679+
680+
ctrl.$setValidity('datetimelocal', false);
681+
return undefined;
682+
});
683+
684+
ctrl.$formatters.push(function(value) {
685+
if(isDate(value)) {
686+
return $filter('date')(value, 'yyyy-MM-ddTHH:mm');
687+
}
688+
return ctrl.$isEmpty(value) ? '' : '' + value;
689+
});
690+
691+
if(attr.min) {
692+
var minValidator = function(value) {
693+
var valid = ctrl.$isEmpty(value) ||
694+
(getTime(value) >= getTime(attr.min));
695+
ctrl.$setValidity('min', valid);
696+
return valid ? value : undefined;
697+
};
698+
699+
ctrl.$parsers.push(minValidator);
700+
ctrl.$formatters.push(minValidator);
701+
}
702+
703+
if(attr.max) {
704+
var maxValidator = function(value) {
705+
var valid = ctrl.$isEmpty(value) ||
706+
(getTime(value) <= getTime(attr.max));
707+
ctrl.$setValidity('max', valid);
708+
return valid ? value : undefined;
709+
};
710+
711+
ctrl.$parsers.push(maxValidator);
712+
ctrl.$formatters.push(maxValidator);
713+
}
714+
715+
function getTime(iso) {
716+
if(isDate(iso)) {
717+
return +iso;
718+
}
719+
720+
if(isString(iso)) {
721+
DATETIMELOCAL_REGEXP.lastIndex = 0;
722+
var parts = DATETIMELOCAL_REGEXP.exec(iso),
723+
yyyy = +parts[1],
724+
MM = +parts[2] - 1,
725+
dd = +parts[3],
726+
HH = +parts[4],
727+
mm = +parts[5];
728+
729+
return +new Date(yyyy, MM, dd, HH, mm);
730+
}
731+
732+
return NaN;
733+
}
734+
}
735+
736+
function dateInputType(scope, element, attr, ctrl, $sniffer, $browser, $filter) {
600737
textInputType(scope, element, attr, ctrl, $sniffer, $browser);
601738

602739
ctrl.$parsers.push(function(value) {
@@ -616,13 +753,7 @@ function dateInputType(scope, element, attr, ctrl, $sniffer, $browser) {
616753

617754
ctrl.$formatters.push(function(value) {
618755
if(isDate(value)) {
619-
var year = value.getFullYear(),
620-
month = value.getMonth() + 1,
621-
day = value.getDate();
622-
623-
month = (month < 10 ? '0' : '') + month;
624-
day = (day < 10 ? '0' : '') + day;
625-
return year + '-' + month + '-' + day;
756+
return $filter('date')(value, 'yyyy-MM-dd');
626757
}
627758
return ctrl.$isEmpty(value) ? '' : '' + value;
628759
});
@@ -912,14 +1043,14 @@ function checkboxInputType(scope, element, attr, ctrl) {
9121043
</doc:scenario>
9131044
</doc:example>
9141045
*/
915-
var inputDirective = ['$browser', '$sniffer', function($browser, $sniffer) {
1046+
var inputDirective = ['$browser', '$sniffer', '$filter', function($browser, $sniffer, $filter) {
9161047
return {
9171048
restrict: 'E',
9181049
require: '?ngModel',
9191050
link: function(scope, element, attr, ctrl) {
9201051
if (ctrl) {
9211052
(inputType[lowercase(attr.type)] || inputType.text)(scope, element, attr, ctrl, $sniffer,
922-
$browser);
1053+
$browser, $filter);
9231054
}
9241055
}
9251056
};

‎test/ng/directive/inputSpec.js

+117
Original file line numberDiff line numberDiff line change
@@ -752,6 +752,123 @@ describe('input', function() {
752752

753753
// INPUT TYPES
754754

755+
756+
describe('datetime-local', function () {
757+
it('should set the view if the model is valid ISO8601 local datetime', function() {
758+
compileInput('<input type="datetime-local" ng-model="lunchtime"/>');
759+
760+
scope.$apply(function(){
761+
scope.lunchtime = '2013-12-16T11:30:15';
762+
});
763+
764+
expect(inputElm.val()).toBe('2013-12-16T11:30:15');
765+
});
766+
767+
it('should set the view if the model if a valid Date object.', function(){
768+
compileInput('<input type="datetime-local" ng-model="tenSecondsToNextYear"/>');
769+
770+
scope.$apply(function (){
771+
scope.tenSecondsToNextYear = new Date(2013, 11, 31, 23, 59, 50);
772+
});
773+
774+
expect(inputElm.val()).toBe('2013-12-31T23:59:50');
775+
});
776+
777+
it('should set the model undefined if the view is invalid', function (){
778+
compileInput('<input type="datetime-local" ng-model="breakMe"/>');
779+
780+
scope.$apply(function (){
781+
scope.breakMe = new Date(2009, 0, 6, 16, 25, 10);
782+
});
783+
784+
expect(inputElm.val()).toBe('2009-01-06T16:25:10');
785+
786+
try {
787+
//set to text for browsers with datetime-local validation.
788+
inputElm[0].setAttribute('type', 'text');
789+
} catch(e) {
790+
//for IE8
791+
}
792+
793+
changeInputValueTo('stuff');
794+
expect(inputElm.val()).toBe('stuff');
795+
expect(scope.breakMe).toBeUndefined();
796+
expect(inputElm).toBeInvalid();
797+
});
798+
799+
describe('min', function (){
800+
beforeEach(function (){
801+
compileInput('<input type="datetime-local" ng-model="value" name="alias" min="2000-01-01T12:30:10" />');
802+
scope.$digest();
803+
});
804+
805+
it('should invalidate', function (){
806+
changeInputValueTo('1999-12-31T01:02:03');
807+
expect(inputElm).toBeInvalid();
808+
expect(scope.value).toBeFalsy();
809+
expect(scope.form.alias.$error.min).toBeTruthy();
810+
});
811+
812+
it('should validate', function (){
813+
changeInputValueTo('2000-01-01T23:02:01');
814+
expect(inputElm).toBeValid();
815+
expect(+scope.value).toBe(+new Date(2000, 0, 1, 23, 2, 1));
816+
expect(scope.form.alias.$error.min).toBeFalsy();
817+
});
818+
});
819+
820+
describe('max', function (){
821+
beforeEach(function (){
822+
compileInput('<input type="datetime-local" ng-model="value" name="alias" max="2019-01-01T01:02:03" />');
823+
scope.$digest();
824+
});
825+
826+
it('should invalidate', function (){
827+
changeInputValueTo('2019-12-31T01:02:03');
828+
expect(inputElm).toBeInvalid();
829+
expect(scope.value).toBeFalsy();
830+
expect(scope.form.alias.$error.max).toBeTruthy();
831+
});
832+
833+
it('should validate', function() {
834+
changeInputValueTo('2000-01-01T01:02:03');
835+
expect(inputElm).toBeValid();
836+
expect(+scope.value).toBe(+new Date(2000, 0, 1, 1, 2, 3));
837+
expect(scope.form.alias.$error.max).toBeFalsy();
838+
});
839+
});
840+
841+
it('should validate even if max value changes on-the-fly', function(done) {
842+
scope.max = '2013-01-01T01:02:03';
843+
compileInput('<input type="datetime-local" ng-model="value" name="alias" max="{{max}}" />');
844+
scope.$digest();
845+
846+
changeInputValueTo('2014-01-01T12:34:56');
847+
expect(inputElm).toBeInvalid();
848+
849+
scope.max = '2001-01-01T01:02:03';
850+
scope.$digest(function () {
851+
expect(inputElm).toBeValid();
852+
done();
853+
});
854+
});
855+
856+
it('should validate even if min value changes on-the-fly', function(done) {
857+
scope.min = '2013-01-01T01:02:03';
858+
compileInput('<input type="datetime-local" ng-model="value" name="alias" min="{{min}}" />');
859+
scope.$digest();
860+
861+
changeInputValueTo('2010-01-01T12:34:56');
862+
expect(inputElm).toBeInvalid();
863+
864+
scope.min = '2014-01-01T01:02:03';
865+
scope.$digest(function () {
866+
expect(inputElm).toBeValid();
867+
done();
868+
});
869+
});
870+
});
871+
755872
describe('date', function () {
756873
it('should set the view if the model is valid ISO8601 date', function() {
757874
compileInput('<input type="date" ng-model="birthday"/>');

0 commit comments

Comments
 (0)