Disable previous dates along with specified dates in Bootstrap DatePicker using jQuery

chanchal26
 
on Aug 30, 2021 11:12 PM
545 Views

how to disable previous dates in date picker

I am trying to disable some dates along with that I am trying to disable past dates as well. Kindly, give some help where I can delete past dates in date picker.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"> </script>  
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap- 
    datepicker/1.7.1/css/bootstrap-datepicker.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap- 
    datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
<div class='input-group date' id='datepicker1'>
    <asp:TextBox runat="server" ID="txtdatepicker"></asp:TextBox>
</div>

 

<script type="text/javascript">         
    $(function () {
      var disableSpecificDates =  ["19-8-2021", "28-8-2021", "26-8-2021"];      
      $('#datepicker1').datepicker({
          format: 'mm/dd/yyyy',
          beforeShowDay: function (date) {
              dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" +
          date.getFullYear();
              if (disableSpecificDates.indexOf(dmy) != -1) {
                  return false;
              }
              else {
                  return true;
              }
          }
      });
      $('#datepicker1').datepicker("setDate", new Date());
    });          
</script>

 

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Aug 31, 2021 07:35 AM
on Aug 31, 2021 07:41 AM

Hi chanchal26,

Refer below sample.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <script type="text/javascript" src='https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js'></script>
    <script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js'></script>
    <link rel="stylesheet" media="screen" href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css' />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker3.min.css" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var disableSpecificDates = ["10-9-2021", "15-9-2021", "28-9-2021"];
            $('[id*=txtdate]').datepicker({
                startDate: new Date(),
                minDate: new Date(),
                format: "mm/dd/yyyy",
                daysOfWeekHighlighted: "0,6",
                language: 'en',
                daysOfWeekDisabled: [0, 6],
                beforeShowDay: function (date) {
                    dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();
                    if (disableSpecificDates.indexOf(dmy) != -1) {
                        return false;
                    } else {
                        return true;
                    }
                }
            });
        });
    </script>
    <input type="text" id="txtdate" />
</body>
</html>

Demo