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

跟風遠走 提交于 2020-07-22 03:12:28

问题


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:

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"));

回答1:


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



来源:https://stackoverflow.com/questions/45268611/how-to-set-min-and-max-date-in-the-jqueryui-datepicker-in-asp-net-mvc-5-applicat

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!