时间选择

https://dfeidao.gitee.io/widgets/

Installation

yarn add --dev @dfeidao/fd-w000008

Tag

<fd-w000008></fd-w000008>

Attributes

z-index

该控件所处的页面层级，为空则默认没有设置 【string】

Methods

show

无参数

控件默认为隐藏状态，调用可使控件显示。

html

<div id="fd-w000008-002" style="height: 2rem;background: rgb(40, 219, 36);line-height: 2rem;"></div>
<fd-w000008 id="fd-w000008-001" style="width:50em;height:30em;display:block;position: absolute;">
</fd-w000008>

js

const fd_w000008_001 = document.querySelector('#fd-w000008-001');
const fd_w000008_002 = document.querySelector('#fd-w000008-002');

fd_w000008_002.addEventListener('click', () => {
  fd_w000008_001.show();
});
fd_w000008_001.addEventListener('fdwe-select-time', (res) => {
  const start_str = res.start_str;
  const end_str = res.end_str;
  const content = start_str + ' - ' + end_str;
  fd_w000008_002.innerHTML = content;
});

hide

无参数

使控件呈现为隐藏状态。

html

<button id="fd-w000008-005">hide_btn</button>
<div id="fd-w000008-004" style="height: 2rem;background: rgb(40, 219, 36);line-height: 2rem;"></div>
<fd-w000008 id="fd-w000008-003" style="width:50em;height:30em;display:block;position: absolute;">
</fd-w000008>

js

const fd_w000008_003 = document.querySelector('#fd-w000008-003');
const fd_w000008_004 = document.querySelector('#fd-w000008-004');
const fd_w000008_005 = document.querySelector('#fd-w000008-005');

fd_w000008_004.addEventListener('click', () => {
  fd_w000008_003.show();
});
fd_w000008_005.addEventListener('click', () => {
  fd_w000008_003.hide();
});

Events

feidao-web事件绑定示例

<fd-w000008 data-feidao-actions="fdwe-select-time:a001">
</fd-w000008>

fdwe-select-time

参数示例

{"start_str": "05:59", "end_str": "20:59"}

选择时间区间后，控件发出的事件，输出参数为：start_str，end_str

Solt

time

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

属性名 | 作用 -|-|- slot | 固定值solt="time", 用来标示自定义时间区间 interval | 设置间隔【string】 is-before | 设置时间选择区间在此刻之前还是之后。true之前，false为之后

btn-sure

在自定义控件内添加新节点，设置其属性为 solt="btn-sure" ，即可自定义“确定按钮”，自动绑定确定事件，不用使用者再添加绑定事件。

btn-cancle

在自定义控件内添加新节点，设置其属性为 solt="btn-cancle" ，即可自定义“取消按钮”，自动绑定取消事件，不用使用者再添加绑定事件。

Example

设置页面层级

<fd-w000008 style="width:50em;height:30em;display:block;position: absolute;" z-index=9999></fd-w000008>

选择区间

参数说明：interval为分钟时长，以分钟为单位；is-before是否是之前时间，包括现在在内的之前都为true，今天之后的为false；

html

<div id="fd-w000008-007" style="height: 2rem;background: rgb(40, 219, 36);line-height: 2rem;"></div>
<fd-w000008 id="fd-w000008-006" style="width:50em;height:30em;display:block;position: absolute;">
  <div style="width: 10em;height: 1.5em;background: whitesmoke;line-height: 1.5em;margin:0.2em" interval="1" is-before="true"
    slot="time">
    现在
  </div>
  <div style="width: 10em;height: 1.5em;background: whitesmoke;line-height: 1.5em;margin:0.2em" interval="10" is-before="true"
    slot="time">
    之前10分钟
  </div>
  <div style="width: 10em;height: 1.5em;background: whitesmoke;line-height: 1.5em;margin:0.2em" interval="50" is-before="true"
    slot="time">
    之前50分钟
  </div>
  <div style="width: 10em;height: 1.5em;background: whitesmoke;line-height: 1.5em;margin:0.2em" interval="50" is-before="false"
    slot="time">
    之后50分钟
  </div>
  <div style="width: 10em;height: 1.5em;background: whitesmoke;line-height: 1.5em;margin:0.2em" interval="300" is-before="false"
    slot="time">
    之后300分钟
  </div>
