feat: 日期选择器增加快捷选择

coder77

2025-04-10 f58da404d459a3387f78d9bf6fe8933010f137bf

 forms/datePicker/CDatePicker.vue

@@ -4,41 +4,87 @@
 */

<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
                ref="input"
                :name="itemRes.name"
                :title="itemRes.label"
                :required="itemRes.required"
                :error="itemRes.error"
                :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
                ref="input"
                :name="itemRes.name"
                :title="itemRes.label"
                :required="itemRes.required"
                :error="itemRes.error"
                :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'">
            <picker
                mode="date"
                :start="limitStart || pickerStart"
                :end="limitEnd || pickerEnd"
                :fields="fields"
                :value="itemRes.formData[itemRes.name]"
                @change="evt => handleChange(evt.detail.value)"
            >
                <AtInput
                    :name="itemRes.name"
                    :title="itemRes.label"
                    :required="itemRes.required"
                    :error="itemRes.error"
                    :value="itemRes.formData[itemRes.name]"
                    :placeholder="placeholder"
                >
                    <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>
    </view>
</template>

@@ -67,15 +113,52 @@
        },
        // 占位提示
        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() {
        return {};
        const year = new Date().getFullYear();
        return {
            pickerStart: year - 30 + '-01-01',
            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() {},
};