Time editing via input field

[jbthomps]

My users expect to be able to edit the time within the input control itself to support full keyboard accessibility without having to enter the timepicker itself. In other components, the timepicker/datepicker either had this functionality natively, usually also only allowing open by provided icon, or was exposed as a service, which allowed for the developer to combine timepicker access with a native component, usually by adding an icon button.

If it's possible, if it needs to be bound to an input, it would help to be able to be combined with input type="time", or to provide a directive that acts as a time mask over a standard input, but neither of these are strictly needed.

[Agranom]

Do you mean edit time through the input without opening the timepicker?

[jbthomps]

That is exactly what I mean.

[Agranom]

I'll do something with it

[Dona278]

@Agranom could you estimate the date to get this feature? However, congrats for this awesome work

[Agranom]

I have to fix other issues first, so it could be a few weeks, but I'm not sure. However, I'll try to implement it as soon as possible

[Aidan-Chey]

This reads like what I have just implemented with this timepicker package.

The Input: Add "disableClick" as an input to prevent it opening the picker

<input [ngxTimepicker]="picker" [disableClick]="true">

You can't add type="time" to the input however because it doesn't accept the format the picker supplies/expects.

The element to open the picker

<ngx-material-timepicker-toggle [for]="picker"></ngx-material-timepicker-toggle>

The picker itself

<ngx-material-timepicker #picker></ngx-material-timepicker>

[Agranom]

@Aidan-Chey Sorry, I didn't get your reply

[rainbird17]

@Agranom - Has this feature been implemented yet? This is of interest to me as well, I would be happy to see this as a feature someday. There is another time picker I was looking at the other day called md-time-picker which has the ability to enter/modify the time via the inputs without entering the clock. I think your component is better overall, so we prefer to use yours, but you might want to look at that one as an example. The input fields are masked to prevent any invalid data/numbers from being entered and it supports 12h/24h mode editing.

[Agranom]

@rainbird17 Not yet. But this will be the next feature, right after resolving bug issues

[ndl7]

Awesome work. Any update on the feature? Been waiting for half a year for this :) Thanks!

[Agranom]

Sorry guys, still cannot start implementing it. I hope this month I'll start

[Agranom]

Start thinking about how it should look like. It probably will be a component not a directive. But what about styling? Should it looks like a material input ?

[rainbird17]

We would prefer Material Design styling. Also make sure it supports 12/24 hour inputs, and restrict inputs to valid chars and such.

[Agranom]

Guys, sorry, still can't start implementing component (

[Agranom]

Already started implementation. Do you need toggle button near time input to open timepicker ?

[jbthomps]

For my use case, I would.

[Agranom]

Finally done it ). First version available on v3.2.0 (look at the demo page). If you'd like some improvements/fixes, please create an issue, because I'll close this one.

[rajaramtt]

Without ngxTimepicker always getting am only, Putting hidden of ngxTimepicker worked for me.

Code Snippet

Template:

<input [ngxTimepicker]="picker" type="hidden" [formControl]="pickerInput" />
 <ngx-material-timepicker #picker (timeSet)="timeSetData($event)"></ngx-material-timepicker>

Comonet

 @ViewChild('picker') picker: NgxMaterialTimepickerComponent ;
   pickerInput = new FormControl('');
     -----------------
 
addTime():  void {
 this.pickerInput.setValue('12:00 am');
 this.picker.open();
 }

timeSetData(outputData) {
    --------------------
}

[MerySantos]

@Agranom Hi, how use timeSet in this feature?

[Agranom]

Hi @MerySantos This feature is not available there

[Diksha2519]

I want to show a Invalid dateTime error into an mat-error.Can anybody help me out?

[Agranom]

@Diksha2519 I guess, it's better to validate timepicker input field within your component by rective forms