# 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 月份的日期与序号
上次更新: February 19th 2022, 11:25:58