ea-ui

DatePicker 日期选择器 ​

用于选择或输入日期

引入 ​

js

html
<script type="module">
  import "./node_modules/easy-component-ui/components/ea-date-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-date-picker placeholder="选择日期"></ea-date-picker>
</div>

js: change 事件

js
document.querySelector("ea-date-picker").addEventListener("change", (e) => {
  console.log(e.detail);
});

禁用状态 ​

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

查看代码

html

html
<div class="demo">
  <ea-date-picker placeholder="选择日期" disabled></ea-date-picker>
</div>

对齐方式 ​

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

查看代码

html

html
<div class="demo">
  <ea-date-picker placeholder="选择日期" align="center"></ea-date-picker>
</div>

Attributes ​

参数说明类型可选值默认值
name输入框的 name 属性string--
vaalue初始值/当前值string--
disabled是否禁用boolean-false
align对齐方式stringleft/center/rightleft

CSS Part ​

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

名称说明
container外层容器(包含 输入框容器input-wrap和 下拉菜单容器dropdown-wrap)
input-wrap输入框容器(包含 input)
input输入框
dropdown-wrap下拉菜单容器(包含calendar)
calendar日历

Events ​

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