日历选择器

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>