Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
30
How can i modify igx-timepicker display
posted

I am wondering about 2 things on the time picker.

a) Is there a way to remove on the drop down the left bar and also how can i get rid of the :0 after the Min ?

b) if the value of the control is empty, how can i set the initial value when user clicks on control 

Parents
No Data
Reply
  • 1980
    Offline posted

    Hi Angular Boy,

    To remove the calendar header you can set the time picker mode to dropdown. In dialog mode it is always present and the only thing you can change is its position by setting the vertical property.

    To exclude the trailing zero from the minutes you can set the format property.

    You can set the control's value by specifying a click handler:

    <igx-time-picker #tp [format]="'h:m tt'" (click)="setValue()"></igx-time-picker>

    and then implement the handler in the component:

    public setValue(){
       this.tp.value = new Date(2021, 3, 3, 10, 15, 0);
      }

Children