EJ2 Angular Datetime Picker not showing Directly when i open the form or edit

[ravi]

Hello,

I am using the EJ2 Angular Syncfusion datetime picker and I'm facing an issue with it. I need the datetime picker to show the current datetime directly in the field, but it's not working as expected. I have tried using the following code, but it's not working:

<ejs-datetimepicker

[disabled]="projectSalesToOpsHand.scheMeetWiOpe != 'Yes'"

[min]="minDate"

format="dd/MM/yyyy h:mm a"

required

[value]="minDate"

#ProjectSalesToOpsHand_ScheMeetWiOpeDate="ngModel"

[(ngModel)]="projectSalesToOpsHand.scheMeetWiOpeDate"

id="ProjectSalesToOpsHand_ScheMeetWiOpeDate"

name="ProjectSalesToOpsHand_ScheMeetWiOpeDate"

>ejs-datetimepicker>

public today: Date = new Date();

public currentYear: number = this.today.getFullYear();

public currentMonth: number = this.today.getMonth();

public currentDay: number = this.today.getDate();

public currentHour: number = this.today.getHours();

public currentMinute: number = this.today.getMinutes();

public currentSecond: number = this.today.getSeconds();

public date: Date = new Date(new Date().setDate(this.currentDay));

public minDate: Date = new Date(this.currentYear, this.currentMonth, this.currentDay, this.currentHour + 1, 0, 0);

and if I submit and After try to edit dateTime Field directly not showing previous date I set

Here another issue is that when I click on today button it should take minDate Date-Time but here

its take current Date but time is not current its take starting time of the day like 12 AM;

[UdhayaKumar Duraisamy]

You can use “minDate as new Date()” for your requirement. The new Date() will give the current Date and Time.

    <ejs-datetimepicker

      [min]="minDate"

      format="dd/MM/yyyy h:mm a"

      [value]="minDate"

      id="ProjectSalesToOpsHand_ScheMeetWiOpeDate"

      name="ProjectSalesToOpsHand_ScheMeetWiOpeDate"

    ></ejs-datetimepicker>

export class AppComponent {

  public minDate: Object = new Date();

}

Sample: https://stackblitz.com/edit/angular-zbxrn6?file=src%2Fapp.component.html,src%2Fapp.component.ts

[ravi]

can you solve this issue also when I click on the Today button from the calendar it is directly picking the time is the day stating 12 AM?  it should take current time only when I directly click on the today button.

[UdhayaKumar Duraisamy]

You can bind a click event to the Today button and in the click event you can update the DatePicker component's value to the current date and time using instances. Please refer to the code snippet and sample below for more information.

[app.component.html]

<ejs-datetimepicker

      #sample

      [min]="minDate"

      format="dd/MM/yyyy h:mm a"

      [value]="minDate"

      id="ProjectSalesToOpsHand_ScheMeetWiOpeDate"

      name="ProjectSalesToOpsHand_ScheMeetWiOpeDate"

      (open)="onOpen(sample)"

    ></ejs-datetimepicker>

[app.component.ts]

export class AppComponent {

  public minDate: Object = new Date();

 

  onOpen(e) {

    setTimeout(function () {

      document

        .getElementsByClassName('e-btn e-today')[0]

        .addEventListener('click', function () {

          e.value = new Date();

        });

    }, 50);

  }

}

Sample: https://stackblitz.com/edit/angular-zbxrn6-bbjuye?file=src%2Fapp.component.html,src%2Fapp.component.ts