JQuery DatePicker not respecting min and max date range settings

Question

In my MVC app I have a function that returns the min and max dates in one of my tables and Im trying to use these to restrict the date range users can select in a JQuery DatePicker.

The model has two properites that are of type DateTime

[DisplayFormat(DataFormatString = "{0:dd/MM/yyyy}", ApplyFormatInEditMode = true)]
    public DateTime HalfHourlyStartDate { get; set; }




    [DisplayFormat(DataFormatString = "{0:dd/MM/yyyy}", ApplyFormatInEditMode = true)]
    public DateTime HalfHourlyMinDate { get; set; }

These are populated from the backend code from the DB. In the page I then have two hidden fields defined like this

  @Html.HiddenFor(x => x.HalfHourlyMinDate) @Html.HiddenFor(x => x.HalfHourlyMaxDate) 

Then in my page I have this code to set the datepicker min & max range

 $('.input-group.date').datepicker({ format: "dd/mm/yyyy", todayBtn: true, language: "en-GB", forceParse: true, autoclose: true, calendarWeeks: true, todayHighlight: true, changeMonth: true, changeYear: true }); var minDate = new Date($('#HalfHourlyMinDate').val()); var maxDate = new Date($('#HalfHourlyMaxDate').val()); $('.input-group.date').datepicker("change", { minDate: minDate }); $('.input-group.date').datepicker("change", { maxDate: maxDate }); 

But it doesnt work ! When I run my app, the datepicker still allows unresticed date selection. Can anyone advise me when Im going wrong here ?

*** Ive also tried it this way, but that doesnt work either

 $('.input-group.date').datepicker('option', 'minDate', minDate); $('.input-group.date').datepicker('option', 'maxDate', maxDate); 

**Update

Ive added a date function (found on stackoverflow) that creates a javascript date object from the string value in the hidden fields, but it still wont work.

 var minDate = compareDate($('#HalfHourlyMinDate').val()); var maxDate = compareDate($('#HalfHourlyMaxDate').val()); function compareDate(str1) { // str1 format should be dd/mm/yyyy. Separator can be anything eg / or -. It wont effect var dt1 = parseInt(str1.substring(0, 2)); var mon1 = parseInt(str1.substring(3, 5)); var yr1 = parseInt(str1.substring(6, 10)); var date1 = new Date(yr1, mon1 - 1, dt1); return date1; } 

**Update

Ok, Ive now tried this and it still dosnt work ! any ideas ? this should be pretty straightforwrd :-)

 var minDate = new Date(2017, 9, 9); var maxDate = new Date(2017, 10, 9); $(".input-group.date").datepicker({ format: "dd/mm/yyyy", todayBtn: true, language: "en-GB", forceParse: true, autoclose: true, calendarWeeks: true, todayHighlight: true, changeMonth: true, changeYear: true, minDate: minDate, maxDate: maxDate }); 

Answer 1

Make sure your min and max date have the correct javascript format, here you can see an example and how it's correctly working.

You can try to paste or modify it putting what the values you 're populating from DB to try to fix it.

 $( function() { const minDate = new Date($("#minDateInput").val());//new Date(2017, 7, 1); const maxDate = new Date($("#maxDateInput").val());//new Date(2017, 12, 1); $( "#datepicker" ).datepicker({ format: "dd/mm/yyyy", todayBtn: true, language: "en-GB", forceParse: true, autoclose: true, calendarWeeks: true, todayHighlight: true, changeMonth: true, changeYear: true, minDate: minDate, maxDate: maxDate }); } ); 

 <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <label for="maxDateInput">Min:</label> <input type="text" id="minDateInput" name="minDateInput" value="01/01/2017"/> <label for="maxDateInput">Max:</label> <input type="text" id="maxDateInput" name="maxDateInput" value="5/20/2017"/> <p>Date: <input type="text" id="datepicker"></p>