cv-date-base 日期选择框 ¶
简要 ¶
从底部弹起的滚动选择器 | 日期选择器 mode = date
本组件一般用于 日期选择
日期选择框,一般和表单配合使用,默认为实心白色背景。
示例 ¶
vue
<template>
<view class="content">
<view class="components-title">
<view class="components-title-t">cv-date-base</view>
<view class="components-title-d">日期选择</view>
</view>
<cv-form-base ref="refFormBase" style="padding: 0 10px">
<cv-form-item label="日期选择">
<cv-date-base label="" v-model="formData.date" />
</cv-form-item>
<!--有默认时间 -->
<cv-form-item label="日期选择">
<cv-date-base v-model="formData.date2" />
</cv-form-item>
<!-- 限制开始时间 -->
<cv-form-item label="日期选择">
<cv-date-base v-model="formData.date" startDate="2020-09-02" />
</cv-form-item>
<!-- 限制结束时间 -->
<cv-form-item label="日期选择">
<cv-date-base v-model="formData.date" endDate="2020-09-02" />
</cv-form-item>
</cv-form-base>
</view>
</template>
<script>
export default {
data() {
return {
formData: {
date: '',
date2: ''
}
};
},
onLoad() {
setTimeout(() => {
this.$testReqMock().then((res) => {
this.formData.date2 = '2020-02-28';
});
console.log('模拟请求数据', this.formData);
}, 1000);
},
methods: {}
};
</script>
属性 ¶
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
v-model | String | - | 数据双向绑定 |
placeholder | String | - | 占位符 |
startDate | String | - | 开始日期(YYYY-MM-dd) |
endDate | String | - | 结束日期(YYYY-MM-dd) |