CODEWITHSUNDEEP
javascriptjqueryjquery-uiasp.net-mvc-5datepicker
Unbreakable
Unbreakable

Reputation: 8102

How to set min and max date in the JQueryUI DatePicker in ASP.Net MVC 5 Application

Ok, so after following this Date Picker Tutorial I am able to create a datepicker. But I want to set some limit to the date picker. For example I only want the date picker to allow from 5th Jan 2017 to 5th Aug 2017". How can I achieve this. Note that I don't want to change the dateFormat property of the datepicker. Also, dateformat property is working properly.

Below is what I have till now:

<script type="text/javascript">
    $(function () {
        $(".date-picker").datepicker({
            dateFormat: 'dd-M-yy',
            minDate: '05-Jan-17',
            maxDate: '05-Aug-17'
        });   

    });    
</script>

I selected minDate as '05-Jan-17' because I thought it should be put in the same format as I have set the dateFormat as dd-M-yy.

Documentation of JQuery UI:

enter image description here

After going through the Documentation of JQUERY DatePicker I thought I need to do something like below.

<script type="text/javascript">
    $(function () {
        $(".date-picker").datepicker({
            dateFormat: 'dd-M-yy',
         });
        $(".date-picker").datepicker("option", "minDate", "05-JAN-17");
    });
</script>

But this also does not work. Please help me.

Model Class

 public class Genre
    {
        public int Id { get; set; }
        [DisplayFormat(DataFormatString = "{0:dd-MMM-yyyy}", ApplyFormatInEditMode = true)]
        public DateTime SongDate { get; set; }
    }

EDIT 1: This also does not work.

$(".date-picker").datepicker("option", "minDate", new Date("05-Jan-2017"));

EDIT 2 Below change worked

 $(".date-picker").datepicker("option", "minDate", new Date("01-05-2017"));
        $(".date-picker").datepicker("option", "maxDate", new Date("08-05-2017"));

Upvotes: 2

Views: 4115

Answers (1)

Koushik Chatterjee
Koushik Chatterjee

Reputation: 4175

minDate , maxDate should be Date object instead of string, so create a

new Date(....) in minDate and maxDate accordingly as per your requirement.

for reference, read this question

Upvotes: 3

Related Questions