4.6.201908301542 • Published 5 years ago
@dfeidao/fd-w000004 v4.6.201908301542
日历选择器
https://dfeidao.gitee.io/widgets/
- Installation
- Tag
- Attributes
-
value
-multiple
-min
-max
-disabled
-inline
-lang
- Methods
-
get_value
-set_value
-clear
-set_disabled
- Events
- feidao-web事件绑定示例
-
fdwe-change
- html - js - Example - 单选 - 多选 - 设置最大值和最小值
Installation
yarn add --dev @dfeidao/fd-w000004
Tag
<fd-w000004></fd-w000004>
Attributes
value
时间值,可以为时间戳或时间戳数组,作为多选的日期
时间戳为数值类型
<fd-w000004 id="fd-w000004-0001" value="1516118400000">
</fd-w000004>
multiple
可以多选,值为true
min
可选日期最小值,时间戳
max
可选日期最大值,时间戳
disabled
可让日期框为禁用状态
inline
可以让日历一直显示
lang
语言,目前可选值有zh_CN
和en_US
,其它值均作英文处理.
Methods
get_value
无参数
获取日期值,类型为数字或数字数组
返回值示例如下
[1516118400000, 1516550400000, 1517241600000]
set_value
参数为时间戳或者时间戳数组, 无返回值
set_value([1516118400000, 1516550400000, 1517241600000])
设置日期
clear
清空已设置的值
set_disabled
参数为boolean类型
set_disabled(true)
或
set_disabled(false)
Events
feidao-web事件绑定示例
<fd-w000004 data-feidao-actions="fdwe-change:a001" value="1516118400000">
</fd-w000004>
fdwe-change
返回选择的日期
返回值类型为 Event事件, 可以通过其value属性获得选中日期的事件戳数组
html
<fd-w000004 id="fd-w000004-0001" value="1516118400000">
</fd-w000004>
js
const fd_w000004_0001 = document.getElementById('fd-w000004-0001');
fd_w000004_0001.addEventListener('fdwe-change', (e)=>{
console.log('value changed:', e.value);
});
Example
单选
<h2>单选</h2>
<fd-w000004 value="1516118400000">
</fd-w000004>
多选
<h2>多选</h2>
<fd-w000004 value="[1516118400000, 1516291200000]" multiple>
</fd-w000004>
设置最大值和最小值
<h2>最大最小值</h2>
<fd-w000004 min="1516118400000" max="1516291200000" multiple>
</fd-w000004>