@thtf/element-datepicker

基于 Element-UI DatePicker 的季度选择器。

依赖

Vue 2.6.10+

Element-UI 2.15.6+

安装

npm install @thtf/element-datepicker

快速上手

// 使用组件
<template>
  <div id="app">
    <div class="block">
      <span class="demonstration">季度选择</span>
      <date-picker
        v-model="value1"
        clearable
        type="quarter"
        format="yyyy年QQ季度"
        value-format="yyyyQQ"
        placeholder="选择日期"
      />
    </div>
    <div class="block">
      <span class="demonstration">半年选择</span>
      <date-picker
        v-model="value2"
        clearable
        type="halfYear"
        format="yyyy年[BB]半年"
        value-format="yyyyBB"
        placeholder="选择日期"
      />
    </div>
  </div>
</template>

<script>
  import DatePicker from '@thtf/element-datepicker';

  export default {
    name: 'app',
    components: {
      DatePicker,
    },
    data() {
      return {
        value1: '',
        value2: '',
      };
    },
  };
</script>

日期格式

使用format指定输入框的格式；使用value-format指定绑定值的格式。

默认情况下，组件接受并返回Date对象。以下为可用的格式化字串，以 UTC 2017年1月2日 03:04:05 为例：

:::warning 请注意大小写 :::

格式	含义	备注	举例
yyyy	年		2017
B	半年	不补0	1
BB	半年		01
Q	季	不补0	1
QQ	季		01
[MM]	不需要格式化字符	使用方括号标识不需要格式化的字符 (如 [A] [MM])	MM

属性

参数	说明	类型	可选值	默认值
value / v-model	绑定值	date(DatePicker)	—	—
readonly	完全只读	boolean	—	false
disabled	禁用	boolean	—	false
editable	文本框可输入	boolean	—	true
clearable	是否显示清除按钮	boolean	—	true
size	输入框尺寸	string	large, small, mini	—
placeholder	非范围选择时的占位内容	string	—	—
type	显示类型	string	quarter/halfYear	quarter
format	显示在输入框中的格式	string	见日期格式	yyyy-MM-dd
align	对齐方式	string	left, center, right	left
popper-class	DatePicker 下拉框的类名	string	—	—
default-value	可选，选择器打开时默认显示的时间	Date	可被new Date()解析	—
value-format	可选，绑定值的格式。不指定则绑定值为 Date 对象	string	见日期格式	—
name	原生属性	string	—	—
prefix-icon	自定义头部图标的类名	string	—	el-icon-date
clear-icon	自定义清空图标的类名	string	—	el-icon-circle-close
validate-event	输入时是否触发表单的校验	boolean	-	true

事件

事件名称	说明	回调参数
change	用户确认选定的值时触发	组件绑定值。格式与绑定值一致，可受 value-format 控制
blur	当 input 失去焦点时触发	组件实例
focus	当 input 获得焦点时触发	组件实例

方法

方法名	说明	参数
focus	使 input 获取焦点	—