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.

Dependent DateTimePicker

Thread ID:

Created:

Updated:

Platform:

Replies:

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

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
Replied On August 21, 2016 11:39 PM

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 [Syncfusion]
Replied On August 22, 2016 10:56 AM

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
Replied On August 23, 2016 01:33 AM

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 [Syncfusion]
Replied On August 25, 2016 02:36 AM

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


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.

;