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)];
                    },

Answer 1

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>