Datepicker

Datepicker is a simple, lightweight, customizable jQuery datepicker plugin that support  date range, disable the past days, start view with years, only years, without days, without years...

• denizli escort
• denizli escort
• didim escort
• düzce escort
• edirne escort
• edirne escort
• edremit escort

Source: fengyuanchen.github.io

1. INCLUDE CSS AND JS FILES

<link rel="stylesheet" href="/path/to/datepicker.css"><!-- The default theme -->
<script src="/path/to/jquery.js"></script><!-- jQuery is required -->
<script src="/path/to/datepicker.js"></script>

2. HTML

<input class="datepicker" type="text">

3. JAVASCRIPT

$(".datepicker").datepicker();

4. OPTIONS

Setup with $("#target").datepicker(options), or global setup with $.fn.datepicker.setDefaults(options).

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-date-format="mm.dd.yyyy".

Name	Type	Default	Description
autoClose	boolean	false	Auto close the picker when a date was selected.
dateFormat	string	"mm/dd/yyyy"	For example: "dd/mm/yy", "m.d.yy", "yyyy-mm-dd", "yyyy mm dd", "yyyy-mm", "mm.dd", etc.
days	array	["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"]
daysShort	array	["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
daysMin	array	["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"]
disabledClass	string	"datepicker-disabled"	Use for disabled element.
isDisabled	function	function() { return false; }	The function will be passed a date object param, and must be returned a boolean value.
itemTag	string	"li"	years, months, days items element tag.
months	array	["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]
monthsShort	array	["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
selectedClass	string	"datepicker-selected"	Use for selected element.
showMonthAfterYear	boolean	false	For title of current month. For example, you can set it "true" to transform "Feb 2020" to "2020 Feb"
template	string	View default template	It's the html template of the datepicker, and also can be customized.
tragger	string	undefined	A jQuery selector string.
viewStart	number	0	0 for "days", 1 for "months", 2 for "years".
weekStart	number	0	0 for Sunday, 1 for Monday, 2 for Tuesday, 3 for Wednesday, 4 for Thursday, 5 for Friday, 6 for Saturday.
yearSuffix	string	""	For example, it may be "年" for Chinese (zh-CN).

5. METHODS

• show - Show the datepicker
• hide - Hide the datepicker
• enable - Enable the datepicker
• disable - Disable the datepicker
• update - Update the datepicker

Usage

JavaScript:

// Methods
var $datepicker = $("#datepicker-methods"),
    $show = $("#datepicker-show"),
    $hide = $("#datepicker-hide"),
    $enable = $("#datepicker-enable"),
    $disable = $("#datepicker-disable"),
    $update = $("#datepicker-update"),
    datepicker;

// Initialize
$datepicker.datepicker();

// Get the instance
datepicker = $datepicker.data("datepicker");

// Show
$show.click(function() {
    $datepicker.datepicker("show");
});

// Hide
$hide.click(function() {
    datepicker.hide();
});

// Enable
$enable.click(function() {
    $datepicker.datepicker("enable");
});

// Disable
$disable.click(function() {
    datepicker.disable();
});

// Update
$update.click(function() {
    $datepicker.val("02/25/2020").datepicker("update").datepicker("show");
});

6. I18N

For example:

// zh-CN
$.fn.datepicker.setDefaults({
    autoClose: false,
    dateFormat: "yyyy-mm-dd",
    days: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
    daysShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
    daysMin: ["日", "一", "二", "三", "四", "五", "六"],
    months: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
    monthsShort: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
    showMonthAfterYear: true,
    viewStart: 0,
    weekStart: 1,
    yearSuffix: "年"
});

7. EXAMPLES

Add a trigger

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

Without years

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

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

Only years

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

Start view with years

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

JavaScript:

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

Start week with Monday

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

Disable the past days

<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;
    }
});

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;
    }
});

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;
    }
});