DateTimePicker with only optional Time

[Francois Zbinden]

We would like to use DateTimePicker for set a membership start and finish date with an optional time.

From: [       ]   To: [         ]

(DateRangePicker is not ideal for our use case).

Now, we don't want to clutter the gui with time, because there are only rarely used. So it should not display a time by default. Only after the user clicks on the time dropdown, and selects something other than 00:00, it should display the time.

Also, for the "To:" control, the time should default to 23:59:59. But also, this should be invisible. For example, if the user selects 2019-12-15, it should return 2019-12-15T23:59:59 by default.

[Priyanka Karthikeyan]

Hi Francois Zbinden,

We have prepared a sample based on the shared information. In the following code snippet, we've dynamically adjusted the format property and established the default time for the 'To' control as 23:59:59. Kindly refer to the code snippet and sample below for your reference

<ejs-datetimepicker

  #startPicker

  placeholder="From"

  floatLabelType="Auto"

  format="d/M/yyyy"

  (change)="onStartDateChange($event)"

></ejs-datetimepicker>

 

<ejs-datetimepicker

  #endPicker

  placeholder="To"

  floatLabelType="Auto"

  format="d/M/yyyy"

  (change)="onEndDateChange($event)"

></ejs-datetimepicker>

 

onStartDateChange(event: any) {

    // Handle start date change

    const startDate = new Date(event.value);

    const endDate = this.endPicker.value;

    if (startDate.toTimeString().split(" ")[0] != '00:00:00') {

     this.startPicker.format = 'dd/MM/yyyy HH:mm:ss'

    }

     else {

      this.startPicker.format = 'dd/MM/yyyy'

    }

    // Set default time for 'To:' if not already set

    if (!endDate) {

      this.endPicker.value = new Date(startDate.setHours(23, 59, 59));

    }

  }

 

  onEndDateChange(event: any) {

    const endDate = new Date(event.value);

    if (endDate.toTimeString().split(" ")[0] != '23:59:59') {

      this.endPicker.format = 'dd/MM/yyyy HH:mm:ss'

    }

  }

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

API Reference: https://ej2.syncfusion.com/angular/documentation/api/datetimepicker/#format

Moreover, if there is a possibility that we may have misunderstood your requirement, we kindly request you to provide us with further information about your specific scenario. This will enable us to align our understanding with your expectations, ensuring that we can provide you with the most effective assistance possible.

Regards,

Priyanka K