Date日期

基础用法

基本单位由type属性指定。快捷选项需配置shortcuts，禁用日期通过 disabledDate 设置，传入函数

<template>
  <avue-form v-model="form"
             :option="option"></avue-form>
</template>
<script>
export default {
  data () {
    return {
      form: {},
      option: {
        column: [{
          label: "日期",
          prop: "datetime",
          type: "datetime",
        }, {
          label: "快捷方式",
          prop: "date",
          type: "date",
          shortcuts: [{
            text: '今天',
            onClick (picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick (picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick (picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        }, {
          label: "禁止日期",
          prop: "date",
          type: "date",
          disabledDate (time) {
            return time.getTime() < Date.now();
          }
        }]
      },
    };
  }
}
</script>

显示代码复制代码复制代码

日期格式化

TIP

请注意大小写

格式	含义	备注	举例
YYYY	年		2017
M	月	不补0	1
MM	月		01
W	周	仅周选择器的format可用；不补0	1
WW	周	仅周选择器的format可用	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
A	AM/PM	仅format可用，大写	AM
a	am/pm	仅format可用，小写	am
timestamp	JS时间戳	仅value-format可用；组件绑定值为number类型	1483326245000

格式化

使用format指定输入框的格式；使用valueFormat指定绑定值的格式。

<template>
  <avue-form v-model="form"
             :option="option"></avue-form>
</template>
<script>
export default {
  data () {
    return {
      form: {},
      option: {
        column: [{
          label: "日期",
          prop: "datetime",
          type: "datetime",
          format: 'YYYY年MM月DD日 HH时mm分ss秒',
          valueFormat: 'YYYY-MM-DD HH:mm:ss'
        }, {
          label: "时间戳",
          prop: "datetime",
          type: "datetime",
          format: "YYYY-MM-DD HH:mm:ss",
          valueFormat: "timestamp",
        }]
      },
    };
  }
}
</script>

显示代码复制代码复制代码

其他日期单位

<template>
  <avue-form v-model="form"
             :option="option"></avue-form>
</template>
<script>
export default {
  data () {
    return {
      form: {},
      option: {
        labelWidth: 110,
        column: [{
          label: "时间",
          prop: "time",
          type: "time",
          format: 'HH:mm:ss',
          valueFormat: 'HH:mm:ss',
        }, {
          label: "周",
          prop: "week",
          type: "week",
          format: "YYYY 第 WW 周"
        }, {
          label: "月",
          prop: "month",
          type: "month",
        }, {
          label: "月范围",
          prop: "monthrange",
          type: "monthrange",
          format: 'YYYY-MM',
          valueFormat: 'YYYY-MM'
        }, {
          label: "年",
          prop: "year",
          type: "year",
        }, {
          label: "多个日期",
          prop: "dates",
          type: "dates",
          format: "YYYY-MM-DD",
          valueFormat: "YYYY-MM-DD",
        }]
      },
    };
  }
}
</script>

显示代码复制代码复制代码

日期范围

<template>
  <avue-form v-model="form"
             :option="option"></avue-form>
</template>
<script>
export default {
  data () {
    return {
      form: {},
      option: {
        labelWidth: 110,
        column: [{
          label: "时间日期范围",
          type: 'datetimerange',
          prop: 'datetimerange',
          format: 'YYYY-MM-DD HH:mm:ss',
          valueFormat: 'YYYY-MM-DD HH:mm:ss',
          startPlaceholder: '时间日期开始范围自定义',
          endPlaceholder: '时间日期结束范围自定义',
        }, {
          label: "日期范围",
          prop: "daterange",
          type: "daterange",
          format: 'YYYY-MM-DD',
          valueFormat: 'YYYY-MM-DD',
          startPlaceholder: '日期开始范围自定义',
          endPlaceholder: '日期结束范围自定义',
        }]
      },
    };
  }
}
</script>

显示代码复制代码复制代码

下拉框样式

.popperClass .available{
  background-color: rgba(0,0,0,.2);
}

popperClass属性配置样式的class名字

<template>
  <avue-form v-model="form"
             :option="option"></avue-form>
</template>
<script>
export default {
  data () {
    return {
      form: {},
      option: {
        column: [{
          label: "日期",
          prop: "datetime",
          popperClass: 'popperClass',
          type: "datetime",
        }]
      }
    }
  }
}
</script>

显示代码复制代码复制代码

默认的起始与结束时刻

使用datetimerange进行范围选择时，在日期选择面板中选定起始与结束的日期，默认会使用该日期的00:00:00作为起始与结束的时刻；通过选项defaultTime可以控制选中起始与结束日期时所使用的具体时刻。defaultTime接受一个数组，数组每项值为字符串，形如12:00:00，其中第一项控制起始日期的具体时刻，第二项控制结束日期的具体时刻。

<template>
  <avue-form v-model="form"
             :option="option"></avue-form>
</template>
<script>
export default {
  data () {
    return {
      form: {},
      option: {
        labelWidth: 110,
        column: [{
          label: "时间日期范围",
          type: 'datetimerange',
          prop: 'datetimerange',
          span: 24,
          format: 'YYYY-MM-DD HH:mm:ss',
          valueFormat: 'YYYY-MM-DD HH:mm:ss',
          startPlaceholder: '时间日期开始范围自定义',
          endPlaceholder: '时间日期结束范围自定义',
        }]
      },
    };
  }
}
</script>

显示代码复制代码复制代码

自定义模板

配置props名称加Type卡槽开启即可自定义日期框的内容

<template>
  <avue-form :option="option"
             v-model="form">
    <template #datetime-type="{item}">
      <span>{{ item.text  }}日</span>
    </template>
  </avue-form>
</template>
<script>
export default {
  data () {
    return {
      form: {},
      option: {
        column: [
          {
            label: '日期',
            prop: 'datetime',
            type: 'datetime'
          }]
      }
    }
  }
}
</script>

显示代码复制代码复制代码