CODEWITHSUNDEEP
javascriptangulartypescript
Rekha
Rekha

Reputation: 423

set default minute in ngx-mat-datetime-picker in angular?

HTML:(I have installed ngxMatDatetimePicker for datetime picker.i have set stepminute to every 15 minutes. this will calculate from current minute, but i need set default value should be 00. so if we click up arrow it will add 15,30, 45.. how to set default minute is 00??.. and also input field is taking dd-mm-yyyy hh:mm:ss format, even I gave showseconds to false. actual format should be dd-mm-yyyy hh:mm can you help me?)

   <mat-form-field>
            <input matInput [ngxMatDatetimePicker]="picker" placeholder="Time Slot" formControlName="time_slot"
                [disabled]="disabled">
            <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
            <ngx-mat-datetime-picker #picker [showSpinners]="showSpinners" [showSeconds]="showSeconds"
               [stepHour]="stepHour" [stepMinute]="stepMinute" [stepSecond]="stepSecond"
               [touchUi]="touchUi" [color]="color" [enableMeridian]="enableMeridian" >
            </ngx-mat-datetime-picker>
         </mat-form-field>

component.ts:

  public disabled = false;
  public showSpinners = true;
  public showSeconds = false;
  public touchUi = false;
  public enableMeridian = false;
  public stepMinutes = [0o0, 15, 30, 45];
  public stepHour = 1;
  public stepMinute = 15;
  public stepSecond = 1;
  public defaultTime = [new Date().getHours, 0o0 , 0o0] // i have tried like this
  public color: ThemePalette = 'primary';

Upvotes: 2

Views: 8089

Answers (1)

Uday Angadi
Uday Angadi

Reputation: 31

Add defaultTime in the component.html

<mat-form-field>
    <input matInput [ngxMatDatetimePicker]="picker" placeholder="Time Slot" formControlName="time_slot"
        [disabled]="disabled">
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <ngx-mat-datetime-picker #picker [showSpinners]="showSpinners" [showSeconds]="showSeconds"
       [stepHour]="stepHour" [stepMinute]="stepMinute" [stepSecond]="stepSecond"
       [touchUi]="touchUi" [color]="color" [enableMeridian]="enableMeridian" [defaultTime]="defaultTime">
    </ngx-mat-datetime-picker>
</mat-form-field>

In component.ts

public disabled = false;
public showSpinners = true;
public showSeconds = false;
public touchUi = false;
public enableMeridian = false;
public stepMinutes = [0o0, 15, 30, 45];
public stepHour = 1;
public stepMinute = 15;
public stepSecond = 1;
public defaultTime = [new Date().getHours(), 0 , 0] 
public color: ThemePalette = 'primary';

Upvotes: 3

Related Questions