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. (Last updated on : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

DateTime Picker in dialog template

Thread ID:

Created:

Updated:

Platform:

Replies:

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

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 04:39 AM UTC

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 08:02 AM UTC

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 06:30 AM UTC

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 04:34 AM UTC

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 06:09 AM UTC

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.

Warning Icon 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.Close Icon

;