angular input type datetime-local validation

Question

In my angular application for date time selection I am using input type="datetime-local".

 <input id="field_bookingTime" type="datetime-local" class="form-control" name="bookingTime" [(ngModel)]="bookingTime"
   required/>

Now I need to disable the dates that are previous to current date and the dates that are 3 days next to current date. For example for min, I have added validations as shown below. But the validations are not working, still the previous dates are getting enabled in the displayed calendar.

currentDate = new Date();

     <input [min]="currentDate" id="field_bookingTime" type="datetime-local" class="form-control" name="bookingTime" [(ngModel)]="bookingTime"
       required/>

Is the input to be used in any Angular forms?

Stol
– Stol

2019-01-08 12:12:04 +00:00
Commented Jan 8, 2019 at 12:12 — Stol
– Stol, Commented Jan 8, 2019 at 12:12
Yes, I am using angular template driven forms

Madasu K
– Madasu K

2019-01-08 12:18:16 +00:00
Commented Jan 8, 2019 at 12:18 — Madasu K
– Madasu K, Commented Jan 8, 2019 at 12:18

Stol · Accepted Answer · 2019-01-08 12:37:47Z

2

I would recommend writing a custom validator for the form control. Min and max have bad browser support, this goes for datetime-local aswell though.

    function dateValidator(c: FormControl) {
        // Not sure if c will come in as a date or if we have to convert is somehow
        const today = new Date();
        if(c.value > today) {
            return null;
        } else {
            return {dateValidator: {valid: false}};
        }
    }
    ...
    myForm = this.formBuilder.group({
        date: ['', dateValidator]
    })
    ...

answered Jan 8, 2019 at 12:37

Stol

1791 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Stol Over a year ago

Or use the Angular Material teams datepicker alternatively

abd995 · Accepted Answer · 2019-01-08 13:03:36Z

2

<input> elements of type datetime-local accepts values for min and max as string in yyyy-MM-ddThh:mm format only. Since new Date() returns a string which is not in the correct format min and max won't work. Just convert the date to the correct format like this.

currentDate = new Date().toISOString().substring(0, 16);

Here we are converting the date to the desired format first by converting it to a simplified extended ISO format (ISO 8601), which is always 24 or 27 characters long and then removing the chars after yyyy-MM-ddThh:mm

answered Jan 8, 2019 at 13:03

abd995

1,86910 silver badges14 bronze badges

1 Comment

bsheps Over a year ago

Clever. This doesn't appear to work for showing the locale time tho. Only GMT?

Srdjan · Accepted Answer · 2019-01-08 12:25:49Z

0

Try to format your date with dashes:

Example:

pipe = new DatePipe('en-US');

minDate = new Date();
minDateOut = pipe.transform(minDate, 'yyyy-MM-dd');

maxDate = new Date(minDate.getTime() + (1000 * 60 * 60 * 24 * 3));
maxDateOut = pipe.transform(maxDate, 'yyyy-MM-dd');


<input 
    [min]="minDateOut" 
    [max]="maxDateOut" 
    id="field_bookingTime" 
    type="datetime-local" 
    class="form-control" 
    name="bookingTime" 
    [(ngModel)]="bookingTime"
    required/>

Or just use any other date format without spaces...

answered Jan 8, 2019 at 12:25

Srdjan

5823 silver badges6 bronze badges

2 Comments

Madasu K Over a year ago

I have internationalization support for my project,so by predefining 'en-US', may effect other regions

Srdjan Over a year ago

You can get locale like this: let locale = Intl.DateTimeFormat().resolvedOptions().locale; Or Just use another method to format date string, you don't have to use DatePipe...

Collectives™ on Stack Overflow

angular input type datetime-local validation

3 Answers 3

1 Comment

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related