I can't set a default value for a DateTimePickerComponent in my editorTemplate

[Dimitri Beziau]

Hi,
I'm unable to assign a default value to my DateTimePicker components.
When I edit an event in the Scheduler, the component correctly shows the previously saved value.
However, when creating a new event, it always defaults to the current date and time — I can't set a custom default dateTime manually.

[Saritha Sankar]

Hi Dimitri Beziau,

We have reviewed your concern and would like to share a suggestion that may help resolve the issue. Please ensure that the DatePickerComponent values are correctly bound in your code. For reference, below is a sample implementation using the editor template that correctly displays the desired date and time.
 

 <DateTimePickerComponent

  id="StartTime"

  format="dd/MM/yy hh:mm a"

  data-name="StartTime"

  value={new Date(props.startTime || props.StartTime)}

  className="e-field"

/>

Sample Link: https://stackblitz.com/edit/react-hlpxxqnv-nn26gnyv?file=index.js

This approach ensures that the component uses either the existing event's start time or a default value of cell when creating a new event.

Please let us know if you need any further assistance.

Regards,

Saritha S.

[Dimitri Beziau]

The problem is that even when I don't assign any value to the field:

<DateTimePickerComponent locale='fr-CH' format='dd/MM/yy HH:mm' id="StartTimeDepose" data-name="StartTimeDepose" className="e-field py-3" />

When I edit an event, this field gets the value from the default prop as expected.
But when I create a new event, the field automatically gets the current date and time as its default value.

It's as if the editorTemplate is forcing default values into the inputs.
The issue is that these default values override the ones I want to set manually.

[Saritha Sankar]

Hi Dimitri Beziau,

Q1: When creating a new event using the editor template, the StartTime and EndTime fields automatically reflect the selected cell's start and end time properly without setting the value property in the DateTimePickerComponent. Please refer to the sample and the attached video for clarification.

Sample Link: https://stackblitz.com/edit/react-hlpxxqnv-npxerq9p?file=index.js

If you are still facing the issue, we would need additional details to replicate the exact problem on our end. We kindly request you to provide the following details, as this information will greatly assist us in understanding and resolving the issue effectively.

• Share the exact code snippet used or the specific steps followed to replicate the reported issue
• Provide a simple sample that replicates the issue or is replicated in our shared samples.
• Share a video demo that replicates issue.

Q2: If you would like to set a manual date only when creating a new event, this can be achieved using the popupOpen event of the Schedule component.

 

 

 const onPopupOpen = (args) => {

      if (args.type === 'Editor' && args.target.classList.contains("e-work-cells") ) {

        const startTimePicker = args.element.querySelector('#StartTime')?.ej2_instances?.[0];

        const endTimePicker = args.element.querySelector('#EndTime')?.ej2_instances?.[0];

        if (startTimePicker) {

          startTimePicker.value = new Date(2025, 7, 4, 10, 0);

          startTimePicker.dataBind();

        }

        if (endTimePicker) {

          endTimePicker.value = new Date(2025, 7, 4, 10, 30);

          endTimePicker.dataBind();

        }

      }

    };

Sample Link: https://stackblitz.com/edit/react-hlpxxqnv-nmk1oc2z?file=index.js

Please let us know if you need any further assistance.

Regards,

Saritha S.

Attachment: SelectedCellDateandTime_6f7fbbed.zip

[Dimitri Beziau]

Thank you for your help.

The second solution works perfectly.

Best regards,
Dimitri

[Saritha Sankar]

Hi Dimitri Beziau,

You're welcome. We are glad the response provided was helpful for you. Please get back to us if you need any further assistance.

Regards,
Saritha S. 

[Dimitri Beziau]

const editorTemplate = (props) => {

    return (props !== undefined ? <table className="custom-event-editor w-full h-full table-fixed"><tbody>

            <tr ><td className="py-3 w-1/3">Début intervention *</td><td className="w-2/3 py-3">

        <DateTimePickerComponent locale='fr-CH' format='dd/MM/yy HH:mm' id="StartTime" data-name="StartTime" className="e-field py-3"></DateTimePickerComponent>

      </td></tr>

      <tr ><td className="py-3 w-1/3">Fin intervention *</td><td className="w-2/3 py-3">

        <DateTimePickerComponent locale='fr-CH' key="date2" format='dd/MM/yy HH:mm' id="EndTime" data-name="EndTime" className="e-field py-3"></DateTimePickerComponent>

      </td></tr>

[...]

      <tr ><td className="py-3 w-1/3">Dépose *</td><td className="w-2/3 py-3">

        <DateTimePickerComponent locale='fr-CH' format='dd/MM/yy HH:mm'  id="StartTimeDepose" data-name="StartTimeDepose" className="e-field py-3"></DateTimePickerComponent>

      </td></tr>

      <tr ><td className="py-3 w-1/3">Reprise *</td><td className="w-2/3 py-3">

        <DateTimePickerComponent locale='fr-CH' format='dd/MM/yy HH:mm' id="EndTimeReprise" data-name="EndTimeReprise" className="e-field py-3"></DateTimePickerComponent>

      </td></tr>

    </tbody ></table > : <div></div>)

  };

[Vijay Ravi]

Hi Dimitri Beziau,

Can you please confirm if all the issues you mentioned have been resolved, or if you are still facing any problems? If you are experiencing any issues, please share the details so that we can further validate and assist you.

Regards,
Vijay