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. Image for the cookie policy date

Dependent DateTimePicker

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?


4 Replies

MS Manoj Sethi 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.

FP Francis Paul Antony Raj Syncfusion Team 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 

MS Manoj Sethi 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


FP Francis Paul Antony Raj Syncfusion Team 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 

Live Chat Icon For mobile
Up arrow icon