jQuery Fengyuan Chen Datepicker Plugin Demos

Add a trigger

HTML:

<input type="text" datepicker data-trigger="#show-datepicker">
<span id="show-datepicker"></span>

Demo:

Without years

HTML:

<input type="text" datepicker data-date-format="m.d">

Demo:

Without days

HTML:

<input type="text" datepicker data-date-format="yyyy.mm">

Demo:

Only years

HTML:

<input type="text" datepicker data-date-format="yyyy">

Demo:

Start view with years

HTML:

<input id="datepicker-view-start" type="text">

JavaScript:

$("#datepicker-view-start").datepicker({
    autoClose: true,
    viewStart: 2
});

Demo:

Start week with Monday

HTML:

<input type="text" datepicker data-week-start="1">

Demo:

Disable the past days

HTML:

<input id="datepicker-disable-past" type="text">

JavaScript:

var now = Date.now();

$("#datepicker-disable-past").datepicker({
    isDisabled: function(date) {
        return date.valueOf() < now ? true : false;
    }
});

Demo:

Disable all of the Wednesday

HTML:

<input id="datepicker-disable-wednesday" type="text">

JavaScript:

$("#datepicker-disable-wednesday").datepicker({
    isDisabled: function(date) {
        return date.getDay() === 3 ? true : false;
    }
});

Demo:

Set a date range

HTML:

<input id="datepicker-date-range" type="text" value="02/15/2020">

JavaScript:

var minDate = (new Date(2020, 1, 15)).getTime(),
    maxDate = (new Date(2020, 2, 25)).getTime();

$("#datepicker-date-range").datepicker({
    isDisabled: function(date) {
        date = date.getTime();

        return (date < minDate || date > maxDate) ? true : false;
    }
});

Demo:

Methods:

Demo: