Enhancement: Time Picker

[johncharris]

I'm excited there is a date picker now! Would it be possible to also get the time options bound to the underlying control?

[djinnet]

At the moment, you cannot use options to the underlying control of the date picker.

It seems the Datepick are using flatpickr as calendar logic and I have been looking into it. Flatpickr does have an option to change date picker to time picker by using two boolean values and a date format. See here for what I am talking about: link

so in theory, it should be easy to implement Flatpickr options. The Flatpickr options

it would be nice if date picker could look something like this:

            @*Enable time on an normal AM/PM calendar*@
            <MatDatePicker EnableTime="true"></MatDatePicker>

            @*Enable time on an calendar with 24 hours option*@
            <MatDatePicker EnableTime="true" Enable24Hr="true"></MatDatePicker>

            @*Enable time picker with AM/PM*@
            <MatDatePicker NoCalendar="true" EnableTime="true"></MatDatePicker>

and the date picker code is using an object that contains all the options that could send to the javascript behind the date picker instead of using a DateTime value that is sending back.

export function init(ref, cmp, options) {
    //console.log('options', options)

  ref.$flatpickr = flatpickr(ref, {
      defaultDate: options.Value,
      enableTime: options.EnableTime,
      dateFormat: options.DateFormat,
      noCalendar: options.NoCalendar,
      time_24hr: options.Enable24Hr,
    // wrap: true,
    // allowInput: true,
    // clickOpens: false,
    onChange: function (value) {
      // console.log(value);
      cmp.invokeMethodAsync('MatDatePickerOnChangeHandler', value);
    }
  });


  ref.$iconRef = iconRef;

  // ref.addEventListener('focus', (i) => {
  //
  //   ref.$flatpickr.close();
  // });
}

I haven't managed to get it to work on my machine yet, but the concept is there.

But I am not sure if we can extend the date picker by making a new class called 'BaseMatTimePicker' and let it inherited from the BaseMatDatePicker than improve the date picker with options.

[antonianikolova]

Enable time picker without Calendar, no longer works in version 2.0.0. (it disables everything) Is there some solution? <MatDatePicker DisableCalendar="true" EnableTime="true"></MatDatePicker>

[JusticarProgramming]

@antonianikolova Have you found a solution or have been informed of a solution? I've just implemented the standard MatDatePicker while I wait.

[Christoffleroux]

Hi, I also have a requirement to bind to a TimeSpan value for selecting a time only, would be great to have a time picker.

[PizzaConsole]

+1 for a time picker. It doesn't even be integrated with the date picker.

[mariusvanderberg]

Also really need the time picker

[PizzaConsole]

I did realize that you can take the Mattextfield and put the type as time and convert the string to a time span and add it to a datetime

[jweschenfelder]

I would also love to have a TimePicker. The example: <MatDatePicker Label="Time from" TValue="DateTime?" @bind-Value="@FromTime" Minimum="@DateTime.MinValue" Maximum="@DateTime.UtcNow" Enable24hours="true" EnableTime="true" Format="HH:MM"> does not work for me. I only see a calendar, not a single time picker. I do not see a single time picker in that example here, too, where EnableTime is "presented": https://blazorfiddle.com/temp/f94cf177-dd31-453d-9a7c-8e8e52b16471 (from: https://www.matblazor.com/DatePicker). I only see a calendar there, too. For me, it is a BUG which should be fixed asap. P.S. I use the newest MatBlazor version 2.8, it is the newest Nuget package. Regarding to this link, it should have worked sometime in the past: https://github.com/SamProf/MatBlazor/issues/663 - One year later it is not working anymore?

[jweschenfelder]

P.S. As far as I'm aware, MatBlazor is using Material Design for most (if not all) of their components, and Material Design offers a TimePicker: https://material.io/components/time-pickers. Edit: I have to correct myself again. For web, they do only have a screenshot, too: