Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Arthur Butler
2035
igDatePicker MVC MinValue / MaxValue not disabling calendar entries
posted

I am porting an app from 14.2 to 17.1.  I have the following code:

@(Html.Infragistics().DatePickerFor(m => m.ExamDate)
.ID("exam-date")
.ButtonType(TextEditorButtonType.DropDown)
.PlaceHolder("Enter date")
.MinValue(@Model.MinExamDate.Date)
.MaxValue(@Model.MaxExamDate.Date)
.ClientEvents(new Dictionary<string, string>() { { "valueChanged", "function(evt, ui) { updateExamDate(ui.newValue) }" } })
.Width(70)
.DateDisplayFormat("d MMM")
.DateInputFormat("d MMM")
.Render())

When I select the drop down to change the date, it displays the calendar, but does not disable those dates before MinValue or after MaxValue.  It will allow me to select a date outside min / max and then it complains that the date is outside the range and it sets it to the min or max value as appropriate.  How do I get this to disable the dates outside the valid range?

Thanks,

Arthur

  • 10685
    Verified Answer
    Offline posted

    Hello Arthur, 

    Thank you for contacting Infragistics! 

    Please notice IgniteUI is jQuery based.

    In order to grey out the non available dates for the calendar, you can do this via the jQuery date picker options (which are reused in the igDatePickers). You can access these via the datepickerOptions option exposed.

    Starting from v.17.1 you can use DatePickerOptions with the Infragistics MVC wrapper, to set these options. 

    I have tested this with the following snippet and it works as you would expect it to. 

            @(Html.Infragistics().DatePickerFor(m => m.Customers.FirstOrDefault().Birthdate)

                             .DataMode(DateEditorDataMode.Date)
                             .ID("datePicker1")
                             .MinValue(new DateTime(2017, 07, 10))
                             .MaxValue(new DateTime(2017, 07, 17)) 

                             .DatePickerOptions(a=> a.MinDate("07/10/2017"))
                             .DatePickerOptions(a => a.MaxDate("07/17/2017"))
                             .Render()
                           )
     

    When MinDate / MaxDate options for the calendar are not set, and a user picks a date outside of the igDatePicker MinValue/MaxValue, the widget validation fires and this is what you are currently experiencing. 

    Please let me know how setting these options works for you!