I need a calendar that selects 2 dates, and by clicking on the checkbox, it adds 3 days to the second value, and takes it away from the first 3. Everything works, only when I use the current date, can it choose the past date, which is disabled .

How to make a check this date has passed or not?

I can not understand how to compare dates. Who knows, tell me

 $(document).ready(function () { var datepicker = $('.calendar_min').datepicker({ inline: true, range: true, toggleSelected: true, minDate: new Date(), multipleDatesSeparator: ",", dateFormat: 'yyyy-mm-dd', onSelect: function(formattedDate, date, inst) { if(date) { $("#dateRange").val(formattedDate); } } }).data('datepicker'); $('.datepicker--cells').on('click', function () { $("#date3Range").prop('checked',false); }); $("#date3Range").on('click', function(){ if($('#dateRange').val()){ var str = $('#dateRange').val(); var arrDate = str.split(','); if(arrDate.length == 2){ if(this.checked){ var selectedDate = new Date(arrDate[0]); selectedDate = selectedDate.setDate(selectedDate.getDate() - 3); var selectedDate2 = new Date(arrDate[1]); selectedDate2 = selectedDate2.setDate(selectedDate2.getDate() + 3); }else { var selectedDate = new Date(arrDate[0]); selectedDate = selectedDate.setDate(selectedDate.getDate() + 3); var selectedDate2 = new Date(arrDate[1]); selectedDate2 = selectedDate2.setDate(selectedDate2.getDate() - 3); } datepicker.selectDate(new Date(selectedDate)); datepicker.selectDate(new Date(selectedDate2)); } else { this.checked = false; } } }); }); 
 <link href="https://cdnjs.cloudflare.com/ajax/libs/air-datepicker/2.2.3/css/datepicker.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/air-datepicker/2.2.3/js/datepicker.js"></script> <input class="calendar_min" type="hidden"> <h4>+/- 3 дня</h4> <input type="checkbox" id="date3Range"> <input type="hidden" id="dateRange">

  • It is not clear what you want to achieve so that you cannot choose dates earlier than the current one? and what should happen in such a case, should the current date stop? - yolosora
  • Yes, you understood everything correctly, it is impossible to do such a thing, different values ​​of the date for one day - max

2 answers 2

With minimal changes in the code.

 $(document).ready(function() { var start, end; var datepicker = $('.calendar_min').datepicker({ inline: true, range: true, toggleSelected: true, minDate: new Date(), multipleDatesSeparator: ",", dateFormat: 'yyyy-mm-dd', onSelect: function(formattedDate, date, inst) { if (date) { $("#dateRange").val(formattedDate); } } }).data('datepicker'); $('.datepicker--cells').on('click', function() { $("#date3Range").prop('checked', false); }); $("#date3Range").on('click', function() { if ($('#dateRange').val()) { var str = $('#dateRange').val(); var arrDate = str.split(','); if (arrDate.length == 2) { if (this.checked) { var selectedDate = new Date(arrDate[0]); start = new Date(arrDate[0]); selectedDate = selectedDate.setDate(selectedDate.getDate() - 3); if (selectedDate < Date.now()) selectedDate = Date.now(); //добавлена проверка var selectedDate2 = new Date(arrDate[1]); end = new Date(arrDate[1]); selectedDate2 = selectedDate2.setDate(selectedDate2.getDate() + 3); } else { var selectedDate = start; var selectedDate2 = end; } datepicker.selectDate(new Date(selectedDate)); datepicker.selectDate(new Date(selectedDate2)); } else { this.checked = false; } } }); }); 
 <link href="https://cdnjs.cloudflare.com/ajax/libs/air-datepicker/2.2.3/css/datepicker.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/air-datepicker/2.2.3/js/datepicker.js"></script> <input class="calendar_min" type="hidden"> <h4>+/- 3 дня</h4> <input type="checkbox" id="date3Range"> <input type="hidden" id="dateRange">

  • Unfortunately this does not work. If you select 11-12, when checked=false it works incorrectly. Does not return to selected dates earlier - max
  • @max what exactly is wrong? - yolosora
  • I assume that new Date & Date.now gives different results - max
  • @max I mean where is the wrong behavior? made another edit - yolosora
  • please tell me what exactly was wrong? What was the problem? - max

To compare the date with the current, simply use new Date :

 new Date() > new Date(selectedDate2)
  • I tried to do this, but for some reason the dates of the global new Date and the selected number from the calendar do not match. If not difficult, can you make an example? - max