当前位置:主页 > JavsScript库 > 日期 / 时间 >

开发人员友好的纯JavaScript日期选择器 - thedatepicker
栏目分类:日期 / 时间   发布日期:2021-08-30   浏览次数:

thedatepicker 是一个简单的、可定制的、对开发人员友好的日期选择器插件,用纯(vanilla)JavaScript 实现。

使用:

将样式表the-datepicker.css和 JavaScriptthe-datepicker.js插入到 HTML 文件中。

<link href="dist/the-datepicker.css" rel="stylesheet" />
<script src="dist/the-datepicker.js"></script>

创建一个普通的文本字段来接受日期值。

<input type="text" id="example">

将日期选择器附加到文本字段。完毕。

const input = document.getElementById('example');
const datepicker = new TheDatepicker.Datepicker(input);
datepicker.render();

可能的选项、函数和 API 方法。

// 设置初始日期
datepicker.options.setInitialDate();
 
// 设置初始月份
datepicker.options.setInitialMonth();
 
// 隐藏模糊
datepicker.options.setHideOnBlur();
 
// 隐藏选择
datepicker.options.setHideOnSelect();
 
// 设置日期格式,egjn Y
datepicker.options.setInputFormat();
 
// 设置一周的第一天
datepicker.options.setFirstDayOfWeek();
 
// 设置最小/最大日期
datepicker.options.setMinDate();
datepicker.options.setMaxDate();
 
// 限制年份选择
datepicker.options.setDropdownItemsLimit(1900, 2100);
 
// 显示/隐藏超出月份的日期
datepicker.options.setDaysOutOfMonthVisible();
 
// 固定行数
datepicker.options.setFixedRowsCount();
 
// 切换选择
datepicker.options.setToggleSelection();
 
// 显示取消选择按钮
datepicker.options.setShowDeselectButton();
 
// 显示关闭按钮
datepicker.options.setShowCloseButton();
 
// 显示重置按钮
datepicker.options.setShowResetButton();
 
// 允许为空
datepicker.options.setAllowEmpty();
 
// 设置标题
datepicker.options.setTitle();
 
// 将月份选择器显示为下拉菜单
datepicker.options.setMonthAsDropdown();
 
// 将年份选择器显示为下拉列表
datepicker.options.setYearAsDropdown();
 
datepicker.options.setMonthAndYearSeparated();
datepicker.options.setPositionFixing();
 
datepicker.options.setDateAvailabilityResolver((date) => {
  // return true;
});
 
datepicker.options.setCellContentResolver((day) => {
  // return day.dayNumber;
});
 
datepicker.options.addCellClassesResolver((day) => {
  // if (day.dayNumber === 20) return ['red'];
  // if (day.dayNumber === 10) return ['green'];
  return [];
});
 
datepicker.options.addDayModifier((day) => {
  // day.isSunday = day.dayOfWeek === TheDatepicker.DayOfWeek.Sunday;
});
 
datepicker.options.setCellClassesResolver((day) => {
  // return [];
});
 
datepicker.options.onBeforeSelect((event, day, previousDay) => {
  // 打回来
});
 
datepicker.options.onSelect((event, day, previousDay) => {
  // 打回来
});
 
datepicker.options.onBeforeSwitch((event, isOpening) => {
  // 打回来
});
 
datepicker.options.onSwitch((event, isOpening) => {
 // 打回来
});
 
datepicker.options.onBeforeGo((event, month, previousMonth) => {
  // 打回来
});
 
datepicker.options.onGo((event, month, previousMonth) => {
  // 打回来
});
 
// 设置前缀
datepicker.options.setClassesPrefix();
 
// 设置返回 HTML
datepicker.options.setGoBackHtml();
 
// 设置前进 HTML
datepicker.options.setGoForwardHtml();
 
// 设置关闭 HTML
datepicker.options.setCloseHtml();
 
// 设置重置 HTML
datepicker.options.setResetHtml();
 
// 设置取消选择 HTML
datepicker.options.setDeselectHtml();
 
// 本地化日期选择器
datepicker.options.translator.setDayOfWeekTranslation(TheDatepicker.DayOfWeek.Monday, 'Mo');
datepicker.options.translator.setDayOfWeekTranslation(TheDatepicker.DayOfWeek.Tuesday, 'Tu');
datepicker.options.translator.setDayOfWeekTranslation(TheDatepicker.DayOfWeek.Wednesday, 'We');
datepicker.options.translator.setDayOfWeekTranslation(TheDatepicker.DayOfWeek.Thursday, 'Th');
datepicker.options.translator.setDayOfWeekTranslation(TheDatepicker.DayOfWeek.Friday, 'Fr');
datepicker.options.translator.setDayOfWeekTranslation(TheDatepicker.DayOfWeek.Saturday, 'Sa');
datepicker.options.translator.setDayOfWeekTranslation(TheDatepicker.DayOfWeek.Sunday, 'Su');
datepicker.options.translator.setMonthTranslation(TheDatepicker.Month.January, 'January');
datepicker.options.translator.setMonthTranslation(TheDatepicker.Month.February, 'February');
datepicker.options.translator.setMonthTranslation(TheDatepicker.Month.March, 'March');
datepicker.options.translator.setMonthTranslation(TheDatepicker.Month.April, 'April');
datepicker.options.translator.setMonthTranslation(TheDatepicker.Month.May, 'May');
datepicker.options.translator.setMonthTranslation(TheDatepicker.Month.June, 'June');
datepicker.options.translator.setMonthTranslation(TheDatepicker.Month.July, 'July');
datepicker.options.translator.setMonthTranslation(TheDatepicker.Month.August, 'August');
datepicker.options.translator.setMonthTranslation(TheDatepicker.Month.September, 'September');
datepicker.options.translator.setMonthTranslation(TheDatepicker.Month.October, 'October');
datepicker.options.translator.setMonthTranslation(TheDatepicker.Month.November, 'November');
datepicker.options.translator.setMonthTranslation(TheDatepicker.Month.December, 'December');
 
// 打开日期选择器
datepicker.open();
 
//关闭日期选择器
datepicker.close();
 
// 销毁日期选择器
datepicker.destroy();


官方网站:https://github.com/thedatepicker/thedatepicker

相关热词: thedatepicke日期选择器

声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库