Skip to content
This repository has been archived by the owner on Jun 24, 2021. It is now read-only.

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

Open
f-aubert opened this issue Jul 6, 2018 · 0 comments
Open

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

f-aubert opened this issue Jul 6, 2018 · 0 comments

Comments

@f-aubert
Copy link

f-aubert commented Jul 6, 2018

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.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Development

No branches or pull requests

2 participants