From f58da404d459a3387f78d9bf6fe8933010f137bf Mon Sep 17 00:00:00 2001
From: coder77 <2293444075@qq.com>
Date: Thu, 10 Apr 2025 11:02:22 +0800
Subject: [PATCH] feat: 日期选择器增加快捷选择
---
forms/datePicker/CDatePicker.vue | 85 ++++++++++++++++++++++++++++++++++++------
1 files changed, 72 insertions(+), 13 deletions(-)
diff --git a/forms/datePicker/CDatePicker.vue b/forms/datePicker/CDatePicker.vue
index 416fa2a..824a791 100644
--- a/forms/datePicker/CDatePicker.vue
+++ b/forms/datePicker/CDatePicker.vue
@@ -4,12 +4,13 @@
*/
<template>
- <view class="c-date-picker">
+ <view class="c-date-picker" :class="readOnly ? 'read-only' : ''">
<CDateRangeAction
- v-if="mode==='dateRange'"
+ v-if="mode === 'dateRange'"
:value="itemRes.formData[itemRes.name]"
- :onChange="evt=>handleChange(evt)"
+ :onChange="evt => handleChange(evt)"
:placeholder="placeholder"
+ :rangeTypes="rangeTypes"
>
<AtInput
:name="itemRes.name"
@@ -19,13 +20,21 @@
:value="itemRes.formData[itemRes.name]"
:placeholder="placeholder"
>
- <view class="at-icon at-icon-chevron-right" />
+ <view
+ v-show="!readOnly && !showClear"
+ class="at-icon at-icon-chevron-right"
+ />
+ <view
+ v-show="!readOnly && showClear"
+ class="at-icon at-icon-close"
+ @tap.stop="evt => handleClear()"
+ ></view>
</AtInput>
</CDateRangeAction>
<CDateTimeAction
- v-else-if="mode==='dateTime'"
+ v-else-if="mode === 'dateTime'"
:value="itemRes.formData[itemRes.name]"
- :onChange="evt=>handleChange(evt)"
+ :onChange="evt => handleChange(evt)"
:placeholder="placeholder"
>
<AtInput
@@ -36,16 +45,25 @@
:value="itemRes.formData[itemRes.name]"
:placeholder="placeholder"
>
- <view class="at-icon at-icon-chevron-right" />
+ <view
+ v-show="!readOnly && !showClear"
+ class="at-icon at-icon-chevron-right"
+ />
+ <view
+ v-show="!readOnly && showClear"
+ class="at-icon at-icon-close"
+ @tap.stop="evt => handleClear()"
+ ></view>
</AtInput>
</CDateTimeAction>
- <view v-else-if="mode==='date'">
+ <view v-else-if="mode === 'date'">
<picker
mode="date"
- :start="pickerStart"
- :end="pickerEnd"
+ :start="limitStart || pickerStart"
+ :end="limitEnd || pickerEnd"
+ :fields="fields"
:value="itemRes.formData[itemRes.name]"
- @change="evt=>handleChange(evt.detail.value)"
+ @change="evt => handleChange(evt.detail.value)"
>
<AtInput
:name="itemRes.name"
@@ -55,7 +73,15 @@
:value="itemRes.formData[itemRes.name]"
:placeholder="placeholder"
>
- <view class="at-icon at-icon-chevron-right" />
+ <view
+ v-show="!readOnly && !showClear"
+ class="at-icon at-icon-chevron-right"
+ />
+ <view
+ v-show="!readOnly && showClear"
+ class="at-icon at-icon-close"
+ @tap.stop="evt => handleClear()"
+ ></view>
</AtInput>
</picker>
</view>
@@ -87,6 +113,29 @@
},
// 占位提示
placeholder: String,
+ // 开始日期
+ limitStart: String,
+ // 结束日期
+ limitEnd: String,
+ // 选择器类型，选日期、选周、选月
+ picker: String, //date,week,month
+ // 预设类型
+ rangeTypes: Array,
+ // 日期选择粒度 year、month、day
+ fields: {
+ type: String,
+ default: 'day',
+ },
+ // 是否只读
+ readOnly: {
+ type: Boolean,
+ default: false,
+ },
+ // 允许清除
+ allowClear: {
+ type: Boolean,
+ default: false,
+ },
},
data() {
const year = new Date().getFullYear();
@@ -95,11 +144,21 @@
pickerEnd: year + 30 + '-12-31',
};
},
- computed: {},
+ computed: {
+ showClear() {
+ if (!this.allowClear) {
+ return false;
+ }
+ return !!this.itemRes.formData[this.itemRes.name];
+ },
+ },
methods: {
handleChange(val) {
this.itemRes.onChange(val);
},
+ handleClear() {
+ this.itemRes.onChange('');
+ },
},
mounted() {},
};
--
Gitblit v1.9.1