代码拉取完成，页面将自动刷新
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.
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手