How to disable past date in daterangepicker?

Question

I using two date selected daterangepicker. this working perfect but how to disable past date. below is my code

js/site/daterange/moment.min.js">

    <script type="text/javascript" src="<?php echo base_url();?>js/site/daterange/daterangepicker.js"></script>
    <link rel="stylesheet" type="text/css" href="<?php echo base_url();?>css/site/daterangepicker.css" />
    <script type="text/javascript">
      $(function() {
      $('input[name="checkin"],input[name="checkout"]').daterangepicker({
          autoUpdateInput: false,
          locale: {
              cancelLabel: 'Clear'
          }
      });

      $('input[name="checkin"],input[name="checkout"]').on('apply.daterangepicker', function(ev, picker) {
          //$(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
          $('#checkin').val(picker.startDate.format('MM/DD/YYYY'));
          $('#checkout').val(picker.endDate.format('MM/DD/YYYY'));

      });

      $('input[name="checkin"],input[name="checkout"]').on('cancel.daterangepicker', function(ev, picker) {
          $(this).val('');
      });

      });

score 14 · Answer 1 · answered Oct 30 '19 at 12:10

14

this is easy way to solve the problem

$('input[name="daterange"]').daterangepicker({
      minDate:new Date()
});

answered Oct 30 '19 at 12:10

abubakkar tahir

737
1
11
13

score 11 · Accepted Answer · answered Mar 08 '17 at 10:19

I had the same issue. I checked http://www.daterangepicker.com/#options and seems to me minDate would do the job.

    var today = new Date(); 
    var dd = today.getDate(); 
    var mm = today.getMonth()+1; //January is 0! 
    var yyyy = today.getFullYear(); 
    if(dd<10){ dd='0'+dd } 
    if(mm<10){ mm='0'+mm } 
    var today = dd+'/'+mm+'/'+yyyy; 
    $('input[name="daterange"]').daterangepicker({

             minDate:today
    });

score 1 · Answer 3 · answered Jun 21 '16 at 14:01

So as far as i can see from your code you want to disable dates that are in the past so there are multiple ways to do such a thing but the easiest of them in my opinion would be to get the current date on document load and set that as the start date for your date range picker.

http://www.daterangepicker.com/#options should give you the example explaining the startDate syntax to do the same and the code to find the current date in the said format can be show as below:

var today = new Date(); 
var dd = today.getDate(); 
var mm = today.getMonth()+1; //January is 0! 
var yyyy = today.getFullYear(); 
if(dd<10){ dd='0'+dd } 
if(mm<10){ mm='0'+mm } 
var today = dd+'/'+mm+'/'+yyyy;

Here today stores the string form of the format you need and can be set to the startDate attribute.

For us U.S. people, watch the order of the date. We need `var today = mm+'/'+dd+'/'+yyyy;` I was staring at this for like 30 minutes before it clicked. — HPWD, Dec 17 '17 at 21:40
Hey dear @BanelingRush, I hope before writing this answer you have checked all the other answers to this question. If not please check and provide something new to the question. — Krunal Rajkotiya, Sep 01 '21 at 05:30

How to disable past date in daterangepicker?

3 Answers3