ea-ui

TimePicker 时间选择器 ​

用于选择或输入时间

引入 ​

js

html
<script type="module">
  import "./node_modules/easy-component-ui/components/ea-time-picker/index.js";
</script>

css

TIP

需要注意的是, 如果需要使用到带有图标的 属性/组件, 需要提前使用 link 标签引入图标文件

html
<link
  rel="stylesheet"
  href="./node_modules/easy-component-ui/components/ea-icon/index.css"
/>

自定义样式 ​

移步到 CSS Part。

任意时间点 ​

可以选择任意时间

查看代码

html

html
<div class="demo">
  <ea-time-picker id="basicTimePicker" time="11:11:11"></ea-time-picker>
</div>

js: change 事件

js
const basicTimePicker = document.querySelector("#basicTimePicker");
basicTimePicker.addEventListener("change", (e) => {
  console.log(e.detail);
});

禁用状态 ​

通过设置 disabled 属性，可以禁用时间选择器

查看代码

html

html
<div class="demo">
  <ea-time-picker time="8:0:0" disabled></ea-time-picker>
</div>

对齐方式 ​

通过设置 align 属性，可以设置时间选择器的对齐方式

查看代码

html

html
<div class="demo">
  <ea-time-picker time="8:0:0" align="center"></ea-time-picker>
</div>

固定时间范围 ​

通过设置 limit-range-start 和 limit-range-end 属性，可以设置时间选择器的最小值和最大值

查看代码

html

html
<div class="demo">
  <ea-time-picker
    time="3:0:0"
    limit-range-start="3:0:0"
    limit-range-end="3:10:0"
  ></ea-time-picker>
</div>

Attributes ​

参数说明类型可选值默认值
name输入框的 name 属性string--
time初始值/当前值string--
disabled是否禁用boolean-false
align对齐方式stringleft/center/rightleft
limit-range-start固定时间范围开始值string--
limit-range-end固定时间范围结束值string--

CSS Part ​

用法可参考 MDN ::part()伪类

名称说明
container外层容器
input输入框
dropdown-wrap下拉框外层容器
dropdown-inner-wrap下拉框容器
dropdown-time下拉框内的元素

Events ​

事件名称说明回调参数
change值改变时触发e.detail