jQuery datePicker Plugin Examples

Default $('#textDefault').datePicker();

prev, next $('#textPrevNext').datePicker({ prev: '<u>P</u>', next: '<u>N</u>' });

changeMonthYear $('#textChangeMonthYear').datePicker({ changeMonthYear: true });

minDate, maxDate for integer

minDate, maxDate for string

$('#textMinMaxDate1').datePicker({ minDate: -5, maxDate: 5 });
$('#textMinMaxDate2').datePicker({ minDate: '2014-10-20', maxDate: '2014-10-25' });

monthCount $('#textMonthCount').datePicker({ monthCount: 3 });

holiday for array of string

holiday for function

$('#textHoliday1').datePicker({
    monthCount: 2,
    holiday: ['2014-01-01', '2015-01-01', '2016-01-01']
});
$('#textHoliday2').datePicker({
    monthCount: 3,
    holiday: function(moment) {
        return moment.date() % 5 == 0;
    }
});

disable when day of 2, 4, 6, ... disable when day of 3, 6, 9, ... disable when day of 5, 10, 15, ...

disabled for other condition

disabled for other condition and min/max date

$('#textDisable1').datePicker({
    monthCount: 2,
    disabled: function(moment) {
        var division = $('input[name=radioDisabled]:checked').val();
        return moment.date() % division == 0;
    }
});
$('#textDisable2').datePicker({
    minDate: -20,
    maxDate: +20,
    monthCount: 3,
    disabled: function(moment) {
        var division = $('input[name=radioDisabled]:checked').val();
        return moment.date() % division == 0;
    }
});

From: To:

Range1: Range2: Range3: Range4:

RangeDsabled1: RangeDsabled2: RangeDsabled3:

$('#textRangeFrom').datePicker({ minDate: 0, monthCount: 3, range: '#textRangeTo' });
$('#textRange1').datePicker({
    minDate: 0,
    monthCount: 3,
    range: ['#textRange2', '#textRange3', '#textRange4'],
    disabled: function(moment) {
        return moment.date() % 8 == 0;
    }
});
$('#textRangeDisabled1').datePicker({
    minDate: 0,
    monthCount: 3,
    range: ['#textRangeDisabled2', '#textRangeDisabled3'],
    disabled: [
        function(moment) {
            return 10 < moment.date();
        },
        function(moment) {
            return moment.date() < 10 || 20 < moment.date();
        },
        function(moment) {
            return moment.date() < 20;
        }
    ]
});

You can set a weekdayName, directly. Or you can change locale of Moment.js using moment.locale('ko'), before initialize.

weekdayName $('#textWeekdayName').datePicker({ weekdayName: [ 'a', 'b', 'c', 'd', 'e', 'f', 'g' ] });

jQuery datePicker Plugin Examples

Default functionality

prev, next

changeMonthYear

minDate, maxDate

monthCount

holiday

disabled

range

weekdayName