UTC Date format not recognized

[web265p3]

Bug

I am trying to bind a property with the value "2008-10-28T00:00:00+01:00" to my material datepicker. I configured it like that:

                    <md-input-container>
                        <input mdInput 
                                [mdDatepicker]="picker2"                              
                                [formControl] = "myForm.get('MyDate')" 
                                placeholder="My date" 
                                [(ngModel)]="myDate">
                        <md-datepicker-toggle mdSuffix [for]="picker2"></md-datepicker-toggle>
                        <md-datepicker #picker2></md-datepicker>  
                    </md-input-container> 

So "myDate" has a UTC Timestamp value. I am receiving the error message:

Datepicker: value not recognized as a date object by DateAdapter

I tried to fix this, with configuring my own Date adapter:

        export class AppDateAdapter extends NativeDateAdapter { 
                format(date: Date, displayFormat: Object): string {
                    console.log(date);
                    if (displayFormat === 'input') {
                        const day = date.getDate();
                        const month = date.getMonth() + 1;
                        const year = date.getFullYear();
                        return `${day}-${month}-${year}`;
                    } else {
                        return date.toDateString();
                    }
                }
            }
         export const APP_DATE_FORMATS =
         {
             parse: {
                 dateInput: { month: 'short', year: 'numeric', day: 'numeric' },
             },
             display: {
                 dateInput: 'input',
                 monthYearLabel: { year: 'numeric', month: 'numeric' },
                 dateA11yLabel: { year: 'numeric', month: 'long', day: 'numeric' },
                 monthYearA11yLabel: { year: 'numeric', month: 'long' },
             }
         };


@Component({
    selector: "",
    templateUrl: "my-form.component.html",
    styles: [":host /deep/ .ui-dropdown{ width: 100% !important;}"],
    providers: [{provide: DateAdapter, useClass: AppDateAdapter}, 
                {provide: MD_DATE_FORMATS, useValue : APP_DATE_FORMATS }]

})

In my "format"-function I tried to output the value the adapter receives, but the error is thrown even before. Anybody knows what I could do? Is there even a way for UTC Timestamp? I do not need the time. It should be ignored by the picker.

What is the expected behavior?

Support for UTC Datetime

What are the steps to reproduce?

Trying to bind the value "2008-10-28T00:00:00+01:00" to the datepicker.

[julianobrasil]

Can you provide a plunk?

[nicholasjativa]

Did this start happening after updating to 2.0.0-beta.10? I'm getting the same issue. I'm using setValue to set the Date for the datepicker, and its in the form of "2017-08-14T04:00:00.000" (which is the same format that the datepicker is saving as).

[nicholasjativa]

Looks like the error is triggered here

which calls this

shouldn't the isDateInstance do something along the lines of checking if the obj is a string, and if it is, create a new Date() object with it? I.e., an example being, using Firebase to grab a saved date and setting the date on an input with setValue()?

[nicholasjativa]

Scratch that, looks like they don't support setting strings anymore; they strictly have to be either Date objects or null.

[julianobrasil]

Yeah... it's in the change log (beta.10).

[koiszzz]

I have met the same problem . Background server send 2017-09-19 16:00:00.000Z to browser, the data model seem cannot change the string to Data type, so I change the string by using MODEL.date = new Date(the string)

[web265p3]

@koiszzz : That fixed it for me! Awesome. Thanks.

[AKlaus]

I guess, it's related to #6265 and this pull request

[angular-automatic-lock-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.}