Datepicker set to today's date and disable weekends

Question

<div class="form-group">
    <div class="col-md-4 col-md-offset-4">
        <label>Start Date</label>
        <script>
            //$(".selector").datepicker({ beforeShowDay: $.datepicker.noWeekends })
            $(".datepicker").datepicker({ beforeShowDay: $.datepicker.noWeekends })
            //$(".date").datepicker("setDate", new Date());
        </script>
        <input type="date" class="form-control" id="startDate" />
    </div>
</div>

How do I set the start date of the calendar to be today's date? I tried the commented out codes already and they don't work. Or is it possible to set the input min=datetime.today or something? Also, how do I disable weekends? I've tried searching on how to do it but the codes don't work for me.

My first time using codes with <script> tags, are there like any things I have to add to my code? Because it seems like all the jquery (?) codes work for others but not for me so I feel like I'm missing something so it's probably not working.

And one last question. If I want to also disable public holidays, how do I do it if the public holidays are stored in a excel file?

EDIT

 $(document).ready(function(){
    $('#startDate').datepicker({
    minDate: new Date(),
    beforeShowDay: $.datepicker.noWeekends
    });
})

@StephenMuecke the latest version from http://jqueryui.com/download/ — , Nov 13 '15 at 03:07
For the public holidays, you would need to pass an array of the dates to the view, assign it to a javascript variable and then use the `beforeShowDay` option as per [this answer](http://stackoverflow.com/questions/15400775/jquery-ui-datepicker-disable-array-of-dates) — , Nov 13 '15 at 03:15

score 2 · Accepted Answer · answered Nov 13 '15 at 05:20

You have an inline script where your attempting to select an element before the element exists in the DOM. In addition the selector is referring to an element which does not exist. Move you script to the bottom of the page (immediately before the closing </body> tag), or wrap it in $( document ).ready(). The script should be

$(document).ready(function(){
    $('#startDate').datepicker({
        minDate: new Date(),
        beforeShowDay: $.datepicker.noWeekends
    });
})

which will set the minimum date to today's date, and disable selection of weekend dates. To set a specific date, use minDate: new Date(2015, 10, 4) which will set the minimum date to 4th November 2105 (note that months are zero based, so January is 0).

To include additional non selectable dates, you can create a function to pass to the beforeShowDay option. To start, pass an array of the dates to the view, as a view model property or ViewBag property and assign it to a javascript variable which might result in say

var dates = ['11/16/2015', '11/25/2015'];

Then build a new array of their times

var holidays = [];
for (i = 0; i < dates.length; i++) {
    var vals = dates[i].split('/');
    var y = parseInt(vals[2]);
    var m = parseInt(vals[0]) - 1;
    var d = parseInt(vals[1]);
    var holiday = new Date(y, m, d);
    holidays.push(holiday.getTime());
}

and create the following functions

function noHoliday(date) {
    if(holidays.indexOf(date.getTime()) > -1) {
       return [false];
    } else {
       return [true];
    }
}

function noWeekendsOrHolidays(date) {
    var noWeekend = $.datepicker.noWeekends(date);
    if (noWeekend[0]) {
        return noHoliday(date);
    } else {
        return noWeekend;
    }
}

Then modify the datepicker script to

$('#startDate').datepicker({
    minDate: new Date(),
    beforeShowDay: noWeekendsOrHolidays
});

Refer this fiddle for a working example

score 0 · Answer 2 · answered Nov 13 '15 at 03:10

0

To your first question, assuming you're using JQueryUI:

$('.datepicker').datepicker({
      minDate: new Date()
});

should do it for you.

As for the second, I will have to research that a bit because I've wondered about that, too. Excel might a little awkward but can easily be exported to something better suited for the web. It will probably involve attaching a listener to your 'change' event and fetching the holidays for the current month and then doing... something.

answered Nov 13 '15 at 03:10

David

815
8
18

I tried it but it doesn't work too >< Are there anything else I have to add when using the datepicker? – Nov 13 '15 at 03:40
@eyeballs, Are you sure you have included the correct scripts? Refer [this fiddle](http://jsfiddle.net/rw5atcb4/) for an example – Nov 13 '15 at 03:55
@eyeballs, Have just noticed you have an inline script (dreadful practice). Move it to the bottom of the page. Your selector is `$(".datepicker")` which does not even exist (its `$("#startDate")`) and the script needs to be after the element or wrapped in `document.ready()` – Nov 13 '15 at 03:58
@StephenMuecke Edited my question and added in how i rewrote it. Is it right? It still doesn't work for me > – Nov 13 '15 at 04:17
@eyeballs, That should work fine (did you look at the fiddle?). – Nov 13 '15 at 04:22

Datepicker set to today's date and disable weekends

2 Answers2