van-datetime-dict组件

接收datetime组件所有属性及方法。此组件主要作用为选中值后 再次打开并将选项滚到其他位置，关掉再打开时，能够定位到当前值所在位置。

新增永久等选项配置，主要提供给身份证有效期，新增永久选项

<template>
  <div class="van-datetime-dict">
    <van-datetime-dict label="日期(dateTime)" title="日期(dateTime)" label-width="140px" input-align="right" placeholder="请选择日期" v-model="value1"></van-datetime-dict>
    <van-datetime-dict  label="dateTime赋值" title="dateTime赋值" label-width="140px" input-align="right" placeholder="请选择日期"  v-model="value11"></van-datetime-dict>
    <van-datetime-dict  label="日期(date)" type="date" title="日期(date)" label-width="140px" input-align="right" placeholder="请选择日期"  v-model="value2"></van-datetime-dict>
    <van-datetime-dict  label="日期(date赋值)" type="date" title="日期(date赋值)" label-width="140px" input-align="right" placeholder="请选择日期"  v-model="value22"></van-datetime-dict>
    <van-datetime-dict  label="日期(time)" type="time" title="日期(time)" label-width="140px" input-align="right" placeholder="请选择日期"  v-model="value3"></van-datetime-dict>
    <van-datetime-dict  label="日期(time赋值)" type="time" title="日期(time赋值)" label-width="140px" input-align="right" placeholder="请选择日期"  v-model="value33"></van-datetime-dict>
    <van-datetime-dict  label="日期(year-month)" type="year-month" title="日期(year-month)" label-width="140px" input-align="right" placeholder="请选择日期"  v-model="value4"></van-datetime-dict>
    <van-datetime-dict  label="日期(year-month赋值)" type="year-month" title="日期(year-month赋值)" label-width="140px" input-align="right" placeholder="请选择日期"  v-model="value44"></van-datetime-dict>
    <van-datetime-dict  label="日期(month-day)" type="month-day" title="日期(month-day)" label-width="140px" input-align="right" placeholder="请选择日期"  v-model="value5"></van-datetime-dict>
    <van-datetime-dict  label="日期(month-day赋值)" type="month-day" title="日期(month-day赋值)" label-width="140px" input-align="right" placeholder="请选择日期"  v-model="value55"></van-datetime-dict>
    <van-datetime-dict  label="日期(datehour)" type="datehour" title="日期(datehour)" label-width="140px" input-align="right" placeholder="请选择日期"  v-model="value6"></van-datetime-dict>
    <van-datetime-dict  label="日期(datehour赋值)" type="datehour" title="日期(datehour赋值)" label-width="140px" input-align="right" placeholder="请选择日期"  v-model="value66"></van-datetime-dict>
    <van-datetime-dict showForver  label="日期(永久)" title="日期(datehour)" label-width="140px" input-align="right" placeholder="请选择日期"  v-model="value7"></van-datetime-dict>
    <van-datetime-dict showForver label="日期(永久赋值)" title="日期(datehour赋值)" label-width="140px" input-align="right" placeholder="请选择日期"  v-model="value77"></van-datetime-dict>
    <van-datetime-dict showForver label="日期(永远赋值)" showValueLabel="永远" title="日期(datehour赋值)" label-width="140px" input-align="right" placeholder="请选择日期"  v-model="value777"></van-datetime-dict>
    <van-datetime-dict showForver label="日期(永久赋值)" forverValue="2099-12-31" title="日期(datehour赋值)" label-width="140px" input-align="right" placeholder="请选择日期"  v-model="value7777"></van-datetime-dict>
    <van-datetime-dict showForver label="自定义格式化" dateFormat="YYYY-MM-DD HH:mm" title="自定义格式化" label-width="140px" input-align="right" placeholder="请选择日期"  v-model="value8"></van-datetime-dict>
    <van-datetime-dict showForver label="默认值" defaultValue="2021-01-01 12:00" title="默认值" label-width="140px" input-align="right" placeholder="请选择日期"  v-model="value9"></van-datetime-dict>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value1: "",
      value11: "2016-06-07 05:00:00",
      value2: "",
      value22: "2022-03-21",
      value3: "",
      value33: "07:05",
      value4: "",
      value44: "2012-07",
      value5: "",
      value55: "05-12",
      value6: "",
      value66: "2019-07-01 07",
      value7: "",
      value77: "forver",
      value777: "forver",
      value7777: "2099-12-31",
      value8: "",
      value9: "faf"
    }
  }
}
</script>

<style>

</style>

显示代码

Datetime Dict Attributes

参数	说明	类型	可选值	默认值
showValueLabel	永久按钮文字配置	String	—	永久
forverValue	永久对应的值	Object	—	false
keyValue	是否展示永久按钮	Boolean	—	false
dateFormat	日期格式化	String	date， month，datetime，time， year	""
defaultValue	默认值，当日期格式化不存在时展示默认值	Function	—	""

日期格式

使用dateFormat指定日期数据返回的格式

WARNING

请注意大小写

标识	示例	描述
YY	18	年，两位数
YYYY	2018	年，四位数
M	1-12	月，从1开始
MM	01-12	月，两位数字
MMM	Jan-Dec	月，英文缩写
D	1-31	日
DD	01-31	日，两位数
H	0-23	24小时
HH	00-23	24小时，两位数
h	1-12	12小时
hh	01-12	12小时，两位数
m	0-59	分钟
mm	00-59	分钟，两位数
s	0-59	秒
ss	00-59	秒，两位数
S	0-9	毫秒（百），一位数
SS	00-99	毫秒（十），两位数
SSS	000-999	毫秒，三位数
Z	-05:00	UTC偏移
ZZ	-0500	UTC偏移，两位数
A	AM / PM	上/下午，大写
a	am / pm	上/下午，小写
Do	1st... 31st	月份的日期与序号