We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

DateTime Picker in dialog template

Thread ID:

Created:

Updated:

Platform:

Replies:

133010 Oct 4,2017 12:20 AM Oct 18,2017 02:09 AM ASP.NET Core 5
loading
Tags: Grid
Muhammad Naim Mohd Sani
Asked On October 4, 2017 12:20 AM

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 [Syncfusion]
Replied On October 5, 2017 12:39 AM

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. 
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
Replied On October 12, 2017 04:02 AM

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. 
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 [Syncfusion]
Replied On October 13, 2017 02:30 AM

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. 
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. 
Regards, 
Saravanan A. 


Muhammad Naim Mohd Sani
Replied On October 17, 2017 12:34 AM

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. 
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. 
Regards, 
Saravanan A. 


Thank you. This solution worked for me.


Alan Sangeeth S [Syncfusion]
Replied On October 18, 2017 02:09 AM

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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;