</fd-w000008>

js

const fd_w000008_007 = document.querySelector('#fd-w000008-007');
const fd_w000008_006 = document.querySelector('#fd-w000008-006');

fd_w000008_007.addEventListener('click', () => {
  fd_w000008_006.show();
});
fd_w000008_006.addEventListener('fdwe-select-time', (res) => {
  const start_str = res.start_str;
  const end_str = res.end_str;
  const content = start_str + ' - ' + end_str;
  fd_w000008_007.innerHTML = content;
});

确定按钮

自定义的确定按钮必须具有 solt 属性，solt="btn-sure"

<fd-w000008 style="width:50em;height:30em;display:block;position: absolute;">
  <div slot="btn-sure" style="width: 10em;height: 3em;background: lightgoldenrodyellow;display: block;line-height: 3em;text-align: center;">确定</div>
</fd-w000008>

取消按钮

自定义的取消按钮必须具有 solt 属性，solt="btn-cancle"

<fd-w000008 style="width:50em;height:30em;display:block;position: absolute;">
  <div slot="btn-cancle" style="width: 10em;height: 3em;background: lightgoldenrodyellow;display: block;line-height: 3em;text-align: center;">取消</div>
</fd-w000008>

完整功能示例

html

传入要测试的控件的html代码。例：

<link href="../node_modules/purecss/build/grids.css" type="text/css" rel="stylesheet">
<link href="//cdn.jsdelivr.net/npm/feidao-css/feidao.css" type="text/css" rel="stylesheet">
<link href="//cdn.jsdelivr.net/npm/feidao-css/theme/blue.css" type="text/css" rel="stylesheet">
<div class="pure-g">
   <div class="pure-u-1">
      <section>
         <div id="fd-w000008-009" style="height: 2rem;background: rgb(40, 219, 36);line-height: 2rem;"></div>
         <fd-w000008 id="fd-w000008-008" style="width:50em;height:30em;display:block;position: absolute;" z-index=9999>
            <div style="width: 10em;height: 1.5em;background: whitesmoke;line-height: 1.5em;margin:0.2em" interval="1" is-before="true"
            slot="time">
               现在
            </div>
            <div style="width: 10em;height: 1.5em;background: whitesmoke;line-height: 1.5em;margin:0.2em" interval="10" is-before="true"
            slot="time">
               之前10分钟
            </div>
            <div style="width: 10em;height: 1.5em;background: whitesmoke;line-height: 1.5em;margin:0.2em" interval="50" is-before="true"
            slot="time">
               之前50分钟
            </div>
            <div style="width: 10em;height: 1.5em;background: whitesmoke;line-height: 1.5em;margin:0.2em" interval="50" is-before="false"
            slot="time">
               之后50分钟
            </div>
            <div style="width: 10em;height: 1.5em;background: whitesmoke;line-height: 1.5em;margin:0.2em" interval="300" is-before="false"
            slot="time">
               之后300分钟
            </div>
         </fd-w000008>
      </section>
   </div>
</div>

js

传入要测试的控件的js代码。例：

const fd_w000008_008 = document.querySelector('#fd-w000008-008');
const fd_w000008_009 = document.querySelector('#fd-w000008-009');

fd_w000008_009.addEventListener('click', () => {
  console.log('-------- show -------');
  fd_w000008_008.show();
});
fd_w000008_008.addEventListener('fdwe-select-time', (res) => {
  console.log('---------', res);
  const start_str = res.start_str;
  const end_str = res.end_str;
  const content = start_str + ' - ' + end_str;
  fd_w000008_009.innerHTML = content;
});