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>
</template>

<script>
  export default {
    data() {
      return {
        date1: '',
        date2: '',
        date3: [],
        date4: []
      };
    }
  };
</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	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
first-day-of-week	每周的第一天	Number	1 ~ 7	7
input-options	额外给输入框组件的参数	Object	-	-
prefix-icon	输入框前缀图标	String	-	-
suffix-icon	输入框后缀图标	String	-	-

Events

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