@hey_dino/quarter-picker

The Quarter Picker based on Vue-2.x and Element-UI

前置要求

如果你针对 Element-UI 使用了 按需引入 , 确保下述组件已注册:

• Input
• Icon
• Popover

安装

npm install @hey_dino/quarter-picker

注册

你可以通过 全局 或 局部 的方式引入QuarterPicker

注意：样式文件需要单独引入

全局注册

在 main.js：

import Vue from 'vue';
import App from './App.vue';
import QuarterPicker from '@hey_dino/quarter-picker';
import '@hey_dino/quarter-picker/lib/style/index.css';

Vue.use(QuarterPicker);

new Vue({
  el: '#app',
  render: h => h(App)
});

局部注册

在任意组件：

<script>
import QuarterPicker from '@hey_dino/quarter-picker';

export default {
  components: { QuarterPicker },
};
</script>

<style>
@import '@hey_dino/quarter-picker/lib/style/index.css'
</style>

快速开始

<quarter-picker v-model="quarter" placeholder="please input" />

日期格式

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

以下为常用的格式化字符串，以 UTC 2024年9月1日 00:00:00 为例：

请注意大小写；下述 含义 中标注星号，表示与 Element-UI 日期格式 使用方式有差异

占位符	含义	备注	举例
YY	年*	简称，两位数	24
YYYY	年*	全称	2024
M	月	—	9
MM	月	补零	09
D	日*	—	1
DD	日*	补零	01
Q	季度	数值格式	3
H	小时	—	0
HH	小时	补零，24小时制	00
m	分钟	—	0
mm	分钟	补零	00
s	秒	—	0
ss	秒	补零	00
h	小时	12小时制	12
hh	小时	补零，12小时制	12
A	AM/PM	大写，仅 format 可用	AM
a	am/pm	小写，仅 format 可用	am
x	时间戳*	—	1725120000000
[XXX]	无需格式化的字符	避免被错误解析，例如 [Q] 可避免被解析为季度	XXX

Attributes

名称	说明	类型	可选值	默认值
value/v-model	绑定值，默认返回 所选季度 的初始日期	String	—	—
readonly	只读	Boolean	—	false
disabled	禁用	Boolean	—	false
editable	支持手动输入	Boolean	—	true
clearable	支持一键清空	Boolean	—	true
width	输入框宽度	String	—	220px
size	输入框高度	String	medium / small / mini	—
placeholder	占位内容	String	—	—
format	显示值格式	String	见上方 日期格式	YYYY-[Q]Q
value-format	绑定值格式	String	见上方 日期格式	YYYY-MM-DD
popper-class	弹出框类名	String	—	—
picker-options	特殊配置项，详见下表
name	输入框元素属性	String	—	—
prefix-icon	自定义头部图标的名称	String	—	el-icon-date
clear-icon	自定义清空图标的名称	String	—	el-icon-circle-close
validate-event	绑定值发生变化时，是否触发表单的校验	Boolean	—	true

Picker Options

名称	说明	类型	可选值	默认值
disabledDate	设置禁用状态，禁用则返回 true，反之返回 false	Function({ startTime, endTime })	—	—
cellClassName	设置单个季度DOM的类名	Function({ startTime, endTime })	—	—

Events

名称	说明	参数
change	选定值被确定时触发	绑定值 value
blur	当 input 失去焦点时触发	组件实例
focus	当 input 获得焦点时触发	组件实例

Methods

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