一个用原生的 JavaScript 实现、无依赖的日期选择器。
IE10及以上。
因为 IE9 中的 table 标签中的 innerHTML 属性是只读的,但是 diy-date-picker 中大量用到 innerHTML 属性作为写入的操作,考虑到 IE9 迟早都会被淘汰,所以该插件并没有打算兼容 IE9。
$ npm install diy-date-picker --save
或者
$ yarn add diy-date-picker
或者
<!-- 页面常规引入 -->
<script src="${yourPath}/diy-date-picker/dist/diy-date-picker.min.js"></script>
以下是受支持的HTML标签的示例。它们本身不会提供日期选择器功能,您需要利用该标签,初始化日期选择器。
这是一个最简单的示例:当input框聚焦、被点击或者被tab聚焦时,都会显示日期选择器。
<input class="input-control" id="datePicker"/>
<script>
diyDatePicker.init('#datePicker');
</script>
有时候开发者可能需要对一个多标签组合的input组件封装成日期选择器,我们可以:
<div class="input-group">
<input class="input-control" id="datePicker"/>
<i class="icon icon-date"></i>
</div>
<script>
diyDatePicker.init('.input-group');
</script>
注意: input组件中必须包含input标签,因为它是日期选择器必须关联的标签。
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
clearable | boolean | false | 是否显示“今天”和“清除”按钮 |
daysOfWeekDisabled | array | [] | 一周中需要禁用的几天,值为0(星期日)到6(星期六)。 |
disabledDate | function | null | 应该被禁用的日期,参数为当前日期,返回 boolean 值。 |
defaultValue | Date,number,string | null | 第一次打开日期选择器默认显示的日期。 |
format | string | yyyy-mm-dd | input标签中的值显示格式。 |
lang | string | zh-CN | 语言,默认是简体中文。 |
showWeekDays | boolean | true | 是否把工作日的名称显示在视图中。 |
templates | object | null | 年份和月份切换图标模版配置。 |
weekStart | number | 0 | 配置一周的开始,0(星期天)到6(星期六)。 |
zIndex | number | 2019 | 日期选择器显示时其css中z-index属性的值。 |
其中 format
日期格式支持的特殊字符含义分别是:
- d,dd:数字日期,分别没有前导零和前导零。例如6、06。
- D,DD:分别为缩写和完整的工作日名称。例如,周五,星期五。
- m,mm:数字月份,分别没有前导零和前导零。例如8、08。
- M,MM:分别是缩写名称和完整月份的名称。例如,1月,一月
- yyyy:4位数字的年份。例如,2020年。
初始化日期选择器的方法,它接受两个参数:selectors
和 options
。
diyDatePicker.init('#datepicker', {
clearable: true
});
其中,selectors
参数可以是有效的 css
选择器字符串,也可以是 NodeList
的实例,也可以是 HTMLCollection
的实例,也可以是 HTMLElement
的实例。options
就是上述提到的 options 配置。
注意: 以下所有方法中的参数
selectors
定义和init
方法中定义的一致。
销毁日期选择器的方法,它接受一个参数:selectors
。
diyDatePicker.destroy('#datepicker');
显示日期选择器的方法,它接受一个参数:selectors
。
diyDatePicker.show('#datepicker');
隐藏日期选择器的方法,它接受一个参数:selectors
。
diyDatePicker.hide('#datepicker');
设置日期的方法,它接受两个参数:selectors
和 newDate
。newDate
可以是合法的 Date
的实例,也可以是数字类型的时间戳(timestamp
) ,也可以能被 new Date
正确解析的日期字符串。
diyDatePicker.setDate('#datepicker', '2019-08-15');
获取日期的方法,它接受一个参数:selectors
。这里需要强调的是,该函数返回的是一个日期数组,里面包含的是可能是多个 selectors
返回的日期;如果 selectors
实例只有一个,那么返回的日期数组长度为1.
diyDatePicker.getDate('#datepicker');
清除日期的方法,它接受一个参数:selectors
。
diyDatePicker.clearDate('#datepicker');
在线演示,请按照自身需求引入不同的主题文件,主题文件在 dist/themes
目录下。
该插件支持国际化。默认是简体中文(zh-CN)。其他可以用的翻译可以在 dist/locales 目录中找到,只需在插件之后引入您想要的语言环境即可。想要添加新的语言,只需要在全局对象 diyDatePicker.langs 中添加一个语言键值即可。例如:
;(function (global) {
global.diyDatePicker.langs['zh-CN'] = {
days: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
daysShort: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
daysMin: ['日', '一', '二', '三', '四', '五', '六'],
months: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
monthsShort: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
today: '今天',
clear: '清除',
format: 'yyyy-mm-dd',
monthTitle: 'mm月',
yearTitle: 'yyyy年',
titleExchange: false,
weekStart: 1
};
}(window || self));
若该目录没有您想要的语言,可以提交添加语言合并的分支,或者在 issues 提出,作者会及时跟进。
MIT