介绍

组合了日期时间范围、弹出框组件，实现了便捷快速的日期时间范围选择功能。

代码演示

基础使用

使用 v-model 双向绑定当前值，使用 v-model:visible 控制弹出框显隐。

vue ts

<template>
  <s-datetime-range-picker-popout
    v-model="date"
    v-model:visible="visible"
    title="请选择"
    :tabs="['开始日期', '结束日期']"
    type="yMd"
    @change="onChange"
  />

  <s-list card>
    <s-list-item>
      <s-button @click="visible = true">
        {{ date ? displayText : '请选择' }}
      </s-button>
    </s-list-item>
    <s-list-item
      title="设置为前一个月"
      arrow
      hover
      @click="date = [new Date(new Date().setMonth(new Date().getMonth() - 1)), new Date()]"
    />
    <s-list-item title="清空" arrow hover @click="date = undefined" />
  </s-list>
</template>

<script setup lang="ts">
import { formatDate } from 'sard'
import { computed, ref } from 'vue'

const visible = ref(false)
const date = ref<Date[]>()

const displayText = computed(() => {
  return JSON.stringify(date.value?.map((item) => formatDate(item, 'YYYY-MM-DD')))
})

const onChange = (value: any) => {
  console.log('change', value)
}
</script>

vue js

<template>
  <s-datetime-range-picker-popout
    v-model="date"
    v-model:visible="visible"
    title="请选择"
    :tabs="['开始日期', '结束日期']"
    type="yMd"
    @change="onChange"
  />

  <s-list card>
    <s-list-item>
      <s-button @click="visible = true">
        {{ date ? displayText : '请选择' }}
      </s-button>
    </s-list-item>
    <s-list-item
      title="设置为前一个月"
      arrow
      hover
      @click="date = [new Date(new Date().setMonth(new Date().getMonth() - 1)), new Date()]"
    />
    <s-list-item title="清空" arrow hover @click="date = undefined" />
  </s-list>
</template>

<script setup lang="js">
import { formatDate } from 'sard'
import { computed, ref } from 'vue'
const visible = ref(false)
const date = ref()
const displayText = computed(() => {
  return JSON.stringify(date.value?.map((item) => formatDate(item, 'YYYY-MM-DD')))
})
const onChange = (value) => {
  console.log('change', value)
}
</script>

API

DatetimeRangePickerPopoutProps

继承 DatetimeRangePickerProps 和 FormPopoutProps。

DatetimeRangePickerPopoutEmits

继承 MotionEmits。

事件	描述	类型
update:visible	弹出框显隐时触发	(visible: boolean) => void
update:modelValue	日期时间输入组件值改变时触发	(date: (Date | string)[] | undefined) => void
change	日期时间输入组件值改变时触发	(date: (Date | string)[] | undefined) => void
confirm	点击确定按钮时触发	(date: (Date | string)[] | undefined) => void

DatetimeRangePickerPopoutSlots

继承 DatetimeRangePickerSlots