How to correctly customize the default DateTimePicker in the Add/Edit task Dialog?

[Ryan.L]

I'm working on customizing the default DateTimePicker in the Add/Edit task Dialog, the current dialog's General Tab is like the following picture:

As you can see in the picture, the Start Date is a DateTimePicker, but after I selected a time item from the dropdownlist, the input-textbox still won't display the time field I have just selected. What i expected is like:

6/25/2025 8:30AM

But it gave me:

 6/25/2025

I tried search the documentations, i found this link:

Customize control in add/edit dialog

but from the sample code snippets in the page, i didn't found a way to customize the format of the DateTimePicker in the task add/edit dialog.

please help. a link or sample code will help a lot. Thanks!

[Ajithkumar Gopalakrishnan]

Hi Ryan,

Greetings from Syncfusion Support,

To achieve your requirement, we suggest using the edit parameters of the column in the Gantt chart. These parameters allow rendering in the specified format in the add/edit dialog of the Gantt chart. We have attached a code snippet and a sample for your reference.

<ejs-gantt ref='gantt' id="GanttContainer"

           :dataSource="data"

           :columns="columns"

           ...>

</ejs-gantt>

columns: [

        { field: 'TaskID', width: 80 },

        { field: 'TaskName',  },

        { field: 'StartDate', type:'datetime',editType:'datetimepickeredit',format: { format: 'M/d/y hh:mm a', type: 'dateTime' },edit: { params: { format: 'M/d/y hh:mm a' } } },

        { field: 'EndDate', type:'datetime',editType:'datetimepickeredit',format: { format: 'M/d/y hh:mm a', type: 'dateTime' },edit: { params: { format: 'M/d/y hh:mm a' } } },

        ...

],

Sample link: https://stackblitz.com/edit/q3uwqkis-fremg9p4?file=src%2FApp.vue

For more information, you may refer to the following link:

https://ej2.syncfusion.com/documentation/gantt/columns/columns#column-type
https://ej2.syncfusion.com/vue/documentation/gantt/managing-tasks/managing-tasks#cell-edit-type-and-its-params
https://ej2.syncfusion.com/documentation/api/gantt/columnModel/#edit

If you have any further questions or need additional assistance, please feel free to let us know!

Regards,
Ajithkumar G