2

I am using a KendoUI DateTimePicker in ASP MVC. When you select the time picker, you get hours from 00:00-24:00. This is unwieldly for people to scroll through. I only want 08:00-16:00 displayed, for any day. Is it possible to do that? Here is what I tried. This failed because it's not a valid DateTime. 

                    @(Html.Kendo().DateTimePickerFor(x => x.HearingDate)
                      .Name("HearingDate")
                      .Min(new DateTime(0, 0, 0, 8, 0, 0))
                      .Max(new DateTime(0, 0, 0, 16, 0, 0))
                    )

EDIT: The answer I selected put me on the right path once I understood there was no way to do this with DateTimePicker. Here is my solution, blending Kendo DatePickerFor and TimePickerFor. This took many hours to figure out, mostly because of issues I had with TimePicker. In my project, The Date and Time are allowed to both be null.

Model

[Display(Name = "Hearing Date")]
public DateTime? HearingDate { get; set; }

[Display(Name = "Hearing Time")]
[DataType(DataType.Time)]
public DateTime? HearingTime { get; set; }

[Display(Name = "Hearing Date")]
public DateTime? HearingDateOnly { get; set; }

Controller

        if (model.HearingDateOnly != null && model.HearingTime != null)
        {
            var d = model.HearingDateOnly.Value;
            var t = model.HearingTime.Value;
            model.HearingDate = new DateTime(d.Year, d.Month, d.Day, t.Hour, t.Minute, t.Second);
        }

View

                        @(Html.Kendo().DatePickerFor(x => x.HearingDateOnly)
                              .Name("HearingDateOnly")
                              .Min(DateTime.Now)
                              )

                        @(Html.Kendo().TimePickerFor(x => x.HearingTime)
                            .Name("HearingTime")
                            .Min(new DateTime(2010,1,1,8, 0, 0))
                            .Max(new DateTime(2010,1,1, 16, 0, 0))                                
                        )

Notes: HearingDate is not shown on the view, I use it behind the scenes to join the two others. the Min and Max values are 2010 (arbitrary) datetimes, but only the time portion is used by Kendo. I had a TimeSpan, but removed it due to issues. The Display attributes are necessary to prevent Kendo's validation messages from displaying the ugly "HearingTime is not a valid date" message.

redwards510
  • 1,802
  • 1
  • 17
  • 23
  • 1
    This is not a duplicate as this is for the MVC wrapper related where the answer is for Kendo UI - Jquery. I do have a workaround for the issue That should be displayed here. @(Html.Kendo().DateTimePickerFor(x => x.HearingDate) .Name("HearingDate") .Events(e => e.Open(@function(e){ if (e.view === "time") { e.sender.timeView.dataBind([ new Date(1970, 0, 1, 9), new Date(1970, 0, 1, 11), new Date(1970, 0, 1, 13) ]) }}) ) ) – Bobby Tzenev Jun 06 '17 at 13:29

1 Answers1

1

See https://stackoverflow.com/a/14501173/3250365. DateTimePicker's time range cannot be restricted, so the workaround for this is to have a separate TimePicker from the DatePicker. This has other drawbacks, but then you could do:

var t = $("#time-picker").kendoTimePicker().data("kendoTimePicker");

t.min("8:00 AM");
t.max("4:00 PM");
Community
  • 1
  • 1
Boatmarker
  • 197
  • 1
  • 10