Dependent DateTimePicker

[Manoj Sethi]

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?

Thanks,

Manoj

[Manoj Sethi]

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) {

        $('#dishDatetimeTo').ejDateTimePicker({

            enabled: true,

            dateTimeFormat: args.model.dateTimeFormat,

            minDateTime: args.value

        })

    }

I hope it helps other who are in same need.

[Francis Paul Antony Raj]

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. 

<script> 

    function onChangeDateTimeFrom(args) { 

        obj = $('#dishDatetimeTo').ejDateTimePicker('instance'); // Object Creation 

        obj.option("enabled", true); 

        obj.option("dateTimeFormat",args.model.dateTimeFormat); 

        obj.option("minDateTime", args.value); 

    } 

</script> 

 

 

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. 

 

Regards, 

Francis Paul A 

[Manoj Sethi]

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

TIA

Manoj

[Francis Paul Antony Raj]

Hi Manoj, 

 

The solution for your query is updated in the forum 125526. Please follow that forum for further details. 

 

Regards, 

Francis Paul A