cloud-ui.vusion
Version:
Vusion Cloud UI
127 lines (119 loc) • 2.62 kB
Markdown
### 日期范围复杂情况
``` vue
<template>
<u-date-picker
range
picker="date"
width="large"
minDate="2023-01-01"
maxDate="2023-07-31"
start-date="2023-03-10"
end-date="2023-03-20"
preIcon="home"
suffixIcon="time"
clearable
@change="onChange"
@slect="onSelect"
@toggle="onToggle">
</u-date-picker>
</template>
<script>
export default {
methods: {
onChange($event) {
console.log('onChange', $event);
},
onSelect($event) {
console.log('onSelect',$event);
},
onToggle($event) {
console.log('onToggle',$event);
},
},
};
</script>
```
### 日期范围禁用
``` html
<u-date-picker
range
picker="date"
start-date="2023-03-10"
end-date="2023-03-20"
disabled>
</u-date-picker>
```
### 日期范围只读
``` html
<u-date-picker
range
picker="date"
start-date="2023-03-10"
end-date="2023-03-20"
readonly>
</u-date-picker>
```
### 表单验证
``` html
<u-form>
<u-form-item label="单日期" required rules="required">
<u-date-picker date="2022-03-10" clearable></u-date-picker>
</u-form-item>
<u-form-item label="日期范围" required rules="required">
<u-date-picker
start-date="2022-03-10"
end-date="2022-03-20"
range
clearable>
</u-date-picker>
</u-form-item>
</u-form>
```
### 格式化
``` vue
<template>
<div>
<u-date-picker
:value.sync="quarter"
picker="quarter"
show-formatter="YYYY年QQ"
width="large"
clearable
@change="onChange"
@slect="onSelect"
@toggle="onToggle">
</u-date-picker>
<u-date-picker
:value.sync="date"
picker="week"
:advanced-format="{ enable: true, value: 'GGGG年第W周' }"
width="large"
clearable
@change="onChange"
@slect="onSelect"
@toggle="onToggle">
</u-date-picker>
</div>
</template>
<script>
export default {
data() {
return {
date: '2023-07-07',
quarter: '2023-07-07'
}
},
methods: {
onChange($event) {
console.log('onChange', $event);
},
onSelect($event) {
console.log('onSelect',$event);
},
onToggle($event) {
console.log('onToggle',$event);
},
},
};
</script>
```