This is a migrated thread and some comments may be shown as answers.

Enable/Disable DateTimePicker and change editor template.

1 Answer 2120 Views
Date/Time Pickers
This is a migrated thread and some comments may be shown as answers.
DominionZA
Top achievements
Rank 1
DominionZA asked on 22 Oct 2013, 02:29 PM
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();
        });
    });

1 Answer, 1 is accepted

Sort by
0
Petur Subev
Telerik team
answered on 24 Oct 2013, 08:30 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Date/Time Pickers
Asked by
DominionZA
Top achievements
Rank 1
Answers by
Petur Subev
Telerik team
Share this question
or