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: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Dependent DateTimePicker

Thread ID:





125503 Aug 20,2016 06:12 PM UTC Aug 25,2016 06:36 AM UTC ASP.NET MVC 4
Tags: DateTimePicker
Manoj Sethi
Asked On August 20, 2016 06:12 PM UTC

Hello Syncfusion Team,

I am using two DateTimePicker in my form as From and To. I want the 2nd DateTimePicker to be dependent on the selection made in the first DateTimePicker. 
Can you please suggest how can I achieve this?


Manoj Sethi
Replied On August 22, 2016 03:39 AM UTC

I got it done in following way

My Razor View
<label>Served From</label>
 @Html.EJ().DateTimePicker("dishDatetimeFrom").Width("175px").Interval(5).MaxDateTime(DateTime.Now.Date.AddDays(1).AddSeconds(-1)).MinDateTime(DateTime.Now).DateTimeFormat("d/M/yyyy, hh:mm tt").ClientSideEvents(e => e.Change("onChangeDateTimeFrom")).Width("200px")
<label>Served To</label>  @Html.EJ().DateTimePicker("dishDatetimeTo").Width("175px").Interval(5).MaxDateTime(DateTime.Now.Date.AddDays(1).AddSeconds(-1)).Enabled(false).Width("200px")

And in my script
function onChangeDateTimeFrom(args) {
            enabled: true,
            dateTimeFormat: args.model.dateTimeFormat,
            minDateTime: args.value

I hope it helps other who are in same need.

Francis Paul Antony Raj [Syncfusion]
Replied On August 22, 2016 02:56 PM UTC

Hi Manoj, 
Thanks for contacting Syncfusion support. 
Yes, you can change the control values dynamically (“eg: 2nd DateTimePicker to be dependent on the selection made in the 1st DateTimePicker”) using client side events of the controls. 
Once you have rendered the components using HTML helper in view page, no need to intialize it again in the script section. You can change the values dynamically by creating instance for the controls. Please refer the below code example. 
    function onChangeDateTimeFrom(args) { 
        obj = $('#dishDatetimeTo').ejDateTimePicker('instance'); // Object Creation 
        obj.option("enabled", true); 
        obj.option("minDateTime", args.value); 
For more information about DatePicker, DateTimePicker controls, refer to https://help.syncfusion.com/aspnetmvc/datepicker/overview 
To know more about properties, events, methods in DateTimePicker, please refer to https://help.syncfusion.com/js/api/ejdatetimepicker 
Kindly get back to us if you need further assistance. 
Francis Paul A 

Manoj Sethi
Replied On August 23, 2016 05:33 AM UTC

Thanks Francis Paul Antony Raj [Syncfusion] for guiding the correct way. 

Can you please help me on another question? https://www.syncfusion.com/forums/125526/asp-net-mvc-grid-rowindex


Francis Paul Antony Raj [Syncfusion]
Replied On August 25, 2016 06:36 AM UTC

Hi Manoj, 
The solution for your query is updated in the forum 125526. Please follow that forum for further details. 
Francis Paul A 


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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

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