直播电商平台开发，自定义日期区间选择器组件

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