enable weekends in date picker

Question

There is a webpage which ignores weekends and does not allow the user to select a Saturday or Sunday. I wanted to enable that and while doing internet search I found a piece of code given below that I THINK may be causing this. The issue is I do not know which line to comment or what changes I must do to enable the weekends. Please help

function datepick()
{
    var weekend_strtday = <?php echo $this->weekendDatailsArr[0]['weekendstartday']; ?>;
    var weekend_endday = <?php echo $this->weekendDatailsArr[0]['weekendday']; ?>;
    $('#from_date').datepicker({
                    beforeShowDay: function(date) {
                        var day1 = date.getDay();
                        return [(day1 != weekend_strtday && day1 != weekend_endday)];
                    },
    $('#to_date').datepicker({
                    beforeShowDay: function(date) {
                        var day2 = date.getDay();
                        return [(day2 != weekend_strtday && day2 != weekend_endday)];
                    },

just remove `beforeShowDay` option from your code for both of the datepickers — Aminur Rashid, Jan 11 '17 at 08:40
should I add this as answer, so that you could accept this as correct answer? — Aminur Rashid, Jan 11 '17 at 09:42
Yes.. why not! It was because of your response I got a solution. Please go ahead ! — Sabha, Jan 11 '17 at 10:01

Nadir Laskar · Answer 1 · 2017-01-11T09:52:53.780

To use this method you need to add JQuery UI , JQUery and JQUery base theme css.

Here is a modified datepick function that will do that.

Inside datepick() these variables stores the weekdays 0(sunday) - 6(sataurday) which cannot be selected by the used.

var weekend_strtday = 0;
var weekend_endday =  6;

Inside the beforeShowDay function

A function that takes a date as a parameter and must return an array with:

[0]: true/false indicating whether or not this date is selectable

[1]: a CSS class name to add to the date's cell or "" for the default presentation

[2]: an optional popup tooltip for this date

The function is called for each day in the datepicker before it is displayed.

for more info check here

http://api.jqueryui.com/datepicker/#option-beforeShow

beforeShowDay: function(date) {
  var day1 = date.getDay();
  return [(day1 != weekend_strtday && day1 != weekend_endday)];
}

we are checking the current day if it equal to the weekends and returning a array with first index as true/false which indicates if that day is selectable or not.

function datepick()
{
    var weekend_strtday = 0;
    var weekend_endday =  6;
    $('#from_date').datepicker({
       beforeShowDay: function(date) {
         var day1 = date.getDay();
         return [(day1 != weekend_strtday && day1 != weekend_endday)];
        }
    });
  
    $('#to_date').datepicker({
      beforeShowDay: function(date) {
         var day2 = date.getDay();
         return [(day2 != weekend_strtday && day2 != weekend_endday)]
       }
    });
  
 }
datepick();

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<form>
  From_date: <input id="from_date" type="text">
  To _date: <input id="to_date" type="text">
</form>

UPDATE

To show all the days you just have to remove beforeShowDay from the configuration.

just select the input $('#from_date') and call datepicker(); method.

$('#from_date').datepicker();
$('#to_date').datepicker();

Check the snippet below,

$('#from_date').datepicker();
$('#to_date').datepicker();

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<form>
  From_date: <input id="from_date" type="text">
  To _date: <input id="to_date" type="text">
</form>

Nadir-laskar: Please read the Question, want to enable all days(all days with weekend should be enable) and in your code snippet SUNDAY and SATURDAY is disable. Which is not the answer for the question. — Draval, Jan 11 '17 at 09:11
Thank you for your reply but even your solution ignores weekends and does not allow the me to pick weekends. I want to enable this so that I can select any date. — Sabha, Jan 11 '17 at 09:29

enable weekends in date picker

1 Answers1