# yuDatePicker 时间选择器
# 效果预览
选择日期
<template>
<yu-date-picker
v-model="selectDate1"
name="endDate"
label="合同结束日"
label-width="150px"
:disabled="false"
:details="false"
placeholder="请选择"
right-icon="share-o"
required
:rules="[{ required: true, message: '请选择合同结束日' }]"
format="yyyy年MM月dd日"
:minDate="new Date(2022,0,1)"
:maxDate="new Date(2025,12,0)"
:readonly="false"
@change="changeSelect"
@input="changeInput"/>
<template>
<script>
import yuCheckbox from '@/components/yu-checkbox/index.vue'
export default {
components: {
yuDatePicker
},
data() {
return {
selectDate1: new Date(),
};
},
methods: {
changeSelect(val) {
console.log('==changeSelect=======>', this.selectDate1)
},
changeInput(val) {
console.log('==changeInput=======>', this.selectDate1)
}
}
}
</script>
# Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
v-model | 双向绑定值 | string(2024-04-10 00:00:02)/Date | - | - |
label | 标题 | String | - | - |
label-width | 标题宽度 | string(px) | - | - |
disabled | 是否不可编辑,暗色 | Bool | true/false | - |
details | 是否是详情反显,不可点击,正常色 | Bool | true/false | - |
placeholder | 选项框placeholder | string | - | - |
right-icon | 选项框右侧图标名 | string | 支持vant图标库(icon)设置 | - |
required | 选项框是否必输 | Bool | true/false | - |
rules | 选项框校验规则 | Array | - | - |
format | 日期格式化 | string | yyyy年MM月dd日/yyyy-MM-dd。。。 | - |
minDate | 选择器最小时间 | Date | - | - |
maxDate | 选择器最大时间 | Date | - | - |
readonly | 是否只读,只可选中查看,不可切换日期 | Bool | true/false | - |
maxDate | 选择器最大时间 | Date | - | - |
# 方法
方法名 | 说明 | 参数 |
---|---|---|
changeSelect | 选择切换回调 | |
changeInput | 选择切换回调 |