Enable/Disable DateTimePicker and change editor template.

[DominionZA]

I am stuck with two problems related to the DateTimePicker and the DatePicker.

We have a checkbox in the view where the user can enable/disable the time selector (date only or date/time), and another checkbox for 24 hour range for which I want to disable the To Date DatePicker (have both a FromDate and ToDate pickers).

What I would like to know is..
1. How to disable/enable a DatePicker.
2. How to switch it from date to date/time and back to date again - dependent on the checkbox selection above.

Controls and script in my view. Pretty simple stuff, but my toDatePicker var does not allow me to enable/disable the control. It just does nothing.
I have not done any code yet for changing the date picker between date only and date/time. I cannot even disable the control, so not looked at this yet. Would appreciate a heads up on how to do this please.

Also open to a better way to what I have indicated below.

@Html.EditorFor(x => x.SelectByDateAndTime)
@Html.CheckBoxFor(x => x.TwentyFourHourShift)
@Html.LabelFor(x => x.DateFrom, new { id = "FromDateLabel"})
@Html.EditorFor(x => x.DateFrom)
@Html.EditorFor(m => m.DateTo)

$(document).ready(function () {
        var fromDateLabel = $("#FromDateLabel");
        var toDatePicker = $("#DateTo").data("kendoDateTimePicker");
        var twentyFourHourShiftCheckBox = $("#TwentyFourHourShift");
        var selectByDateTimeCheckBox = $("#SelectByDateAndTime");

        twentyFourHourShiftCheckBox.click(function () {
            if (twentyFourHourShiftCheckBox.attr('checked')) {
                selectByDateTimeCheckBox.attr("disabled", true);
                fromDateLabel.text("For Date");
            }
            else {
                selectByDateTimeCheckBox.removeAttr("disabled");
                fromDateLabel.text("From Date");
            }

            toDatePicker.enable();
        });

        selectByDateTimeCheckBox.click(function () {
            if (selectByDateTimeCheckBox.attr('checked'))
                twentyFourHourShiftCheckBox.attr("disabled", true);
            else
                twentyFourHourShiftCheckBox.removeAttr("disabled");

            toDatePicker.enable();
        });
    });

[Petur Subev]

Hello Michael,

Disabling/enabling a DateTime picker should be done through the API enable method, same is demonstrated in this demo:

http://demos.kendoui.com/web/datetimepicker/api.html

However turning DatePicker into a DateTimePicker is not possible,

you will need to either destroy/create the widget dynamically depending on the checkbox
or you will need to create two widgets(you should use different Id but same name attribute) and you will need to disable(so only one is submitted) & hide one of the depending on the selection.

e.g.

@(Html.Kendo().DatePicker().Name("foo").HtmlAttributes(new { name="test"}))
@(Html.Kendo().DateTimePicker().Name("bar").HtmlAttributes(new { name="test"}))

where 'test' should be the same as the name of your model field.

Kind Regards,
Petur Subev
Telerik