Date日期
约 533 字大约 2 分钟
2025-02-06
基础用法
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>