How to target array of dates in jquery datepicker

Question

I am trying to trigger a change when specific dates are clicked in datepicker. I can't figure out why it isn't working. In this example, when I click on the first array date (Feb 7), nothing happens. When I click on the second (Feb 21), I get the correct alert completed. When I click anywhere else, I get both the completed and open alerts.

jQuery(document).ready(function($){

var pastorder = ["2/7/2018", "2/21/2018"];

function eventDays(date) {
    var string = ( date.getMonth() + 1) + '/' + date.getDate() + '/' + date.getFullYear();

    if (jQuery.inArray(string, pastorder) != -1){
        return [true, "pastorder"];
    } else {
        return [true, "open" ];
    } 

} 

jQuery('.week-picker').datepicker({
    onSelect: function (dateStr) {
        var date = new Date(dateStr);
        var string = (date.getMonth() + 1) + '/' + date.getDate() + '/' + date.getFullYear();

        if ($.inArray( string, pastorder )) { // In Pastorder array
            alert( "completed" );                           
        }
        if ($.inArray( string, pastorder ) == -1) { // Not in array
            alert( "open" );                            
        }
    },

    beforeShowDay: eventDays
});

});

Here is my first codepen.

I also tried targeting the css without luck.

        onSelect: function (dateStr) {
        var date = new Date(dateStr);
        var string = (date.getMonth() + 1) + '/' + date.getDate() + '/' + date.getFullYear();

        if ($(this).hasClass( "pastorder")) {
            alert( "completed" );                           
        } 
        if ($(this).hasClass( "open")) {
            alert( "open" );                            
        }

    },

Here is my second codepen.

Hassan Imam · Accepted Answer · 2018-02-03 17:30:21Z

2

$.inArray( ) searchs for a specified value within an array and return its index (or -1 if not found).

In your case, $.inArray( string, pastorder) is returning 0 when date is 2/7/2018 and 0 is falsy in Javascript, so the if block is not executing.

Update your if condition to if ($.inArray( string, pastorder) > -1).

var pastorder = ["2/7/2018", "2/21/2018"];
jQuery('.week-picker').datepicker({
  onSelect: function (dateStr) {
    var date = new Date(dateStr);
    var string = (date.getMonth() + 1) + '/' + date.getDate() + '/' + date.getFullYear();
    if ($.inArray( string, pastorder) > -1) { // In Pastorder array
        alert( "completed" );                           
    }
    if ($.inArray( string, pastorder ) == -1) { // Not in array
        alert( "open" );                            
    }
   },
   beforeShowDay: eventDays
  });
});

answered Feb 3, 2018 at 17:30

Hassan Imam

22.6k6 gold badges45 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

aleks1217 Over a year ago

Thank you! Works like a charm. I filled it out with the rest of my code and it's working perfectly.

Collectives™ on Stack Overflow

How to target array of dates in jquery datepicker

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related