Jquery UI datepicker to allow dynamic specific days of week only

Question

I would like to disable certain days in a jQuery UI datepicker based on the days entered in one of the input boxes by the user.

If i enter MWF it should only allow me to only select the dates which falls on either "M"onday , "W"ednesday ot "F"riday

I am able to dynamically construct the return value sting which needs to be set in the return statement.

 for (var j=0; j < arr.length; j++)
      mystr = mystr + "day != " + arr[j] + " && ";

      mystr = mystr.substring(0, mystr.length - 3);

This gives me the following text in mystr variable:

day != 3 && day != 4 && day != 6 

which needs to passed on to the return statement like :

​$("#datepicker").datepicker({
    beforeShowDay: function(date) {
        var day = date.getDay();
        return [(mystr)];
    }
})​​​​​;​

This is not working....

I am able to disable the days i want if i explicitly set it in return statement. But i need to dynamically restrict days selection in the datepicker based on days entered in the text box. I can get the days dynamically and also have the dynamic return statement ready. Its not working.

FULL CODE :

            var batchdays = ['M', 'T', 'W', 'H', 'F', 'S'];
            var batchcode= "MWF";
            var batchdaysarray = batchcode.replace(/\d+/g, '').split('');
            var arr = [];
            var arrayLength = batchdaysarray.length;

            for (var i = 0; i < arrayLength; i++) {
                    if ($.inArray(batchdaysarray[i], batchdays) != -1) {
                        arr.push($.inArray(batchdaysarray[i], batchdays)+1);
                    }
            }

            var mystr = '';

            for (var j=0; j < arr.length; j++)
                mystr = mystr + "day != " + arr[j] + " && ";

            mystr = mystr.substring(0, mystr.length - 3);

            alert(mystr);
            console.log(mystr);

            $('#actual_start_dt').datepicker({
                dateFormat: 'dd-mm-yy',
                prevText: '<i class="fa fa-chevron-left"></i>',
                nextText: '<i class="fa fa-chevron-right"></i>',
                beforeShowDay: function(date) {
                    var day = date.getDay();
                    return [(mystr)];
                }
            });

Please help

Answer 1

I probably think that you have already resolved this issue on your own. The problem with the code you have provided is,

return [(mystr)];

According to the jquery-ui documentation beforeShowDay is,

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

1. true/false indicating whether or not this date is selectable

2. a CSS class name to add to the date's cell or "" for the default presentation

3. an optional popup tooltip for this date

In your example, you are however passing string,

 for (var j=0; j < arr.length; j++)
    mystr = mystr + "day != " + arr[j] + " && ";

 mystr = mystr.substring(0, mystr.length - 3); 

which doesn't transpose as statement when used in return [(mystr)];

Instead you can use following,

 beforeShowDay: function(date) {
      var day = date.getDay();
      return [($.inArray(day, arr) != -1)];
  }

Please see this JSFiddle Demoenter link description here.

I hope this is what you are looking for.