Taro：自定义日期区间选择器组件

朱雀 2024-04-03 11:17 177阅读 0赞

本人介绍如何实现自定义日期区间选择器组件，实现选择开始日期和结束日期的实际范围区间。

#### 1、展示效果 ####

![d28896e3e4fb4985a9ed551e68f51e56.png][]

![3670862cd9d44970a39369ea1464a417.png][]

#### 2、组件代码 ####

<template>
      <view>
        <nut-row type="flex">
          <nut-col :span="14">
            <nut-cell title="日期区间" :desc="start ? `${startDesc}` : '开始日期'" @click="startShow = true" />
          </nut-col>
          <nut-col :span="10">
            <nut-cell title="~" :desc="end ? `${endDesc}` : '结束日期'" @click="endShow = true" />
          </nut-col>
        </nut-row>
        <nut-datepicker
          v-model="start"
          v-model:visible="startShow"
          :min-date="minDate"
          :max-date="maxDate"
          :is-show-chinese="false"
          :three-dimensional="false"
          @confirm="startConfirm"
        />
        <nut-datepicker
          v-model="end"
          v-model:visible="endShow"
          :min-date="minDate"
          :max-date="maxDate"
          :is-show-chinese="false"
          :three-dimensional="false"
          @confirm="endConfirm"
        />
      </view>
    </template>
    <script lang="ts" setup>
      import { defineComponent, ref, watchEffect } from 'vue';
      import * as dayjs from 'dayjs';
    
      interface MyDateRangePickerProps {
        modelValue?: any[],
        minDate?: any,
        maxDate?: any,
      }
      const props = withDefaults(defineProps<MyDateRangePickerProps>(), {
        minDate: dayjs().subtract(2, 'year').toDate(),
        maxDate: new Date(),
      });
      const emit = defineEmits(['update:modelValue']);
    
      const data = ref<any[]>();
      const start = ref();
      const startShow = ref(false);
      const startDesc = ref();
      const end = ref();
      const endShow = ref(false);
      const endDesc = ref();
      
      watchEffect(() => {
        data.value = [props.modelValue?.[0], props.modelValue?.[1]];
        start.value = props.modelValue?.[0];
        startDesc.value = props.modelValue?.[0];
        end.value = props.modelValue?.[1];
        endDesc.value = props.modelValue?.[1];
      });
    
      // 开始日期确定事件
      function startConfirm({ selectedValue, selectedOptions }) {
        startDesc.value = selectedOptions.map((option) => option.text).join('-');
        start.value = selectedValue.join('-');
        if(dayjs(start.value).isAfter(end.value)){
          end.value = undefined;
        }
        data.value = [start.value ?? null, end.value ?? null];
        emit('update:modelValue', data.value);
      }
    
      // 结束日期确定事件
      function endConfirm({ selectedValue, selectedOptions }) {
        endDesc.value = selectedOptions.map((option) => option.text).join('-');
        end.value = selectedValue.join('-');
        if(dayjs(start.value).isAfter(end.value)){
          start.value = undefined;
        }
        data.value = [start.value ?? null, end.value ?? null];
        emit('update:modelValue', data.value);
      }
    </script>
    <script lang="ts">
      export default defineComponent({
        name: 'MyDateRangePicker',
      });
    </script>

#### 3、组件使用 ####

--------------------

[新时代农民工][Link 1]

[d28896e3e4fb4985a9ed551e68f51e56.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/95c0b0ce315542ff9695e0b1cc45abcf.png
[3670862cd9d44970a39369ea1464a417.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/9b8ce71a1ef4436f8c15c999a63e8576.png
[Link 1]: https://www.sgknight.cn/