4.6.201908051153 • Published 6 years ago
@dfeidao/fd-w000006 v4.6.201908051153
日期选择
https://dfeidao.gitee.io/widgets/
Installation
yarn add --dev @dfeidao/fd-w000006
Tag
<fd-w000006></fd-w000006>
Attributes
date-format
日期格式【string】。例如:yyyy/MM/dd/hh/mm/ss/S
y 代表: 年份
q 代表: 季度
M 代表: 月份
d 代表: 日
h 代表: 小时
m 代表: 分
s 代表: 秒
S 代表: 毫秒
z-index
该控件所处的页面层级,为空则默认没有设置。【string】
Methods
show
无参数
控件默认为隐藏状态,调用可使控件显示。
html
<div id="fd-w000006-002" style="height: 2rem;background:#52cb06;line-height: 2rem;"></div>
<fd-w000006 id="fd-w000006-001" style="width:50em;height:30em;display:block;position: absolute;" z-index=9999 date-format="yyyy/MM/dd"></fd-w000006>
js
const fd_w000006_001 = document.querySelector('#fd-w000006-001');
const fd_w000006_002 = document.querySelector('#fd-w000006-002');
fd_w000006_002.addEventListener('click', () => {
fd_w000006_001.show();
});
fd_w000006_001.addEventListener('fdwe-select-date', (res) => {
const start_str = res.start_str;
const end_str = res.end_str;
const content = start_str + ' - ' + end_str;
fd_w000006_002.innerHTML = content;
});
Events
feidao-web事件绑定示例
<fd-w000006 data-feidao-actions="fdwe-select-date:a001">
</fd-w000006>
fdwe-select-date
返回值示例
{"end": 1521763200000, "start": 1520812800000, "start_str": "2018-03-12", "end_str": "2018-03-23"}
选择日期区间后,控件发出的事件,输出参数为:end,start,start_str,end_str
Slot
day
在自定义控件内添加新节点,设置其属性为 solt="day" ,即可产生新的日期选择区间。同时需要给新节点添加的属性入下:
属性名 | 属性值 |
---|---|
slot | solt="day", 表示以天为单位 |
interval | 设置间隔【string】 |
is-before | 设置日期选择区间在前几天或后几天。true之前,false为之后 |
month
在自定义控件内添加新节点,设置其属性为 solt="month" ,即可产生新的日期选择区间。同时需要给新节点添加的属性入下:
属性名 | 属性值 |
---|---|
slot | solt="month", 表示以月为单位 |
interval | 设置间隔【string】 |
is-before | 设置日期选择区间在前几月或后几月。true之前,false为之后 |
year
在自定义控件内添加新节点,设置其属性为 solt="year" ,即可产生新的日期选择区间。同时需要给新节点添加的属性入下:
属性名 | 属性值 |
---|---|
slot | solt="year", 表示以年为单位 |
interval | 设置间隔【string】 |
is-before | 设置日期选择区间在前几年或后几年。true之前,false为之后 |
some
在自定义控件内添加新节点,设置其属性为 solt="some" ,即可自定义手输的时间选择框
例:
<div slot="some">
<div>开始</div>
<input type="date" name="select-start" />
<div>结束</div>
<input type="date" name="select-end" />
</div>
btn-sure
在自定义控件内添加新节点,设置其属性为 solt="btn-sure" ,即可自定义“确定按钮”,自动绑定确定事件,不用使用者再添加绑定事件。
btn-cancle
在自定义控件内添加新节点,设置其属性为 solt="btn-cancle" ,即可自定义“取消按钮”,自动绑定取消事件,不用使用者再添加绑定事件。
Example
设置日期格式
html
<div id="fd-w000006-004" style="height: 2rem;background:#52cb06;line-height: 2rem;"></div>
<fd-w000006 id="fd-w000006-003" style="width:50em;height:30em;display:block;position: absolute;" date-format="yyyy/MM"></fd-w000006>
js
const fd_w000006_004 = document.querySelector('#fd-w000006-004');
const fd_w000006_003 = document.querySelector('#fd-w000006-003');
fd_w000006_004.addEventListener('click', () => {
fd_w000006_003.show();
});
fd_w000006_003.addEventListener('fdwe-select-date', (res) => {
const start_str = res.start_str;
const end_str = res.end_str;
const content = start_str + ' - ' + end_str;
fd_w000006_004.innerHTML = content;
});
设置页面层级
html
<div id="fd-w000006-006" style="height: 2rem;background:#52cb06;line-height: 2rem;"></div>
<fd-w000006 id="fd-w000006-005" style="width:50em;height:30em;display:block;position: absolute;" z-index=9999></fd-w000006>
js
const fd_w000006_006 = document.querySelector('#fd-w000006-006');
const fd_w000006_005 = document.querySelector('#fd-w000006-005');
fd_w000006_006.addEventListener('click', () => {
fd_w000006_005.show();
});
fd_w000006_005.addEventListener('fdwe-select-date', (res) => {
const start_str = res.start_str;
const end_str = res.end_str;
const content = start_str + ' - ' + end_str;
fd_w000006_006.innerHTML = content;
});
根据日选择区间
html
<div id="fd-w000006-008" style="height: 2rem;background:#52cb06;line-height: 2rem;"></div>
<fd-w000006 id="fd-w000006-007" style="width:50em;height:30em;display:block;position: absolute;" date-format="yyyy/MM/dd">
<div style="width: 10em;height: 1.5em;background: whitesmoke;line-height: 1.5em;margin:0.2em" interval="1" is-before="true"
slot="day">
今天
</div>
<div style="width: 10em;height: 1.5em;background: whitesmoke;line-height: 1.5em;margin:0.2em" interval="2" is-before="true"
slot="day">
昨天
</div>
<div style="width: 10em;height: 1.5em;background: whitesmoke;line-height: 1.5em;margin:0.2em" interval="2" is-before="false"
slot="day">
明天
</div>
<div style="width: 10em;height: 1.5em;background: whitesmoke;line-height: 1.5em;margin:0.2em" interval="7" is-before="true"
slot="day">
过去的7天
</div>
<div style="width: 10em;height: 1.5em;background: whitesmoke;line-height: 1.5em;margin:0.2em" interval="7" is-before="false"
slot="day">
未来的7天
</div>
<div style="width: 10em;height: 1.5em;background: whitesmoke;line-height: 1.5em;margin:0.2em" interval="30" is-before="true"
slot="day">
过去的30天
</div>
<div style="width: 10em;height: 1.5em;background: whitesmoke;line-height: 1.5em;margin:0.2em" interval="30" is-before="false"
slot="day">
未来的30天
</div>
</fd-w000006>
js
const fd_w000006_008 = document.querySelector('#fd-w000006-008');
const fd_w000006_007 = document.querySelector('#fd-w000006-007');
fd_w000006_008.addEventListener('click', () => {
fd_w000006_007.show();
});
fd_w000006_007.addEventListener('fdwe-select-date', (res) => {
const start_str = res.start_str;
const end_str = res.end_str;
const content = start_str + ' - ' + end_str;
fd_w000006_008.innerHTML = content;
});
根据月选择区间
html
<div id="fd-w000006-010" style="height: 2rem;background:#52cb06;line-height: 2rem;"></div>
<fd-w000006 id="fd-w000006-009" style="width:50em;height:30em;display:block;position: absolute;" date-format="yyyy/MM/dd">
<div style="width: 10em;height: 1.5em;background: whitesmoke;line-height: 1.5em;margin:0.2em" interval="1" is-before="true"
slot="month">
本月
</div>
<div style="width: 10em;height: 1.5em;background: whitesmoke;line-height: 1.5em;margin:0.2em" interval="2" is-before="true"
slot="month">
上个月
</div>
<div style="width: 10em;height: 1.5em;background: whitesmoke;line-height: 1.5em;margin:0.2em" interval="2" is-before="false"
slot="month">
下个月
</div>
<div style="width: 10em;height: 1.5em;background: whitesmoke;line-height: 1.5em;margin:0.2em" interval="5" is-before="true"
slot="month">
过去的5个月
</div>
<div style="width: 10em;height: 1.5em;background: whitesmoke;line-height: 1.5em;margin:0.2em" interval="5" is-before="false"
slot="month">
未来的5个月
</div>
</fd-w000006>
js
const fd_w000006_010 = document.querySelector('#fd-w000006-010');
const fd_w000006_009 = document.querySelector('#fd-w000006-009');
fd_w000006_010.addEventListener('click', () => {
fd_w000006_009.show();
});
fd_w000006_009.addEventListener('fdwe-select-date', (res) => {
const start_str = res.start_str;
const end_str = res.end_str;
const content = start_str + ' - ' + end_str;
fd_w000006_010.innerHTML = content;
});
根据年选择区间
html
<div id="fd-w000006-012" style="height: 2rem;background:#52cb06;line-height: 2rem;"></div>
<fd-w000006 id="fd-w000006-011" style="width:50em;height:30em;display:block;position: absolute;" date-format="yyyy/MM/dd">
<div style="width: 10em;height: 1.5em;background: whitesmoke;line-height: 1.5em;margin:0.2em" interval="1" is-before="true"
slot="year">
本年
</div>
<div style="width: 10em;height: 1.5em;background: whitesmoke;line-height: 1.5em;margin:0.2em" interval="2" is-before="true"
slot="year">
上一年
</div>
<div style="width: 10em;height: 1.5em;background: whitesmoke;line-height: 1.5em;margin:0.2em" interval="2" is-before="false"
slot="year">
明年
</div>
<div style="width: 10em;height: 1.5em;background: whitesmoke;line-height: 1.5em;margin:0.2em" interval="3" is-before="true"
slot="year">
上3年
</div>
<div style="width: 10em;height: 1.5em;background: whitesmoke;line-height: 1.5em;margin:0.2em" interval="3" is-before="false"
slot="year">
未来的3年
</div>
</fd-w000006>
js
const fd_w000006_012 = document.querySelector('#fd-w000006-012');
const fd_w000006_011 = document.querySelector('#fd-w000006-011');
fd_w000006_012.addEventListener('click', () => {
fd_w000006_011.show();
});
fd_w000006_011.addEventListener('fdwe-select-date', (res) => {
const start_str = res.start_str;
const end_str = res.end_str;
const content = start_str + ' - ' + end_str;
fd_w000006_012.innerHTML = content;
});
自定义选择区间
自定义中,输入框的类型必须是[date],输入框的name必须固定,开始日期为[select-start],结束日期为[select-end]
且两个时间选择器外要有一个 div块, 设置属性 slot="some"
html
<div id="fd-w000006-014" style="height: 2rem;background:#52cb06;line-height: 2rem;"></div>
<fd-w000006 id="fd-w000006-013" style="width:50em;height:30em;display:block;position: absolute;" date-format="yyyy/MM/dd">
<div slot="some">
<div>开始</div>
<input type="date" name="select-start" />
<div>结束</div>
<input type="date" name="select-end" />
</div>
</fd-w000006>
js
const fd_w000006_014 = document.querySelector('#fd-w000006-014');
const fd_w000006_013 = document.querySelector('#fd-w000006-013');
fd_w000006_014.addEventListener('click', () => {
fd_w000006_013.show();
});
fd_w000006_013.addEventListener('fdwe-select-date', (res) => {
const start_str = res.start_str;
const end_str = res.end_str;
const content = start_str + ' - ' + end_str;
fd_w000006_014.innerHTML = content;
});
确定按钮
自定义的确定按钮必须具有 solt 属性,solt="btn-sure"
html
<div id="fd-w000006-016" style="height: 2rem;background:#52cb06;line-height: 2rem;"></div>
<fd-w000006 id="fd-w000006-015" style="width:50em;height:30em;display:block;position: absolute;" date-format="yyyy/MM/dd">
<div slot="btn-sure" style="width: 10em;height: 3em;background: lightgoldenrodyellow;display: block;line-height: 3em;text-align: center;">确定</div>
</fd-w000006>
js
const fd_w000006_016 = document.querySelector('#fd-w000006-016');
const fd_w000006_015 = document.querySelector('#fd-w000006-015');
fd_w000006_016.addEventListener('click', () => {
fd_w000006_015.show();
});
fd_w000006_015.addEventListener('fdwe-select-date', (res) => {
const start_str = res.start_str;
const end_str = res.end_str;
const content = start_str + ' - ' + end_str;
fd_w000006_016.innerHTML = content;
});
取消按钮
自定义的取消按钮必须具有 solt 属性,solt="btn-cancel"
html
<div id="fd-w000006-018" style="height: 2rem;background:#52cb06;line-height: 2rem;"></div>
<fd-w000006 id="fd-w000006-017" style="width:50em;height:30em;display:block;position: absolute;" date-format="yyyy/MM/dd">
<div slot="btn-cancle" style="width: 10em;height: 3em;background: lightgoldenrodyellow;display: block;line-height: 3em;text-align: center;">取消</div>
</fd-w000006>
js
const fd_w000006_018 = document.querySelector('#fd-w000006-018');
const fd_w000006_017 = document.querySelector('#fd-w000006-017');
fd_w000006_018.addEventListener('click', () => {
fd_w000006_017.show();
});
fd_w000006_017.addEventListener('fdwe-select-date', (res) => {
const start_str = res.start_str;
const end_str = res.end_str;
const content = start_str + ' - ' + end_str;
fd_w000006_018.innerHTML = content;
});
完整功能示例
html
传入要测试的控件的html代码。例:
<div id="fd-w000006-020" style="height: 2rem;background:#52cb06;line-height: 2rem;"></div>
<fd-w000006 id="fd-w000006-019" style="width:50em;height:30em;display:block;position: absolute;" z-index=9999 date-format="yyyy/MM/dd">
<div style="width: 10em;height: 1.5em;background: whitesmoke;line-height: 1.5em;margin:0.2em" interval="1" is-before="true"
slot="day">
今天
</div>
<div style="width: 10em;height: 1.5em;background: whitesmoke;line-height: 1.5em;margin:0.2em" interval="2" is-before="true"
slot="day">
昨天
</div>
<div style="width: 10em;height: 1.5em;background: whitesmoke;line-height: 1.5em;margin:0.2em" interval="2" is-before="false"
slot="day">
明天
</div>
<div style="width: 10em;height: 1.5em;background: whitesmoke;line-height: 1.5em;margin:0.2em" interval="7" is-before="true"
slot="day">
过去的7天
</div>
<div style="width: 10em;height: 1.5em;background: whitesmoke;line-height: 1.5em;margin:0.2em" interval="7" is-before="false"
slot="day">
未来的7天
</div>
<div style="width: 10em;height: 1.5em;background: whitesmoke;line-height: 1.5em;margin:0.2em" interval="30" is-before="true"
slot="day">
过去的30天
</div>
<div style="width: 10em;height: 1.5em;background: whitesmoke;line-height: 1.5em;margin:0.2em" interval="30" is-before="false"
slot="day">
未来的30天
</div>
<div style="width: 10em;height: 1.5em;background: whitesmoke;line-height: 1.5em;margin:0.2em" interval="1" is-before="true"
slot="month">
本月
</div>
<div style="width: 10em;height: 1.5em;background: whitesmoke;line-height: 1.5em;margin:0.2em" interval="2" is-before="true"
slot="month">
上个月
</div>
<div style="width: 10em;height: 1.5em;background: whitesmoke;line-height: 1.5em;margin:0.2em" interval="2" is-before="false"
slot="month">
下个月
</div>
<div style="width: 10em;height: 1.5em;background: whitesmoke;line-height: 1.5em;margin:0.2em" interval="5" is-before="true"
slot="month">
过去的5个月
</div>
<div style="width: 10em;height: 1.5em;background: whitesmoke;line-height: 1.5em;margin:0.2em" interval="5" is-before="false"
slot="month">
未来的5个月
</div>
<div style="width: 10em;height: 1.5em;background: whitesmoke;line-height: 1.5em;margin:0.2em" interval="1" is-before="true"
slot="year">
本年
</div>
<div style="width: 10em;height: 1.5em;background: whitesmoke;line-height: 1.5em;margin:0.2em" interval="2" is-before="true"
slot="year">
上一年
</div>
<div style="width: 10em;height: 1.5em;background: whitesmoke;line-height: 1.5em;margin:0.2em" interval="2" is-before="false"
slot="year">
明年
</div>
<div style="width: 10em;height: 1.5em;background: whitesmoke;line-height: 1.5em;margin:0.2em" interval="3" is-before="true"
slot="year">
上3年
</div>
<div style="width: 10em;height: 1.5em;background: whitesmoke;line-height: 1.5em;margin:0.2em" interval="3" is-before="false"
slot="year">
未来的3年
</div>
<button slot="btn-sure" style="width:80px;
height:28px;
background:#444;
border:1px solid #444;
border-radius:4px;
color:#fff;
margin-left: 2px;">确定</button>
<button slot="btn-cancle" style="width:80px;height:30px;
border:1px solid rgb(197, 110, 110);
border-radius:4px;
background:#fff;
margin-left:13px;
margin-top: 10px;
margin-bottom: 5px;">取消</button>
<div slot="some">
<div>开始</div>
<input type="date" name="select-start" />
<div>结束</div>
<input type="date" name="select-end" />
</div>
</fd-w000006>
<div id="fd-w000006-021" style="width:100%;height:500px;background:#e9eeee;">
</div>
js
传入要测试的控件的js代码。例:
const fd_w000006_020 = document.querySelector('#fd-w000006-020');
const fd_w000006_019 = document.querySelector('#fd-w000006-019');
const fd_w000006_021 = document.querySelector('#fd-w000006-021');
fd_w000006_020.addEventListener('click', () => {
fd_w000006_019.show();
});
fd_w000006_019.addEventListener('fdwe-select-date', (res) => {
const start_str = res.start_str;
const end_str = res.end_str;
const content = start_str + ' - ' + end_str;
fd_w000006_020.innerHTML = content;
});
fd_w000006_021.addEventListener('click', (res) => {
if (fd_w000006_019.widget_hide === false) {
fd_w000006_019.hide();
}
});