coachcare / npm-datepicker

Material Datepicker Fork with TimePicker by CoachCare
MIT License
32 stars 18 forks source link

Timepicker Example / Parsing 'HH:mm:ss' #15

Open f-aubert opened 6 years ago

f-aubert commented 6 years ago

Hello, I'm allowing me again a question / demand, for I was unable so far to bind the very nice looking timepicker to a reactive form where the time property is simply a string in format HH:mm:ss. I'm using moment as an adapter.

Here is my component html,

<mat-form-field>
<input id="timeFrom" name="timeFrom" formControlName="timeFrom" matInput [matDatepicker]="startTimePicker">
<mat-datepicker-toggle matSuffix [for]="startTimePicker"></mat-datepicker-toggle>
<mat-datepicker type="time" [twelveHour]="false" #startTimePicker></mat-datepicker>
</mat-form-field>

I configured the parsing so, or at least I think it does what I need, after our previous very interesting discussion,

export const MY_FORMATS: MatDateFormats = {
    parse: {
        datetime: ['DD.MM.YYYY HH:mm:ss', 'DD.MM.YYYY HH:mm'],
        date: 'DD.MM.YYYY',
        time: ['HH:mm:ss', 'HH:mm']
    },
    display: {
        datetime: 'DD.MM.YYYY HH:mm',
        date: 'DD.MM.YYYY',
        time: 'HH:mm',
        monthDayLabel: 'MMMM D',
        monthDayA11yLabel: 'MMMM D',
        monthYearLabel: 'MMMM YYYY',
        monthYearA11yLabel: 'MMMM YYYY',
        dateA11yLabel: 'LLLL',
        timeLabel: 'HH:mm'
    },
};

And in my component typescript, timeFrom contains the value '09:00:00'. But moment display a warning, as it apparently don't make use of my parsing formats, and nothing is displayed in the input field nor is selected when I open the clock view. I would somehow expect it to convert on the fly to today 09:00:00 and never display day infos. moment.js:293 Deprecation warning: value provided is not in a recognized RFC2822 or ISO format. moment construction falls back to js Date(), which is not reliable across all browsers and versions. Non RFC2822/ISO date formats are discouraged and will be removed in an upcoming major release. Please refer to http://momentjs.com/guides/#/warnings/js-date/ for more info. Arguments: [0] _isAMomentObject: true, _isUTC: false, _useUTC: false, _l: undefined, _i: 09:00:00, _f: undefined, _strict: undefined, _locale: [object Object]

Thxs again for making our apps easier to develop.