Home > front end >  How to disable past days and weekends in Jquery
How to disable past days and weekends in Jquery

Time:05-05

Does anybody know why this Script not working? I am trying to disable weekends and previous dates? I have tried searching all over the web but I am struggling.

<input type="date" id="date" >


<script type="text/javascript">
     $(function() {
     $( "#date" ).datepicker({
     beforeShowDay: $.datepicker.noWeekends,
     minDate : 'now'
  });
 });
</script>

DatePicker

CodePudding user response:

According to documentation, you simply need to disable the days of the week by utilizing numbers 0-6. Sunday starting at 0 and Saturday ending at 6, and obviously, every other day of the week assigned accordingly. Also, the format of daysOfWeekDisabled is a comma delimited string which you will see below. In order to only show today's date and on, simply set a minDate of today's date. All of the above is implemented in code below:

let dateToday = new Date(); 

 $('#date').datepicker({
            daysOfWeekDisabled: '0, 6',
            minDate: dateToday
        })

CodePudding user response:

In your case, the problem is you have input type as date but if you change that to test it will work.

Working Example:

<html xmlns="http://www.w3.org/1999/xhtml">
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<head>
    <script type="text/javascript">
        $(function () {
            $("#date").datepicker({
                beforeShowDay: $.datepicker.noWeekends,
                minDate : 'now'
            });
        });
    </script>
</head>
<body>
    <input type="text" id="date" />
</body>
</html>

  • Related