Using datepicker in jquery to keep start date less than end date and allowing no weekends selection

Viewed 47

I am new to jQuery and JSP. I am trying to make a booking system which has two dates - start date and end date. I require the following functionalities to be included in the system.

  1. Start date should be less than end date and end date should be more than start date.
  2. Booking should be allowed only on weekdays.
  3. Format of date should be dd-mm-yy. I was able to achieve all these functionalities individually but when I merge them either of them does not work. Here is the jQuery code for start date should be less than end date and end date should be more than start date.
<script>
    
$(document).ready(function () {
        $("#datepick").datepicker({
            onSelect: function (selected) {
                var dt = new Date(selected);
                dt.setDate(dt.getDate());
                $("#datepick1").datepicker("option", "minDate", dt);
            }
        });
        $("#datepick1").datepicker({
            onSelect: function (selected) {
                var dt = new Date(selected);
                dt.setDate(dt.getDate());
                $("#datepick").datepicker("option", "maxDate", dt);
            }
        });
    });
</script>

And this is the jQuery code for disabling weekends and changing the date format.

<script>
$(document).ready(function () {
    $("#datepick").datepicker({
        dateFormat: "dd-mm-yy",
        beforeShowDay: $.datepicker.noWeekends
    });
    
    $("#datepick1").datepicker({
        dateFormat: "dd-mm-yy",
        beforeShowDay: $.datepicker.noWeekends
    });
    
});
</script>

I tried combining these two but either one of the functionality does not work. Thank you in advance!!!

1 Answers

You can easily achieve that with just a bit of CSS:

th.ui-datepicker-week-end,
td.ui-datepicker-week-end {
    pointer-events: none;
    opacity: 0.5;
}

This will target datepicker CSS class weekends and set it to not clickable and opacity same as you would using datepicker JS.

And to get around date format not working use this:

var res = selected.split("-");
var newdate = [];
newdate.push(res[2],res[1],res[0] ); 

datepicker excepts 2015-03-25 and outputs this kind of format in selected:

2015-03-25T12:00:00-06:30

so when you set your date format it does not produce it right in . So you split your format, and rearrange it in your case from: 22-07-2020 to 2020-07-22 then datepicker new date function starts working again.

So now you can use your date range function as before just with added dateFormat: "dd-mm-yy", and code above. Example:

$(document).ready(function() {
  $("#datepick").datepicker({
    dateFormat: "dd-mm-yy",
    onSelect: function(selected) {

    var res = selected.split("-");
    var newdate = [];
    newdate.push(res[2],res[1],res[0] ); 
    
      var dt = new Date(newdate);     
      dt.setDate(dt.getDate());
      $("#datepick1").datepicker("option", "minDate", dt);
    }
  });
  $("#datepick1").datepicker({
    dateFormat: "dd-mm-yy",
    onSelect: function(selected) {

    var res = selected.split("-");
    var newdate = [];
    newdate.push(res[2],res[1],res[0] ); 
    
      var dt = new Date(newdate);
      dt.setDate(dt.getDate());
      $("#datepick").datepicker("option", "maxDate", dt);
    }
  });
});
th.ui-datepicker-week-end,
td.ui-datepicker-week-end {
  pointer-events: none;
  opacity: 0.5;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<input type="text" id="datepick" name="date"><input type="text" id="datepick1" name="date">

Related