DatetimeRangePickerInput

介绍

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

代码演示

基础使用

和 DatetimePickerInput 组件用法类似，多了一个 tabs 属性设置起始和结束标签页标题。

vue tsvue js

vue

<template>
  <s-list card>
    <s-list-item>
      <s-datetime-range-picker-input
        v-model="value"
        title="请选择日期"
        placeholder="请选择日期"
        :tabs="['开始日期', '结束日期']"
        clearable
        type="yMd"
        @change="onChange"
      />
    </s-list-item>
    <s-list-item title="当前值：" :value="JSON.stringify(value) ?? 'undefined'" />
    <s-list-item
      title="设置为前一个月"
      arrow
      hover
      @click="value = [new Date(new Date().setMonth(new Date().getMonth() - 1)), new Date()]"
    />
    <s-list-item title="清空" arrow hover @click="value = undefined" />
  </s-list>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref<Date[]>()

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

vue

<template>
  <s-list card>
    <s-list-item>
      <s-datetime-range-picker-input
        v-model="value"
        title="请选择日期"
        placeholder="请选择日期"
        :tabs="['开始日期', '结束日期']"
        clearable
        type="yMd"
        @change="onChange"
      />
    </s-list-item>
    <s-list-item title="当前值：" :value="JSON.stringify(value) ?? 'undefined'" />
    <s-list-item
      title="设置为前一个月"
      arrow
      hover
      @click="value = [new Date(new Date().setMonth(new Date().getMonth() - 1)), new Date()]"
    />
    <s-list-item title="清空" arrow hover @click="value = undefined" />
  </s-list>
</template>

<script setup lang="js">
import { ref } from 'vue'
const value = ref()
const onChange = (value) => {
  console.log('change', value)
}
</script>

输入框日期格式

使用 outlet-format 属性自定义输入框日期展示的格式。

vue tsvue js

vue

<template>
  <s-list card>
    <s-list-item>
      <s-datetime-range-picker-input
        v-model="value"
        title="请选择日期"
        placeholder="请选择日期"
        :tabs="['开始日期', '结束日期']"
        clearable
        type="yMd"
        outlet-format="YYYY年MM月DD日"
        @change="onChange"
      />
    </s-list-item>
    <s-list-item title="当前值：" :value="JSON.stringify(value) ?? 'undefined'" />
    <s-list-item
      title="设置为前一个月"
      arrow
      hover
      @click="value = [new Date(new Date().setMonth(new Date().getMonth() - 1)), new Date()]"
    />
    <s-list-item title="清空" arrow hover @click="value = undefined" />
  </s-list>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref<Date[]>()

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

vue

<template>
  <s-list card>
    <s-list-item>
      <s-datetime-range-picker-input
        v-model="value"
        title="请选择日期"
        placeholder="请选择日期"
        :tabs="['开始日期', '结束日期']"
        clearable
        type="yMd"
        outlet-format="YYYY年MM月DD日"
        @change="onChange"
      />
    </s-list-item>
    <s-list-item title="当前值：" :value="JSON.stringify(value) ?? 'undefined'" />
    <s-list-item
      title="设置为前一个月"
      arrow
      hover
      @click="value = [new Date(new Date().setMonth(new Date().getMonth() - 1)), new Date()]"
    />
    <s-list-item title="清空" arrow hover @click="value = undefined" />
  </s-list>
</template>

<script setup lang="js">
import { ref } from 'vue'
const value = ref()
const onChange = (value) => {
  console.log('change', value)
}
</script>

绑定值的格式

默认绑定的值为 Date 实例，提交到后端时需要手动转换为特定格式的字符串；使用 value-format 属性可以将这个转换交由组件库处理。

vue tsvue js

vue

<template>
  <s-list card>
    <s-list-item>
      <s-datetime-range-picker-input
        v-model="value"
        title="请选择日期"
        placeholder="请选择日期"
        :tabs="['开始日期', '结束日期']"
        clearable
        type="yMd"
        value-format="YYYY/MM/DD"
        @change="onChange"
      />
    </s-list-item>
    <s-list-item title="当前值：" :value="JSON.stringify(value) ?? 'undefined'" />
    <s-list-item
      title="设置为前一个月"
      arrow
      hover
      @click="
        value = [
          formatDate(new Date(new Date().setMonth(new Date().getMonth() - 1)), 'YYYY/MM/DD'),
          formatDate(new Date(), 'YYYY/MM/DD'),
        ]
      "
    />
    <s-list-item title="清空" arrow hover @click="value = undefined" />
  </s-list>
</template>

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

const value = ref<string[]>()

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

vue

