@chenfengyuan/datepicker
Advanced tools
A simple jQuery datepicker plugin.
dist/
├── datepicker.css
├── datepicker.min.css (compressed)
├── datepicker.js (UMD)
├── datepicker.min.js (UMD, compressed)
├── datepicker.common.js (CommonJS, default)
└── datepicker.esm.js (ES Module)
npm install @chenfengyuan/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).
BooleanfalseShow the datepicker automatically when initialized.
BooleanfalseHide the datepicker automatically when picked.
BooleanfalsePick the initial date automatically when initialized.
BooleanfalseEnable 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.
Element or String(selector)nullA element for putting the datepicker. If not set, the datepicker will be appended to document.body by default.
Only works when the
inlineoption set totrue.
Element or String(selector)nullA element for triggering the datepicker.
String''The ISO language code. If not set, will use the built-in language (en-US) by default.
You should define the language first. View the I18n section for more information or check out the
i18nfolder for available languages.
$().datepicker({
language: 'en-GB'
});
String'mm/dd/yyyy'yyyy, yymm, mdd, dThe date string format.
$().datepicker({
format: 'yyyy-mm-dd'
});
Date or StringnullThe initial date. If not set, will use the current date by default.
$().datepicker({
date: new Date(2014, 1, 14) // Or '02/14/2014'
});
Date or StringnullThe start view date. All the dates before this date will be disabled.
Date or StringnullThe end view date. All the dates after this date will be disabled.
Number00: days1: months2: yearsThe start view when initialized.
Number00: Sunday1: Monday2: Tuesday3: Wednesday4: Thursday5: Friday6: SaturdayThe start day of the week.
BooleanfalseShow year before month on the datepicker header
String''A string suffix to the year number.
$().datepicker({
yearSuffix: '年'
});
Array['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']Days' name of the week.
Array['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']Shorter days' name.
Array['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']Shortest days' name.
Array['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']Months' name.
Array['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']Shorter months' name.
String'li'A element tag for each item of years, months and days.
String'muted'A class (CSS) for muted item.
String'picked'A class (CSS) for picked item.
String'disabled'A class (CSS) for disabled item.
String'highlighted'A class (CSS) for highlight date item.
String<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.
Number10The offset top or bottom of the datepicker from the element.
Number1The CSS z-index style for the datepicker.
Functionnullfilter(date, view)
date: the date for checking.view: the the current view, one of day, month or year.Filter each date item. If return a false value, the related date will be disabled.
var now = Date.now();
$().datepicker({
filter: function(date, view) {
if (date.getDay() === 0 && view === 'day') {
return false; // Disable all Sundays, but still leave months/years, whose first day is a Sunday, enabled.
}
}
});
FunctionnullA shortcut of the "show.datepicker" event.
FunctionnullA shortcut of the "hide.datepicker" event.
FunctionnullA 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):
Numbershort (optional):
Booleanfalse(return value):
StringGet 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):
Numbershort (optional):
Booleanfalsemin (optional):
Booleanfalse(return value):
StringGet 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):
Booleanfalse(return value):
Date or StringGet the current date.
$().datepicker('getDate'); // date object
$().datepicker('getDate', true); // '02/14/2014'
Date or StringSet the current date with a new date.
$().datepicker('setDate', new Date(2014, 1, 14));
$().datepicker('setDate', '02/14/2014');
Date or String or nullSet the start view date with a new date.
Date or String or nullSet the end view date with a new date.
StringParse a date string with the set date format.
$().datepicker('parseDate', '02/14/2014'); // date object
DateFormat 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:
Dateevent.view:
String'''year', 'month', 'day'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>
Maintained under the Semantic Versioning guidelines.
FAQs
A simple jQuery datepicker plugin.
The npm package @chenfengyuan/datepicker receives a total of 3,292 weekly downloads. As such, @chenfengyuan/datepicker popularity was classified as popular.
We found that @chenfengyuan/datepicker demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.
Security News
Research
Socket researchers found a malicious Maven package impersonating the legitimate ‘XZ for Java’ library, introducing a backdoor for remote code execution.