DateTime Picker in dialog template

[Muhammad Naim Mohd Sani]

Hi, 

I having some issue using datetime picker inside dialog template.

<ej-grid id="FlatGrid" allow-paging="true" allow-filtering="true">
                        <e-datamanager json="(IEnumerable<object>)ViewBag.dataCourse"
                                       update-url="/Course/CourseDetails"
                                       insert-url="/Course/NewCourse"
                                       adaptor="remoteSaveAdaptor" />
                        <e-edit-settings allow-adding="true" allow-editing="true" dialog-editor-template-id="#templateCourse" edit-mode="DialogTemplate" e-edit-settings>
                        <e-toolbar-settings show-toolbar="true" toolbar-items="@(new List<string>() {"add","edit","update","cancel" })"></e-toolbar-settings>
                        <e-columns>
                            <e-column field="Date_Start" header-text="Date Start" edit-type="Datepicker"></e-column>
                        </e-columns>
                    </ej-grid>

<script type="text/template" id="templateCourse">

                <td>Date Start</td>
                <td style="text-align: left">  
                    <input id="Date_Start" name="Date_Start" type="text" value="{{:Date_Start}}" />
                </td>
            </tr> 

</script>

Could you help me implementing date time picker in dialog template ? 

Thanks!

[Saravanan Arunachalam]

Hi Mohammed, 

Thanks for contacting Syncfusion’s support. 

We have analyzed your requirement and we have already discussed this query in the following user guide documentation link. 

https://help.syncfusion.com/aspnet-core/grid/editing#dialog-template-form  

And we have modified your provided code to render the ejDatePicker control on the Dialog template form that can be refer from the below code example. 

<ej-grid id="FlatGrid" allow-paging="true" allow-filtering="true" action-complete="onComplete"> 

    . . . 

</ej-grid> 

<script type="text/javascript"> 

    function onComplete(args) { 

        if (args.requestType == "beginedit" || args.requestType == "add") { 

            $("#Date_Start").ejDatePicker({ width: "100%", value: args.data.Date_Start }); 

        } 

    } 

</script> 

<script type="text/template" id="templateCourse"> 

    <td>Date Start</td> 

    <td style="text-align: left"> 

        <input id="Date_Start" name="Date_Start" type="text" /> 

    </td> 

    </tr> 

</script> 

 

Regards, 

Saravanan A. 

[Muhammad Naim Mohd Sani]

Hi Mohammed, 

Thanks for contacting Syncfusion’s support. 

We have analyzed your requirement and we have already discussed this query in the following user guide documentation link. 

https://help.syncfusion.com/aspnet-core/grid/editing#dialog-template-form  

And we have modified your provided code to render the ejDatePicker control on the Dialog template form that can be refer from the below code example. 

<ej-grid id="FlatGrid" allow-paging="true" allow-filtering="true" action-complete="onComplete"> 

    . . . 

</ej-grid> 

<script type="text/javascript"> 

    function onComplete(args) { 

        if (args.requestType == "beginedit" || args.requestType == "add") { 

            $("#Date_Start").ejDatePicker({ width: "100%", value: args.data.Date_Start }); 

        } 

    } 

</script> 

<script type="text/template" id="templateCourse"> 

    <td>Date Start</td> 

    <td style="text-align: left"> 

        <input id="Date_Start" name="Date_Start" type="text" /> 

    </td> 

    </tr> 

</script> 

 

Regards, 

Saravanan A. 

Thanks. That worked for me. However, when i pick a date on the widget, it will save different date.

For example, I pick 6 September, then saved value is 7 September.

Thanks

[Saravanan Arunachalam]

Hi Muhammad, 

The date-time request on the controller is depend on the server time zone. Please refer to the following link to know more details. 

http://prideparrot.com/blog/archive/2011/9/how_to_display_dates_and_times_in_clients_timezone  

If the client and server has different timezone, the Grid content will show the date based on the client timezone. So, we suggest you to store date-time in common timezone (GMT/UTC) on the database or convert the date to UTC date format and return to the client. 

https://msdn.microsoft.com/en-us/library/system.datetime.touniversaltime(v=vs.110).aspx   

Regards, 

Saravanan A. 

[Muhammad Naim Mohd Sani]

Hi Muhammad, 

The date-time request on the controller is depend on the server time zone. Please refer to the following link to know more details. 

http://prideparrot.com/blog/archive/2011/9/how_to_display_dates_and_times_in_clients_timezone  

If the client and server has different timezone, the Grid content will show the date based on the client timezone. So, we suggest you to store date-time in common timezone (GMT/UTC) on the database or convert the date to UTC date format and return to the client. 

https://msdn.microsoft.com/en-us/library/system.datetime.touniversaltime(v=vs.110).aspx   

Regards, 

Saravanan A. 

Thank you. This solution worked for me.

[Alan Sangeeth S]

Hi Muhammad, 

We are happy to hear that your requirement has been achieved. Please let us know if you have any other queries. 

Regards,
Alan Sangeeth S