How to disable selected days?

Question

I have booking form to reservastion hotels so I want to disabled selected days how can I do that ? I mean if I select 20 from first datepicker so 20 must be unselectable in second datepicker

function datePicker() {
  var dateFormat = "DD/MM/YY",
    from = $("#checkin,.checkin").datepicker({
      //numberOfMonths: 2,
      firstDay: 1,
      minDate: 0,
      ignoreReadonly: true,
      showButtonPanel: true,
      closeText: 'Temizle',
      onClose: function(dateText, inst) {
        if ($(window.event.srcElement).hasClass('ui-datepicker-close')) {
          document.getElementById(this.id).value = '';
          //$('.checkin,#checkin,#checkout,.checkout').val('');
        }
      },
      onSelect: function(selectedDate) {
        window.setTimeout($.proxy(function() {
          $(this).parents(".book-holiday").find("#checkout,.checkout").focus();
        }, this), 10);

        var date2 = $('#checkin,.checkin').datepicker('getDate');
        date2.setDate(date2.getDate() + 1);
        $('#checkout,.checkout').datepicker('setDate', date2);
        //sets minDate to dt1 date + 1
        $('#checkout,.checkout').datepicker('option', 'minDate', date2);
      },
      isTo1: true,
      beforeShow: function(input, inst) {

        $(this).datepicker("widget").addClass("main-datepicker");
        // controlDatepicker(".checkin,#checkin");
        /*setTimeout(function() {
            inst.dpDiv.css({
                top: $(".datepicker").offset().top + 35,
                left: $(".datepicker").offset().left
            });
        }, 0);*/
      }
    });
  $("#checkout,.checkout").datepicker({
    firstDay: 1,
    minDate: 0,
    ignoreReadonly: true,
    showButtonPanel: true,
    closeText: 'Temizle',
    onClose: function(dateText, inst) {
      if ($(window.event.srcElement).hasClass('ui-datepicker-close')) {
        document.getElementById(this.id).value = '';
        //$('.checkin,#checkin,#checkout,.checkout').val('');
      }
      var dt1 = $('#checkin.checkin').datepicker('getDate');
      console.log(dt1);
      var dt2 = $('#checkout,.checkout').datepicker('getDate');
      if (dt2 <= dt1) {
        var minDate = $('#checkin,.checkin').datepicker('option', 'minDate');
        $('#checkin,.checkout').datepicker('setDate', minDate);
      }
    },
    ignoreReadonly: true,
    isTo1: true,
    onSelect: function() {
      //$(this).parents(".book-holiday").find(".popover-wrapper").addClass("open");
    },
    beforeShow: function(input, inst) {
      /* $(this).datepicker("widget").addClass("main-datepicker");
       controlDatepicker(".checkin,#checkin");
       setTimeout(function() {
           inst.dpDiv.css({
               top: $(".datepicker").offset().top + 35,
               left: $(".datepicker").offset().left
           });
       }, 0);*/
    }

  });

}


datePicker();

<link href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet" /> From : <input type="text" class="checkin"> To: <input type="text" class="checkout">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

var specialDays = {'08/01/2012': 'booked', '08/02/2012': 'enquiry'}; $('#date').datepicker({beforeShowDay: function(date) { date = $.datepicker.formatDate('mm/dd/yy', date); var special = specialDays[date] || ''; return [special == '', special]; }}); — Dasma, Jul 19 '17 at 09:00

score 2 · Accepted Answer · answered Jul 19 '17 at 08:56

2

Try something like this:

$("#dt1").datepicker({
            dateFormat: "dd-M-yy",
            minDate: 0,
            onSelect: function (date) {
                var date2 = $('#dt1').datepicker('getDate');
                date2.setDate(date2.getDate() + 1);
                $('#dt2').datepicker('setDate', date2);
                //sets minDate to dt1 date + 1
                $('#dt2').datepicker('option', 'minDate', date2);
            }
        });
        $('#dt2').datepicker({
            dateFormat: "dd-M-yy",
            onClose: function () {
                var dt1 = $('#dt1').datepicker('getDate');
                console.log(dt1);
                var dt2 = $('#dt2').datepicker('getDate');
                if (dt2 <= dt1) {
                    var minDate = $('#dt2').datepicker('option', 'minDate');
                    $('#dt2').datepicker('setDate', minDate);
                }
            }
        });

Working Fiddle

answered Jul 19 '17 at 08:56

Mayank Pandeyz

25,704
4
40
59

Hi, I tried your code is work but I guess it have a littler bug.when I select first day it select automatically second day.I edited my post. – ani_css Jul 19 '17 at 09:04
It's not a bug, its the functionality implemented in the fiddle and you can remove this by commenting some lines. Check the updated fiddle here: http://jsfiddle.net/PPSh3/2768/ – Mayank Pandeyz Jul 19 '17 at 09:06
but then I can selected past days again ? which code shoul I remove ? – ani_css Jul 19 '17 at 09:09
great Mayank thanks last question I have to learn it is a just question: can I set class first and last selected on datepicker ? – ani_css Jul 19 '17 at 09:19
I think so, just google it and you will get so many help links – Mayank Pandeyz Jul 19 '17 at 09:20
I don't know 'keyword' how can I search on google, thanks again it works very well – ani_css Jul 19 '17 at 09:21

score 0 · Answer 2 · answered Jul 19 '17 at 08:58

0

Maybe you could try to store date and compare them when action is triggered? In that case you will not trigger any action when condition is not fulfilled.

Or you could use something iike that: Jquery UI datepicker. Disable array of Dates

answered Jul 19 '17 at 08:58

Kamil Mikosz

11
2

I only need to selected days I guess there is no reason to use arrays – ani_css Jul 19 '17 at 08:59

How to disable selected days?

2 Answers2