It takes two clicks to open the calendar/time popup,when we change the date time format on focus event of date time control

[Rohit Swarup]

Hi,

Our Objective:

1. To  set one date time format when control is focused and other format when control is blur.

2. To open the calendar/time popup on first click

Issue: When we change date time format on focus event of ejs-datetimepicker control and click on calendar/time icon first time, the calendar/time pop up does not get opened. It takes two clicks to open the calendar/time popup.

On first click, it focuses the control but does not open the calendar/time pop up. On second click it opens the popup.

Analysis of error: When we change date time format on focus of ejs-datetimepicker control the calendar/time pop up gets closed immediately.

Please refer the below link for reference :

https://stackblitz.com/edit/angular-3r2qjt-mmmfgs?file=app.component.html,app.component.ts

[Deepak Ramakrishnan]

Hi Rohit,

Greetings ..! 

We have modified the sample as per your requirement and attached it below for reference. Kindly let us know the usecase scenario if the below solution does not meets your requirement.

https://stackblitz.com/edit/angular-3r2qjt-fzwuhy?file=app.component.html,app.component.ts

In the provided sample from your end, you have changed the format property associated to the component which results in refreshing the component (Actually popup get opened and hided immediately , pretends like not get opened) . Now in the above sample we have prevented the initial closing of the popup , as the issue occurs only on first click.

Thanks,

Deepak R.

[Rohit Swarup]

Hi Deepak,

Thank you for the reply!

We checked your given sample code , in that now calendar popup opens at first click, but in your given sample code when we select date it does not get reflect in date time picker control.

Before selection:

After selection:

We have also modified your solution as per our requirement(we have just  set isOpen to true in focus event).

Please find the modified link for refernce:

https://stackblitz.com/edit/angular-3r2qjt-fjx78g?file=app.component.html,app.component.ts

[UdhayaKumar Duraisamy]

Hi Rohit,

We are validating the requirement. We will update the further details in two business days (10^th August 2022).

Regards,

Udhaya Kumar D

[UdhayaKumar Duraisamy]

Hi Rohit,

Due to complexity, We are still validating the requirement. We will update the further details in two business days (12^th August 2022).

Regards,

Udhaya Kumar D

[Rohit Swarup]

Hi,

Can you please let us know by when will we get further update regarding this query?

[UdhayaKumar Duraisamy]

Hi Rohit,

Sorry for the inconvenience caused.

We have prepared a sample for the requested requirement and shared the stackblitz link below for your reference. We suggest you update the formatted string to the DateTimePicker component using the component instances instead of changing the format of the component directly. If we change the format of the component directly, then the component will re-render.

[app.component.html]

    <ejs-datetimepicker

      #inputDateTime

      id="DatePicker"

      format="d-MMM-yyyy"

      (focus)="onfocusFormat($event)"

      (blur)="onOutputFormat($event)"

    ></ejs-datetimepicker>

[app.component.html]

export class AppComponent {

  public onOutputFormat(args) {

    var BlurDate = args.model.previousDateTime;

    if (BlurDate != null) {

      var dateStr =

        ('00' + (BlurDate.getMonth() + 1)).slice(-2) +

        '/' +

        ('00' + BlurDate.getDate()).slice(-2) +

        '/' +

        BlurDate.getFullYear() +

        ' ' +

        ('00' + BlurDate.getHours()).slice(-2) +

        ':' +

        ('00' + BlurDate.getMinutes()).slice(-2) +

        ':' +

        ('00' + BlurDate.getSeconds()).slice(-2);

      document.getElementById(

        'DatePicker_input'

      ).ej2_instances[0].element.value = dateStr;

    }

  }

 

  public onfocusFormat(args) {

    var tempdataValFocus = args.model.previousDateTime;

    if (tempdataValFocus != null) {

      var months = [

        'Jan',

        'Feb',

        'Mar',

        'Apr',

        'May',

        'Jun',

        'Jul',

        'Aug',

        'Sep',

        'Oct',

        'Nov',

        'Dec',

      ];

 

      var month = '' + months[tempdataValFocus.getMonth()];

      var day = '' + tempdataValFocus.getDate();

      var year = tempdataValFocus.getFullYear();

      var tempdata = [day, month, year].join('-');

      document.getElementById(

        'DatePicker_input'

      ).ej2_instances[0].element.value = tempdata;

    }

  }

}

Documentation : https://ej2.syncfusion.com/angular/documentation/api/datetimepicker/#events

Sample : https://stackblitz.com/edit/angular-3r2qjt-4tea9h?file=app.component.html,app.component.ts

Kindly try the above suggestion and let us know if this meets your requirement.

If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.

Regards,

Udhaya Kumar D