Wednesday, October 11, 2017

Allowing empty values in HTML5 date input

If I use an HTML5 date input and that field represents a date that maps to a nullable datetime column in the database, how do I get around setting an empty value in the input field?

My application is using AngularJS and my ng-model is mapping to a scope variable with an initial value of null (or an empty string). Here’s what the browser’s console says:

Error: [ngModel:datefmt] http://errors.angularjs.org/1.6.6/ngModel/datefmt?p0=2017-09-14T00%3A00%3A00
    at angular.js:88
    at Array.<anonymous> (angular.js:25308)
    at angular.js:29301
    at m.$digest (angular.js:18253)
    at m.$apply (angular.js:18531)
    at l (angular.js:12547)
    at s (angular.js:12785)
    at XMLHttpRequest.y.onload (angular.js:12702) undefined

The documentation says the value assigned to a date input field must be a Date object. The value I’m trying to pass is not a date because the field doesn’t always have a value. I suppose I could provide a default value, such as today’s date but I am concerned that users may allow that value to be submitted when that particular field doesn’t require a value (e.g. a cancel date for something that isn’t canceled yet).

It also seems that depending on which browser you are using you can clear a date the user had previously entered by clicking an “X” button the browser inserts in the field. I tried adding a button to set the value of the field to an empty string but I get the same error.

What I’ve done in the past as a workaround is to instead use a text input field and use a regular expression to validate the input, but that seems like it shouldn’t be necessary and that the date input field should allow empty entries.

Source: AngularJS



from Angular Questions https://angularquestions.com/2017/10/11/allowing-empty-values-in-html5-date-input/
via @lzomedia #developer #freelance #web #lzomedia.com

No comments:

Post a Comment