更新记录

0.1.2（2023-03-22）

增加type属性，可以单独选择年、月、日

0.1.1（2022-05-28）

支持动态赋值

0.1.0（2022-05-27）

适用于宽度较大页面的日期选择组件

平台兼容性

e-date-picker

基于官方uni-datetime-picker组件修改

图标部分使用的是uni-icons组件，需要安装uni-icons组件，否则图标可能无法正常显示

只保留必要部分代码，并添加详细注释，方便个人再次修改

功能

• 适用于宽度较大页面的日期选择组件

属性

/** 年year、年月month、年月日date */
type: {
  type: String,
  default: "date"
},
/** 占位文本 */
placeholder: {
  type: String,
  default: "选择日期"
},
/** 是否禁用 */
disabled: {
  type: Boolean,
  default: false
},
/** 是否显示清除图标 */
clearIcon: {
  type: Boolean,
  default: true
}

用法

<template>
  <view class="content">
    <e-date-picker
      v-model="year"
      placeholder="请选择年"
      type="year" />
    <e-date-picker
      v-model="month"
      type="month"
      placeholder="请选择月" />
    <e-date-picker
      v-model="date"
      type="date" />
    <e-date-picker
      v-model="date"
      type="date"
      disabled />
  </view>
</template>

<script>
  export default {
    data() {
      return {
        year: '',
        month: '',
        date: '',
      };
    },
  };
</script>
<style>
  .content {
    margin: 0 auto;
    width: 200px;
    display: flex;
    flex-direction: column;
    gap: 30px;
  }
</style>