igx-timepicker model is not cleared when value in the input is cleared

[sjPrajwal]

timepicker works with angular form?

need to integrate the dropdown time picker with angular forms and do validation with reactive form validation.

Describe the solution you'd like

time picker can integrate to a angular with template reference variable, instead of component directive.

[Lipata]

Hi, @sjPrajwal.

Did you had the chance to check the already existing igxTimePicker?

[sjPrajwal]

Hi Nikolay, i am using your time picker in my application, integrated the time picker with angular reactive form validation. Problem is if clear the value in time picker, ngmodel value is still showing the todays date and time.

…

On Mon, Feb 3, 2020 at 4:20 PM Nikolay Alipiev ***@***.***> wrote: Hi, @sjPrajwal <https://github.com/sjPrajwal>. Did you had the chance to check the already existing igxTimePicker <https://www.infragistics.com/products/ignite-ui-angular/angular/components/time_picker.html> ? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#6585?email_source=notifications&email_token=AICLLK23H35YTK4C7D5C5VTRA7ZGBA5CNFSM4KPBR2AKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEKTLZCI#issuecomment-581352585>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AICLLKYQPBDJ3CLOWZKHAY3RA7ZGBANCNFSM4KPBR2AA> .

[sjPrajwal]

Hi @Lipata ,

You got the problem am facing..??
Please suggest any solution..

[zdrawku]

For proper ngModel binding in a form a name attribute needs to be specified for the input you're using or provide [ngModelOptions]={standalone: true}

[sjPrajwal]

Hi @Lipata,

<igx-time-picker format="HH:mm" formControlName="endTime" [minValue]="min" [maxValue]="max" mode="dropdown"
[(ngModel)]="enquiry.endTime">

this is how i am using in application, once the value set, again if i need to clear the by editing feild or by using X mark, ngModel still show the Mon Feb 03 2020 00:00:00 GMT+0530 (India Standard Time) time.

[zdrawku]

Change your code to:

<igx-time-picker format="HH:mm" formControlName="endTime" [minValue]="min" [maxValue]="max" mode="dropdown" name="test"
[(ngModel)]="enquiry.endTime">

You can use this sample as a reference

[sjPrajwal]

Hi IgniteUI/igniteui-angular team, for date picker its working perfectly, but not with time picker. please see the below link. https://stackblitz.com/edit/angular-v7yofg?file=src/app/timepicker-sample-8/timepicker-sample-8.component.html

…

On Mon, Feb 3, 2020 at 7:06 PM Zdravko Kolev ***@***.***> wrote: Change your code to: <igx-time-picker format="HH:mm" formControlName="endTime" [minValue]="min" [maxValue]="max" mode="dropdown" *name="test"* [(ngModel)]="enquiry.endTime"> You can use this sample <https://stackblitz.com/edit/angular-ngmodel-form-datepicker?file=src%2Fapp%2Fscheduling%2Fdatepicker%2Fdatepicker-dropdown%2Fdatepicker-dropdown.component.html> as a reference — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#6585?email_source=notifications&email_token=AICLLKYRKFKD7G67CHCAJVLRBAMT7A5CNFSM4KPBR2AKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEKT3MKA#issuecomment-581416488>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AICLLKYEUSVBYJLGSZNWPYLRBAMT7ANCNFSM4KPBR2AA> .

[sjPrajwal]

difference in date-picker and time-picker with ng-model. working with date-picker and not working with time-picker. https://stackblitz.com/edit/angular-ngmodel-form-datepicker-ipevrj?file=src/app/scheduling/datepicker/datepicker-dropdown/datepicker-dropdown.component.html On Tue, Feb 4, 2020 at 1:08 PM prajwaljayaram praju < [email protected]> wrote:

…

Hi IgniteUI/igniteui-angular team, for date picker its working perfectly, but not with time picker. please see the below link. https://stackblitz.com/edit/angular-v7yofg?file=src/app/timepicker-sample-8/timepicker-sample-8.component.html On Mon, Feb 3, 2020 at 7:06 PM Zdravko Kolev ***@***.***> wrote: > Change your code to: > > <igx-time-picker format="HH:mm" formControlName="endTime" > [minValue]="min" [maxValue]="max" mode="dropdown" *name="test"* > [(ngModel)]="enquiry.endTime"> > > You can use this sample > <https://stackblitz.com/edit/angular-ngmodel-form-datepicker?file=src%2Fapp%2Fscheduling%2Fdatepicker%2Fdatepicker-dropdown%2Fdatepicker-dropdown.component.html> > as a reference > > — > You are receiving this because you were mentioned. > Reply to this email directly, view it on GitHub > <#6585?email_source=notifications&email_token=AICLLKYRKFKD7G67CHCAJVLRBAMT7A5CNFSM4KPBR2AKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEKT3MKA#issuecomment-581416488>, > or unsubscribe > <https://github.com/notifications/unsubscribe-auth/AICLLKYEUSVBYJLGSZNWPYLRBAMT7ANCNFSM4KPBR2AA> > . >

[sjPrajwal]

Hi @Lipata,

Any updates regarding this feature??

[wnvko]

@sjPrajwal to bind input to ngModel the input should have either name attribute set or [ngModelOptions]="{standalone: true}. Both ways this is working in your last sample.

[sjPrajwal]

Hi @wnvko,

i think you didn't get the question i asked, from time-picker value is binding to the ng-model, but its not clearing.
Means:
1). if you try to clear values in input field of picker editing that, only from picker its clearing not from ng-model, still ng-model holding same values or 00:00 value.
2). if try to clear values using X mark in picker, still observing same behavior as above.

Instead for assigning this to feature-request we can tell its a bug in time-picker.
for date picker its working perfectly fine, please test both date-picker and time-picker of below sample.
https://stackblitz.com/edit/angular-ngmodel-form-datepicker-rsqpsl?file=src/app/scheduling/datepicker/datepicker-dropdown/datepicker-dropdown.component.html

i was not able attached the screen shots, otherwise i would have attached the screen shots for better understanding.

Thanks.
Waiting for your reply.

[Lipata]

@sjPrajwal, you are correct this is a bug in the time-picker

[sjPrajwal]

Hi @Lipata,

When can i expect fix for this bug ?

[Lipata]

@sjPrajwal, we can start working on this bug, as early as next week.

[sjPrajwal]

@Lipata,
Good morning.
Any updates on the issue.?

[Lipata]

Hi, @sjPrajwal. Still not started working on it. I will keep you updated when we have the time to work on this issue.

[sjPrajwal]

Okay @Lipata,

Thanks.

[github-actions]

There has been no recent activity and this issue has been marked inactive.

[PlamenaMiteva]

Hi @sjPrajwal,

Since the time picker component is designed to work with the date picker, the clear() method does not set its value to null, it sets the hours and minutes to zero instead. However we are planning to refactor both time and date picker components very soon and I have already linked this issue to the time picker refactoring issue.
Meanwhile, a possible workaround would be to handle the valueChange event and set the value to null if it has been cleared as in the following sample

[ammar4568]

Hi @PlamenaMiteva @Lipata @sjPrajwal any update on this? Still looking for a way to clear input to null on clear icon or back key press.

[PlamenaMiteva]

Hi @ammar4568,

The time picker can be bound to either a Date object or time-only string value in ISO 8601 format. The clear icon clears the time picker value if it is a string or resets the time to '00:00:00' if the value is a Date object.
So, what you want to achieve can be done by binding the time picker to a string value in ISO 8601 format. You can read more about time picker binding in our documentation.