javascript - set default minute in ngx-mat-datetime-picker in angular? - Stack Overflow

admin管理员组

文章数量:1022679

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

Share Improve this question Follow edited Jun 8, 2020 at 11:50 Rekha asked Jun 8, 2020 at 11:28 RekhaRekha 42377 silver badges2525 bronze badges 1

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

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

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

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

Share Improve this question Follow edited Jun 8, 2020 at 11:50 Rekha asked Jun 8, 2020 at 11:28 RekhaRekha 42377 silver badges2525 bronze badges 1

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

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

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

本文标签： javascriptset default minute in ngxmatdatetimepicker in angularStack Overflow