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: '今天',
            value: new Date(),
          }, {
            text: '昨天',
            value: () => {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24)
              return date
            },
          }, {
            text: '一周前',
            value: () => {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
              return date
            }
          }]
        }, {
          label: "禁止日期",
          prop: "date",
          type: "date",
          disabledDate (time) {
            return time.getTime() < Date.now();
          }
        }]
      },
    };
  }
}
</script>
显示代码

日期格式化

TIP

请注意大小写

格式含义备注举例
YYYY2017
M不补01
MM01
W仅周选择器的format可用;不补01
WW仅周选择器的format可用01
D不补02
DD02
H小时24小时制;不补03
HH小时24小时制03
h小时12小时制,须和Aa使用;不补03
hh小时12小时制,须和Aa使用03
m分钟不补04
mm分钟04
s不补05
ss05
AAM/PMformat可用,大写AM
aam/pmformat可用,小写am
xJS时间戳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: "x",
        }]
      }
    };
  }
}
</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>
显示代码
Last Updated:
Contributors: smallwei
您正在浏览基于Avue 3.x文档; 点击这里 查看Avue 2.x 的文档