Vue-quarter-selector NPM

vue-quarter-selector

一个使用Element-ui和Vue.js实现的季度选择器

priview

季度选择器

Install

npm install vue-quarter-selector --save

yarn add vue-quarter-selector

import { VueQuarterSelector } from 'vue-quarter-selector'

export default {
  // ...
  components: {
    VueQuarterSelector
  }
  // ...
}

import VueQuarterSelector form 'vue-quarter-selector'
Vue.use(VueQuarterSelector)

Usage

<VueQuarterSelector v-model="date"/>

<script>
export default {
  // ...
  components: {
    VueQuarterSelector
  },
  data: () => ({
    // 选择后的格式为对象格式，包含选中的季度对应的开始时间和结束时间
    // 例如：选中2019年第一季，则
    // date = {beginDate: "2019-01-01", endDate: "2019-03-31"}
    date: {}
  })
}
</script>

Available props

prop	Type	Default	Description
date	Object	{}	季度选中后的值（包括季度开始时间和结束时间）
format	String	YYYY年 QN	Y表示年份 N表示季度，将会解析YYYY为选择的年份，N为选择的季度
width	String \| Number	250	选择器宽度
disabled	Boolean	false	是否禁用选择器
placeholder	String	请选择季度	描述输入字段
size	String	large	对应element-ui输入框的尺寸，可选择值（medium/small/mini）
minYear	String \| Number		最小年份，小于该年份就不可选择
maxYear	String \| Number		最大年份，大于该年份就不可选择

Example

<VueQuarterSelector
  v-model="date"
  format="YYYY年 第N季度"
  placeholder="select quarter"
  :disabled="false"
  width="200"
  size="medium"
  minYear="2017"
  maxYear="2019"
/>

Todo List

默认显示季度

vue quarter selector

core-js vue element-ui

1.3.0

5 years ago

1.2.0

5 years ago

0.1.0

5 years ago