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>

ponent.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';

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>

ponent.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';

• javascript
• angular
• typescript

• hello :) did you find any solution to that ? – toto Commented Aug 19, 2020 at 10:29

1 Answer 1

Add defaultTime in the ponent.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 ponent.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';