@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
• month
• year
• some
• btn-sure
• btn-cancle

day

在自定义控件内添加新节点，设置其属性为 solt="day" ，即可产生新的日期选择区间。同时需要给新节点添加的属性入下:

month

在自定义控件内添加新节点，设置其属性为 solt="month" ，即可产生新的日期选择区间。同时需要给新节点添加的属性入下:

year

在自定义控件内添加新节点，设置其属性为 solt="year" ，即可产生新的日期选择区间。同时需要给新节点添加的属性入下:

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();
  }
});