DatePicker 日期选择器

基础用法

<template>
  <div>
    <div class="container">
      <div class="block">
        <span class="title">日期</span>
        <plv-date-picker v-model="date1"></plv-date-picker>
      </div>
      <div class="block">
        <span class="title">月份</span>
        <plv-date-picker v-model="date2" type="month"></plv-date-picker>
      </div>
    </div>
    <div class="container">
      <div class="block">
        <span class="title">多个日期</span>
        <plv-date-picker v-model="date3" type="dates"></plv-date-picker>
      </div>
      <div class="block">
        <span class="title">日期范围</span>
        <plv-date-picker v-model="date4" type="daterange"></plv-date-picker>
      </div>
    </div>
    <div class="container">
      <div class="block">
        <span class="title">年份</span>
        <plv-date-picker v-model="date5" type="year"></plv-date-picker>
      </div>
      <div class="block">
        <span class="title">日期范围（带快捷选项）</span>
        <plv-date-picker v-model="date6" type="daterange" :picker-options="pickerOptions"></plv-date-picker>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      date1: '',
      date2: '',
      date3: [],
      date4: [],
      date5: '',
      date6: [],
      pickerOptions: {
        shortcuts: [
          {
            text: '今天',
            onClick(picker) {
              console.log('今天', picker);
              const start = new Date();
              const end = new Date();
              picker.emitChange([start, end]);
              picker.closePopper();
            }
          },
          {
            text: '近一个月',
            onClick(picker) {
              console.log('近一个月', picker);
              const start = new Date();
              const end = new Date();
              start.setDate(start.getDate() - 30);
              picker.emitChange([start, end]);
              picker.closePopper();
            }
          }
        ]
      }
    };
  }
};
</script>

显示代码

禁止今天之后的日期

<template>
  <plv-date-picker v-model="date" disabled-after-now />
</template>

<script>
export default {
  data() {
    return {
      date: ''
    };
  }
}
</script>

显示代码

禁止今天之前的日期

<template>
  <plv-date-picker v-model="date" disabled-before-now />
</template>

<script>
export default {
  data() {
    return {
      date: ''
    };
  }
}
</script>

显示代码

禁止跨月选择日期

<template>
  <plv-date-picker
    v-model="date"
    type="daterange"
    disabled-across-month
  />
</template>

<script>
export default {
  data() {
    return {
      date: []
    };
  }
}
</script>

显示代码

允许选择日期

<template>
  <div>
    <plv-date-picker v-model="date1" :allow-date="allowDate" />
    <br />
    <plv-date-picker v-model="date2" :allow-month="allowMonth" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      date1: new Date(2021, 3, 15),
      date2: new Date(2021, 2, 10),
      allowDate: [
        new Date(2021, 3, 15),
        new Date(2021, 3, 31),
        new Date(2021, 4, 10),
      ],
      allowMonth: new Date(2021, 2),
    };
  }
};
</script>

显示代码

Date Format

format、valueForma 进行相关的格式定义。以下以 UTC 2020 年 1 月 2 日 03:04:05 为例：

格式	说明	举例
yyyy	年	2020
M	月，不补 0	1
MM	月	01
d	日，不补 0	2
dd	日	02
H	小时，24 小时制，不补 0	3
HH	小时，24 小时制	03
h	小时，12 小时制，须和 A 或 a 使用，不补 0	3
hh	小时，12 小时制，须和 A 或 a 使用	03
m	分钟，不补 0	4
mm	分钟	04
s	秒，不补 0	5
ss	秒	05
timestamp	时间戳，只能单独使用	1577905445000

Attributes

参数	说明	类型	可选值	默认值
value / v-model	绑定值	Date Array String	-	-
readonly	是否只读	Boolean	-	false
disabled	是否禁用	Boolean	-	false
clearable	是否显示清除按钮	Boolean	-	false
size	尺寸	String	medium small mini	-
placeholder	占位符	String	-	请选择
start-placeholder	开始时间占位符	String	-	开始时间
end-placeholder	结束时间占位符	String	-	结束时间
type	类型	String	month date dates daterange year	date
format	显示在输入框的格式	String	见日期格式	yyyy/MM/dd
value-format	绑定值的格式，不指定则为 Date 对象	String	见日期格式	-
allow-date	设置可允许选择的日期，适用于 date/daterange/dates，传入数组且为空数组时表示所有日期均可选择	Date Date[] Function(Date)	-	-
allow-month	设置可允许选择的月份，所有类型均适用，传入数组且为空数组时表示所有月份均可选择	Date Date[] Function(Date)	-	-
disabled-date	设置某日期的禁用状态，适用于 date/daterange/dates，函数参数为当前日期类型，返回 Boolean	Date Date[] Function(Date)	-	-
disabled-month	设置某月份的禁用状态，所有类型均适用，函数参数为日期类型，返回 Boolean	Date Date[] Function(Date)	-	-
disabled-after-now	禁用今天（今月）之后的日期选择	Boolean	-	false
disabled-before-now	禁用今天（今月）之前的日期选择	Boolean	-	false
disabled-across-month	禁止跨月查询，仅适用于 daterange 类型	Boolean	-	false
allow-range-pick-count v2.9.0	允许日期范围选择时的选择数量，[20, 30] 表示开始选择后，只能选前 20 天和后 30 天	Number Array	-	-
first-day-of-week	每周的第一天	Number	1 ~ 7	7
input-options	额外给输入框组件的参数	Object	-	-
prefix-icon	输入框前缀图标	String	-	-
suffix-icon	输入框后缀图标	String	-	-
picker-options	当前时间日期选择器特有的选项参考下表 ｜object	-	{}	-

picker Options

参数	说明	类型	可选值	默认值
shortcuts	设置快捷选项，需要传入 { text, onClick } 对象用法参考 demo 或下表	Object[]	-	-

onClick 回调说明

由于是对外直接抛出了 datePicker，你可以调用整个时间选择器组件的所有方法和值，通常仅建议使用 datePicker.emitChange([startTime, endTime]) 抛出值，和 datePicker.closePopper(); 关闭面板

shortcuts

参数	说明	类型	可选值	默认值
text	标题文本	-	-
onClick	选中后的回调函数，参数是 datePicker,可触发 emitChange 事件设置选择器的值。例如 datePicker.emitChange([startTime, endTime])	-	-

Events

事件名称	说明	回调参数
change	绑定值修改时触发	最新的值
open	在选择器打开时触发	-
close	在选择器关闭时触发	-