Enable/Disable DateTimePicker and change editor template.

2 posts, 0 answers
  1. DominionZA
    DominionZA avatar
    49 posts
    Member since:
    Jul 2007

    Posted 22 Oct 2013 Link to this post

    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();
            });
        });
  2. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 24 Oct 2013 Link to this post

    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!
  3. UI for ASP.NET MVC is VS 2017 Ready
Back to Top