# 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>
显示代码复制代码复制代码