Customizing jQuery UI Date Picker to Restrict Dates

Question

I've made a custom date picker using jQuery UI: http://jsfiddle.net/u8fVj/

$("#input_custom_date").datepicker({
numberOfMonths: 2,
beforeShowDay: function(date) {
    //Get today's date
    var today = new Date();
    today.setHours(0,0,0,0);

    if (today.getDay() == 4 || today.getDay() == 5 || today.getDay() == 6) {
        //If today is Wednesday, Thursday, Friday don't allow Sunday to be selectable until the next week on Sunday.
        var disabledDate = new Date(today||new Date());
        disabledDate.setDate(disabledDate.getDate() + (0 - 1 - disabledDate.getDay() + 7) % 7 + 1);
        return [(date > today && date.getDay() == 0 && date.toString() != disabledDate.toString()), ''];
    }else if(today.getDay() == 0){
        //If today is Sunday, don't allow today to be selectable.
        var disabledDate = today;
        var curr_date = date.getDate();
        var curr_month = date.getMonth();
        var curr_year = date.getFullYear();
        var dDate = new Date(curr_year, curr_month, curr_date);
        return [(date > today && date.getDay() == 0 && dDate.toString() != disabledDate.toString()), ''];
    }else{
        //Everything is fine, allow all Sundays to be selectable
        var day = date.getDay();
        return [(date > today && day == 0), ''];
    }
}

});

Right now the user should only be able chose dates on a Sunday. It needs to check and see if today's date is a Wednesday, Thursday, or Friday before the upcoming Sunday, and if it is, the date picker should disable the upcoming Sunday. Likewise, if today's date is a Sunday, it should disable today in the date picker.

However, instead of only Sunday being selectable, I need to change the date picker to only allow Monday and Tuesday to be selectable. If today's date is Thursday, Friday, or Saturday, it should disable the upcoming Monday and Tuesday. If today is a Monday it should disable both Monday and Tuesday for the current week. If today's date is Tuesday it should only disable today's date.

Also, I would need to ability to throw in specific dates for holidays to be disabled, which could be hard-coded.

Not sure how to go beyond what I have now and would appreciate any help. I've been trying to get this working and can't get the logic to work out.

Explosion Pills · Accepted Answer · 2013-03-15 00:20:37Z

1

You essentially need to just move the .getDay() == 0 checks to .getDay() == 1 || .getDay() == 2, 1 and 2 being Monday and Tuesday. A similar comparison needs to be done for disableDate

disabledDate.setDate(disabledDate.getDate() + (1 - 1 - disabledDate.getDay() + 7) % 7 + 1);

The 0 - 1 is changed to 1 - 1 (not needed, but done for clarity) to get Monday. 2 - 1 yields Tuesday.

As for handling special dates, you can just store these in a <ul hidden> in the DOM and do a check on those first:

beforeShowDay: function(date) {
    //Get today's date
    var today = new Date(), specialDate = false;
    today.setHours(0,0,0,0);

    $(".special-dates li").each(function () {
        if ($(this).text() == today.toString()) {
            specialDate = true;
            return false;
        }
    });
    if (specialDate) {
        return [true, ''];
    }

http://jsfiddle.net/ExplosionPIlls/u8fVj/1/

answered Mar 15, 2013 at 0:20

Explosion Pills

192k56 gold badges341 silver badges417 bronze badges

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

2 Comments

Keith Over a year ago

Thanks Explosion! So I would need to to block out both Monday and Tuesday if "today" was a Monday or a Tuesday. In other words have it display on a Monday in the same way if "today" was a Tuesday; blocking out both Monday and Tuesday. Does that make sense? Also, I wasn't clear on how I could throw in the special date into the return dates along with checking for the Monday and Tuesday.

Keith Over a year ago

I think this might be working the way I described above for disabling Monday and Tuesday if "today" is either of those days? Not sure if it is the most efficient. Also put in the UL with the special date and couldn't get it to work, if you could help with that: jsfiddle.net/w4dMq

Collectives™ on Stack Overflow

Customizing jQuery UI Date Picker to Restrict Dates

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related