CODEWITHSUNDEEP
javascripthtmljquery
Humphrey
Humphrey

Reputation: 2817

Datepicker jquery how to diasble 2 future days after today

How can I disable only two future dates after today for instance today is 2020-12-26 but then 2020-12-27 and 2020-12-28 to be disabled like that. and all past dates must be enabled . I tried searching everywhere but no luck all I see is to disable all future dates which I don't want. Your help will be appreciated.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta https-equiv="X-UA-Compatible" content="IE=edge">
        <title>Pay Fees</title>
        <!--date picker -->
        <link href="http://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />
        <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
        <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

       <!--date picker -->
       <script type="text/javascript">
           $(document).ready(function() {
               $("#datepicker").datepicker({
                   maxDate: 0
               });
           });
       </script>
    </head>
    <body>
        <input type="text" id= "datepicker" name="datepicker">
    </body>
</html>

Upvotes: 0

Views: 453

Answers (2)

Humphrey
Humphrey

Reputation: 2817

<html>
<head>
    <meta charset="utf-8">
    <meta https-equiv="X-UA-Compatible" content="IE=edge">
    <title>Pay Fees</title>
    <!--date picker -->
    <link href="https://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />
    <script src="https://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

   <!--date picker -->
   <script type="text/javascript">
       $(document).ready(function() {
             var today = new Date();
           var dd = today.getDate()+1;
           var dd2 = today.getDate()+2;

           var mm = today.getMonth()+1; 
           var yyyy = today.getFullYear();

           nextday = yyyy+'-'+mm+'-'+dd;
           nextday2 = yyyy+'-'+mm+'-'+dd2;

           unavailableDates = [nextday,nextday2];
           
           $("#datepicker").datepicker({
               beforeShowDay: function(date){
                 var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
                 return [ unavailableDates.indexOf(string) == -1 ]
               }
           });
       });
   </script>
</head>
<body>
    <input type="text" id= "datepicker" name="datepicker">
</body>

Upvotes: 0

suii
suii

Reputation: 392

I think its related to this question JQuery ui - date picker, disabling specific dates but you just get the next two days like this and assign it to unavailableDates.

var today = new Date();
var dd = today.getDate()+1;
var dd2 = today.getDate()+2;

var mm = today.getMonth()+1; 
var yyyy = today.getFullYear();

nextday = yyyy+'-'+mm+'-'+dd;
nextday2 = yyyy+'-'+mm+'-'+dd2;

unavailableDates = [nextday,nextday2];

Upvotes: 1

Related Questions