A simple jQuery datepicker plugin.
- Features
- Main
- Getting started
- Options
- Methods
- Events
- I18n
- No conflict
- Browser support
- Versioning
- License
- Supports options
- Supports methods
- Supports events
- Supports inline mode
- Supports touch (mobile)
- Supports internationalization
- Cross-browser support
dist/
├── datepicker.css ( 4 KB)
├── datepicker.min.css ( 4 KB)
├── datepicker.js (38 KB)
└── datepicker.min.js (15 KB)
Three quick start options are available:
- Download the latest release.
- Clone the repository:
git clone https://github.com/fengyuanchen/datepicker.git
. - Install with NPM:
npm install fengyuanchen/datepicker
. - Install with Bower:
bower install fengyuanchen/datepicker
.
Include files:
<script src="/path/to/jquery.js"></script><!-- jQuery is required -->
<link href="/path/to/datepicker.css" rel="stylesheet">
<script src="/path/to/datepicker.js"></script>
Initialize with $.fn.datepicker
method.
<input data-toggle="datepicker">
<textarea data-toggle="datepicker"></textarea>
<div data-toggle="datepicker"></div>
$('[data-toggle="datepicker"]').datepicker();
You may set datepicker options with $().datepicker(options)
.
If you want to change the global default options, You may use $.fn.datepicker.setDefaults(options)
.
- Type:
Boolean
- Default:
false
Show the datepicker automatically when initialized.
- Type:
Boolean
- Default:
false
Hide the datepicker automatically when picked.
- Type:
Boolean
- Default:
false
Pick the initial date automatically when initialized.
- Type:
Boolean
- Default:
false
Enable inline mode.
If the element is not an input element, will append the datepicker to the element.
If the container
option is set, will append the datepicker to the container.
- Type:
Element
orString
(selector) - Default:
null
A element for putting the datepicker. If not set, the datepicker will be appended to document.body
by default.
- Type:
Element
orString
(selector) - Default:
null
A element for triggering the datepicker.
- Type:
String
- Default:
''
The ISO language code. If not set, will use the built-in language (en-US) by default.
$().datepicker({
language: 'en-GB'
});
- Type:
String
- Default:
'mm/dd/yyyy'
- Available date placeholders:
- Year:
yyyy
,yy
- Month:
mm
,m
- Day:
dd
,d
- Year:
The date string format.
$().datepicker({
format: 'yyyy-mm-dd'
});
- Type:
Date
orString
- Default:
null
The initial date. If not set, will use the current date by default.
$().datepicker({
date: new Date(2014, 1, 14) // Or '02/14/2014'
});
- Type:
Date
orString
- Default:
null
The start view date. All the dates before this date will be disabled.
- Type:
Date
orString
- Default:
null
The end view date. All the dates after this date will be disabled.
- Type:
Number
- Default:
0
- Options:
0
: days1
: months2
: years
The start view when initialized.
- Type:
Number
- Default:
0
- Options:
0
: Sunday1
: Monday2
: Tuesday3
: Wednesday4
: Thursday5
: Friday6
: Saturday
The start day of the week.
- Type:
Boolean
- Default:
false
Show year before month on the datepicker header
- Type:
String
- Default:
''
A string suffix to the year number.
$().datepicker({
yearSuffix: '年'
});
- Type:
Array
- Default:
['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
Days' name of the week.
- Type:
Array
- Default:
['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
Shorter days' name.
- Type:
Array
- Default:
['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
Shortest days' name.
- Type:
Array
- Default:
['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
Months' name.
- Type:
Array
- Default:
['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
Shorter months' name.
- Type:
String
- Default:
'li'
A element tag for each item of years, months and days.
- Type:
String
- Default:
'muted'
A class (CSS) for muted item.
- Type:
String
- Default:
'picked'
A class (CSS) for picked item.
- Type:
String
- Default:
'disabled'
A class (CSS) for disabled item.
- Type:
String
- Default:
<div class="datepicker-container">
<div class="datepicker-panel" data-view="years picker">
<ul>
<li data-view="years prev">‹</li>
<li data-view="years current"></li>
<li data-view="years next">›</li>
</ul>
<ul data-view="years"></ul>
</div>
<div class="datepicker-panel" data-view="months picker">
<ul>
<li data-view="year prev">‹</li>
<li data-view="year current"></li>
<li data-view="year next">›</li>
</ul>
<ul data-view="months"></ul>
</div>
<div class="datepicker-panel" data-view="days picker">
<ul>
<li data-view="month prev">‹</li>
<li data-view="month current"></li>
<li data-view="month next">›</li>
</ul>
<ul data-view="week"></ul>
<ul data-view="days"></ul>
</div>
</div>
The template of the datepicker.
Note: All the data-view
attributes must be set when you customize it.
- Type:
Number
- Default:
10
The offset top or bottom of the datepicker from the element.
- Type:
Number
- Default:
1
The CSS z-index
style for the datepicker.
- Type:
Function
- Default:
null
Filter each date item. If return a false
value, the related date will be disabled.
var now = Date.now();
$().datepicker({
filter: function(date) {
if (date.getDay() === 0) {
return false; // Disable all Sundays
}
}
});
- Type:
Function
- Default:
null
A shortcut of the "show.datepicker" event.
- Type:
Function
- Default:
null
A shortcut of the "hide.datepicker" event.
- Type:
Function
- Default:
null
A shortcut of the "pick.datepicker" event.
Common usage:
$().datepicker('method', argument1, , argument2, ..., argumentN);
Show the datepicker.
Hide the datepicker.
Update the datepicker with the value or text of the current element.
Pick the current date to the element.
Reset the datepicker.
-
month (optional):
- Type:
Number
- Default: the month of the current date
- Type:
-
short (optional):
- Type:
Boolean
- Default:
false
- Get the shorter month name
- Type:
-
(return value):
- Type:
String
- Type:
Get the month name with given argument or the current date.
$().datepicker('getMonthName'); // 'January'
$().datepicker('getMonthName', true); // 'Jan'
$().datepicker('getMonthName', 11); // 'December'
$().datepicker('getMonthName', 11, true); // 'Dec'
-
day (optional):
- Type:
Number
- Default: the day of the current date
- Type:
-
short (optional):
- Type:
Boolean
- Default:
false
- Get the shorter day name
- Type:
-
min (optional):
- Type:
Boolean
- Default:
false
- Get the shortest day name
- Type:
-
(return value):
- Type:
String
- Type:
Get the day name with given argument or the current date.
$().datepicker('getDayName'); // 'Sunday'
$().datepicker('getDayName', true); // 'Sun'
$().datepicker('getDayName', true, true); // 'Su'
$().datepicker('getDayName', 6); // 'Saturday'
$().datepicker('getDayName', 6, true); // 'Sat'
$().datepicker('getDayName', 6, true, true); // 'Sa'
-
formatted (optional):
- Type:
Boolean
- Default:
false
- Get a formatted date string
- Type:
-
(return value):
- Type:
Date
orString
- Type:
Get the current date.
$().datepicker('getDate'); // date object
$().datepicker('getDate', true); // '02/14/2014'
- date:
- Type:
Date
orString
- Type:
Set the current date with a new date.
$().datepicker('setDate', new Date(2014, 1, 14));
$().datepicker('setDate', '02/14/2014');
- date:
- Type:
Date
orString
- Type:
Set the start view date with a new date.
- date:
- Type:
Date
orString
- Type:
Set the end view date with a new date.
- date:
- Type:
String
- Type:
Parse a date string with the set date format.
$().datepicker('parseDate', '02/14/2014'); // date object
- date:
- Type:
Date
- Type:
Format a date object to a string with the set date format.
$().datepicker('formatDate', new Date(2014, 1, 14)); // '02/14/2014'
Destroy the datepicker and remove the instance from the target element.
This event fires when starts to show the datepicker.
This event fires when starts to hide the datepicker.
-
event.date:
- Type:
Date
- The current date
- Type:
-
event.view:
- Type:
String
- Default:
''
- Options:
'year'
,'month'
,'day'
- The current visible view
- Type:
This event fires when start to pick a year, month or day.
$().on('pick.datepicker', function (e) {
if (e.date < new Date()) {
e.preventDefault(); // Prevent to pick the date
}
});
// datepicker.zh-CN.js
$.fn.datepicker.languages['zh-CN'] = {
format: 'yyyy年mm月dd日',
days: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
daysShort: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
daysMin: ['日', '一', '二', '三', '四', '五', '六'],
months: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
monthsShort: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
weekStart: 1,
startView: 0,
yearFirst: true,
yearSuffix: '年'
};
<script src="/path/to/datepicker.js"></script>
<script src="/path/to/datepicker.zh-CN.js"></script>
<script>
$().datepicker({
language: 'zh-CN'
});
</script>
If you have to use other plugin with the same namespace, just call the $.fn.datepicker.noConflict
method to revert to it.
<script src="other-plugin.js"></script>
<script src="datepicker.js"></script>
<script>
$.fn.datepicker.noConflict();
// Code that uses other plugin's "$().datepicker" can follow here.
</script>
- Chrome (latest 2)
- Firefox (latest 2)
- Internet Explorer 8+
- Edge (latest 2)
- Opera (latest 2)
- Safari (latest 2)
As a jQuery plugin, you also need to see the jQuery Browser Support.
Maintained under the Semantic Versioning guidelines.