Components: Datepicker not validating to a valid date

[neekers]

Bug, feature request, or proposal:

When entering in any other valid besides a date doesn't produce an error

What is the expected behavior?

Should get a date format error triggered or the valid property of the control should be false

What is the current behavior?

Input field accepts anything. Number, string, date. No error is produced and the value of the control is null. Hard to distinguish between bad entry and no entry.

What are the steps to reproduce?

http://plnkr.co/edit/iOMoGgZdk4ljJNz8vpSM?p=preview

• Create a date picker with no min date requirements.
• Enter in a plain number "5000"
• Blur field
• No error is shown

What is the use-case or motivation for changing an existing behavior?

A date field should validate for a real date

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular 4.0.0
Angular Material Design 2.0.0-beta.6
All browsers and OS.

Is there anything else we should know?

Looks like the input is reading the numbers as the year. lol.

[mmalerba]

The NativeDateAdapter just attempts to parse whatever you input into a Date, If you want different parsing behavior you can create a custom DateAdapter (see docs). As for the issue of considering input that fails to parse as null this is in line with what type=number inputs do when given a value such as 'e' that fails to parse to a number. If you're writing your own DateAdapter you can return whatever you want when it fails to parse, so you could just return some sentinel object representing "invalid date".

@kara do you have any opinions on what NativeDateAdapter should return when parsing fails? (e.g. null vs some "invalid date" sentinel). I can see how it would be useful, but is it better to be consistent with what native inputs do?

[playground0076]

I ran into the same scenario. It is even letting me type letters. this feature would be really useful. thanks. Just wondering to know if there is a functionality where I can prevent the users from typing into the input field and forcibly make them select something from the calendar control

can i be also provided any quick example on how I can create a custom dateadapter and plug that in. thanks.

[mmalerba]

@angular2fan you can accomplish this by making the input readonly and setting up the click handler on the md-input-container to open the popup: http://plnkr.co/edit/KFIay3gQcMylwmJbFNpM?p=preview

[draiche]

@angular2fan Another option if you still want the users to be able to type, but to not allow them to type letters, is something like this in your date picker component:

(keypress)="keyDown($event)"



keyDown(event) {
       const allowedRegex = /[0-9\/]/g;

        if (!event.key.match(allowedRegex)) {
            event.preventDefault();
        }
    }

I'm not claiming it's the most elegant solution on the planet, but it gets the job done for my purposes until more built-in solutions are added. Note that this will also block the backspace and delete keys in Firefox; you can compare event.key to 'Backspace' or 'Delete', or just add them to the regex.

[mmalerba]

talked with @kara and it sounds like we want to count bad input as a validation error, not just null, I'll create a PR for that

[jbojcic1]

@mmalerba how can we validate the date now? I don't see anything in the docs. I tried by copying your code from demo and using:

<input matInput
            #startDate="ngModel"
            [matDatepicker]="startDatepicker"
            name="startDate"
            placeholder="Start Date"
            [(ngModel)]="object.startDate">
        <mat-datepicker-toggle matSuffix [for]="startDatepicker"></mat-datepicker-toggle>
        <mat-datepicker #startDatepicker></mat-datepicker>
        <mat-error *ngIf="startDate.hasError('matDatepickerParse')">Start date is not a valid date.</mat-error>
      </mat-form-field>

but it's buggy when you start typing in all different things. Am I doing something wrong?

[sharathgg5]

problem throwing "mdDatepickerParse" error

steps to reproduce the bug:

1. input a valid date value and blur.
2. focus again, remove the date value from input field and blur( focusout from the input).
3. now focus again on the input field(where it is null now) and type "asdfsdf" or "!E!@#!@#", it doen't throw error where it should throw.

note: with focused and valid date value, try input invalid value throws "mdDatepickerParse" error.

there is one more issue after throwing "mdDatepickerParse"

field will be marked "invalid" for null value even though field is not marked as "required"

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}