<template>
  <s-list card>
    <s-list-item>
      <s-datetime-range-picker-input
        v-model="value"
        title="请选择日期"
        placeholder="请选择日期"
        :tabs="['开始日期', '结束日期']"
        clearable
        type="yMd"
        value-format="YYYY/MM/DD"
        @change="onChange"
      />
    </s-list-item>
    <s-list-item title="当前值：" :value="JSON.stringify(value) ?? 'undefined'" />
    <s-list-item
      title="设置为前一个月"
      arrow
      hover
      @click="
        value = [
          formatDate(new Date(new Date().setMonth(new Date().getMonth() - 1)), 'YYYY/MM/DD'),
          formatDate(new Date(), 'YYYY/MM/DD'),
        ]
      "
    />
    <s-list-item title="清空" arrow hover @click="value = undefined" />
  </s-list>
</template>

<script setup lang="js">
import { formatDate } from 'sard'
import { ref } from 'vue'
const value = ref()
const onChange = (value) => {
  console.log('change', value)
}
</script>

插槽

可以使用 header 插槽在顶部添加快捷选择按钮。

vue tsvue js

vue

<template>
  <s-list card>
    <s-list-item>
      <s-datetime-range-picker-input
        v-model="value"
        v-model:visible="visible"
        title="请选择日期"
        placeholder="请选择日期"
        :tabs="['开始日期', '结束日期']"
        clearable
        type="yMd"
      >
        <template #header>
          <div class="flex flex-wrap justify-center">
            <s-button
              v-for="item in shortcuts"
              :key="item.text"
              variant="link"
              @click="onShortcut(item)"
            >
              {{ item.text }}
            </s-button>
          </div>
        </template>
      </s-datetime-range-picker-input>
    </s-list-item>
    <s-list-item title="当前值：" :value="JSON.stringify(value) ?? 'undefined'" />
    <s-list-item
      title="设置为前一个月"
      arrow
      hover
      @click="value = [new Date(new Date().setMonth(new Date().getMonth() - 1)), new Date()]"
    />
    <s-list-item title="清空" arrow hover @click="value = undefined" />
  </s-list>
</template>

<script setup lang="ts">
import { ref } from 'vue'

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

const shortcuts = [
  {
    text: '上周',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setDate(start.getDate() - 7)
      return [start, end]
    },
  },
  {
    text: '上月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setMonth(start.getMonth() - 1)
      return [start, end]
    },
  },
  {
    text: '近三月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setMonth(start.getMonth() - 3)
      return [start, end]
    },
  },
]

const onShortcut = (item: (typeof shortcuts)[number]) => {
  value.value = item.value()
  visible.value = false
}
</script>

vue

<template>
  <s-list card>
    <s-list-item>
      <s-datetime-range-picker-input
        v-model="value"
        v-model:visible="visible"
        title="请选择日期"
        placeholder="请选择日期"
        :tabs="['开始日期', '结束日期']"
        clearable
        type="yMd"
      >
        <template #header>
          <div class="flex flex-wrap justify-center">
            <s-button
              v-for="item in shortcuts"
              :key="item.text"
              variant="link"
              @click="onShortcut(item)"
            >
              {{ item.text }}
            </s-button>
          </div>
        </template>
      </s-datetime-range-picker-input>
    </s-list-item>
    <s-list-item title="当前值：" :value="JSON.stringify(value) ?? 'undefined'" />
    <s-list-item
      title="设置为前一个月"
      arrow
      hover
      @click="value = [new Date(new Date().setMonth(new Date().getMonth() - 1)), new Date()]"
    />
    <s-list-item title="清空" arrow hover @click="value = undefined" />
  </s-list>
</template>

<script setup lang="js">
import { ref } from 'vue'
const value = ref()
const visible = ref(false)
const shortcuts = [
  {
    text: '上周',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setDate(start.getDate() - 7)
      return [start, end]
    },
  },
  {
    text: '上月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setMonth(start.getMonth() - 1)
      return [start, end]
    },
  },
  {
    text: '近三月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setMonth(start.getMonth() - 3)
      return [start, end]
    },
  },
]
const onShortcut = (item) => {
  value.value = item.value()
  visible.value = false
}
</script>

API

DatetimeRangePickerInputProps

继承 DatetimeRangePickerPopoutProps 和 PopoutInputProps 。

属性	描述	类型	默认值
outlet-format	输出到输入框的日期格式，不指定则根据 `type` 属性自动生成格式	string 详见特殊符号	-

DatetimeRangePickerInputSlots

继承 PopoutInputSlots 和 DatetimeRangePickerPopoutSlots

DatetimeRangePickerInputEmits

继承 DatetimeRangePickerPopoutEmits

介绍 ​

代码演示 ​

基础使用 ​

输入框日期格式 ​

绑定值的格式 ​

插槽 ​

API ​

DatetimeRangePickerInputProps ​

DatetimeRangePickerInputSlots ​

DatetimeRangePickerInputEmits ​

介绍

代码演示

基础使用

输入框日期格式

绑定值的格式

插槽

API

DatetimeRangePickerInputProps

DatetimeRangePickerInputSlots

DatetimeRangePickerInputEmits