基础用法

vue2

vue3

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

<template>
  <tvue-form v-model="form"
             :option="option"></tvue-form>
</template>

<script setup>
import { ref } from 'vue';

const form = ref({});

const option = ref({
  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>

日期格式化

提示

请注意大小写

格式	含义	备注	举例
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
X	JS时间戳	仅value-format可用；组件绑定值为number类型	1483326245000

格式化

vue2

vue3

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

<template>
  <tvue-form v-model="form"
             :option="option"></tvue-form>
</template>

<script setup>
import { ref } from 'vue';

const form = ref({});

const option = ref({
  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>

其他日期单位

vue2

vue3

<template>
  <tvue-form v-model="form"
             :option="option"></tvue-form>
</template>

<script setup>
import { ref } from 'vue';

const form = ref({});

const option = ref({
  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: "yearrange",
      type: "yearrange",
    },
    {
      label: "多个年份",
      prop: "years",
      type: "years",
      format: "YYYY",
      valueFormat: "YYYY",
    },
    {
      label: "多个月份",
      prop: "months",
      type: "months",
      format: "YYYY-MM",
      valueFormat: "YYYY-MM",
    },
    {
      label: "多个日期",
      prop: "dates",
      type: "dates",
      format: "YYYY-MM-DD",
      valueFormat: "YYYY-MM-DD",
    },
  ],
});
</script>

日期范围

vue2

vue3

<template>
  <tvue-form v-model="form"
             :option="option"></tvue-form>
</template>

<script setup>
import { ref } from 'vue';

const form = ref({});

const option = ref({
  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);
}

vue2

vue3

`popperClass`属性配置样式的`class`名字

<template>
  <tvue-form v-model="form"
             :option="option"></tvue-form>
</template>

<script setup>
import { ref } from 'vue';

const form = ref({});

const option = ref({
  column: [
    {
      label: "日期",
      prop: "datetime",
      popperClass: 'popperClass',
      type: "datetime",
    }
  ]
});
</script>

默认的起始与结束时刻

vue2

vue3

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

<template>
  <tvue-form v-model="form"
             :option="option"></tvue-form>
</template>

<script setup>
import { ref } from 'vue';

const form = ref({});

const option = ref({
  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>

自定义模板

vue2

vue3

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

<template>
  <tvue-form :option="option"
             v-model="form">
    <template #datetime-type="{ item }">
      <span>{{ item.text }}日</span>
    </template>
  </tvue-form>
</template>

<script setup>
import { ref } from 'vue';

const form = ref({});

const option = ref({
  column: [
    {
      label: '日期',
      prop: 'datetime',
      type: 'datetime'
    }
  ]
});
</script>