Skip to content

Commit 7f1f216

Browse files
benleshbenlesh
committed
feat(input) add support for datetime-local
partially closes angular#757
1 parent 0ba0dc1 commit 7f1f216

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):(\d\d)$/;
1516

1617
var inputType = {
1718

@@ -156,6 +157,71 @@ 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:ss), for example: `2010-12-28T14:57:12`. 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:12';
187+
}
188+
</script>
189+
<form name="myForm" ng-controller="Ctrl as dateCtrl">
190+
Pick a date between in 2013:
191+
<input type="date" name="input" ng-model="value"
192+
placeholder="yyyy-MM-dd" min="2013-01-01T00:00:00" max="2013-12-31T00:00: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:12');
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: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,
159225
/**
160226
* @ngdoc inputType
161227
* @name ng.directive:input.number
@@ -605,7 +671,78 @@ function textInputType(scope, element, attr, ctrl, $sniffer, $browser) {
605671
}
606672
}
607673

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

611748
ctrl.$parsers.push(function(value) {
@@ -625,13 +762,7 @@ function dateInputType(scope, element, attr, ctrl, $sniffer, $browser) {
625762

626763
ctrl.$formatters.push(function(value) {
627764
if(isDate(value)) {
628-
var year = value.getFullYear(),
629-
month = value.getMonth() + 1,
630-
day = value.getDate();
631-
632-
month = (month < 10 ? '0' : '') + month;
633-
day = (day < 10 ? '0' : '') + day;
634-
return year + '-' + month + '-' + day;
765+
return $filter('date')(value, 'yyyy-MM-dd');
635766
}
636767
return ctrl.$isEmpty(value) ? '' : '' + value;
637768
});
@@ -952,14 +1083,14 @@ function checkboxInputType(scope, element, attr, ctrl) {
9521083
</doc:scenario>
9531084
</doc:example>
9541085
*/
955-
var inputDirective = ['$browser', '$sniffer', function($browser, $sniffer) {
1086+
var inputDirective = ['$browser', '$sniffer', '$filter', function($browser, $sniffer, $filter) {
9561087
return {
9571088
restrict: 'E',
9581089
require: '?ngModel',
9591090
link: function(scope, element, attr, ctrl) {
9601091
if (ctrl) {
9611092
(inputType[lowercase(attr.type)] || inputType.text)(scope, element, attr, ctrl, $sniffer,
962-
$browser);
1093+
$browser, $filter);
9631094
}
9641095
}
9651096
};

‎test/ng/directive/inputSpec.js

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

736736
// INPUT TYPES
737737

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

0 commit comments

Comments
 (0)