Sard Uniapp

Appearance

在新窗口打开⤴

DatetimeRangePickerInput日期时间范围输入框1.11+

介绍 ​

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

引入 ​

js
import DatetimeRangePickerInput from 'sard-uniapp/components/datetime-range-picker-input/datetime-range-picker-input.vue'

代码演示 ​

基础使用 ​

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

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

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

输入框日期格式 ​

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

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

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

绑定值的格式 ​

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

vue
<template>
  <sar-list card>
    <sar-list-item>
      <sar-datetime-range-picker-input
        v-model="value"
        title="请选择日期"
        placeholder="请选择日期"
        :tabs="['开始日期', '结束日期']"
        clearable
        type="yMd"
        value-format="YYYY/MM/DD"
        @change="onChange"
      />
    </sar-list-item>
    <sar-list-item
      title="当前值："
      :value="JSON.stringify(value) ?? 'undefined'"
    />
    <sar-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'),
        ]
      "
    />
    <sar-list-item title="清空" arrow hover @click="value = undefined" />
  </sar-list>
</template>

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

const value = ref<string[]>()

const onChange = (value: any) => {
  console.log('change', value)
}
</script>
vue
<template>
  <sar-list card>
    <sar-list-item>
      <sar-datetime-range-picker-input
        v-model="value"
        title="请选择日期"
        placeholder="请选择日期"
        :tabs="['开始日期', '结束日期']"
        clearable
        type="yMd"
        value-format="YYYY/MM/DD"
        @change="onChange"
      />
    </sar-list-item>
    <sar-list-item
      title="当前值："
      :value="JSON.stringify(value) ?? 'undefined'"
    />
    <sar-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'),
        ]
      "
    />
    <sar-list-item title="清空" arrow hover @click="value = undefined" />
  </sar-list>
</template>

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

插槽 ​

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

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

<script setup lang="js">
import { ref } from "vue";
const value = ref();
const visible = ref(false);
const shortcuts = [
  {
    text: "\u4E0A\u5468",
    value: () => {
      const end = /* @__PURE__ */ new Date();
      const start = /* @__PURE__ */ new Date();
      start.setDate(start.getDate() - 7);
      return [start, end];
    }
  },
  {
    text: "\u4E0A\u6708",
    value: () => {
      const end = /* @__PURE__ */ new Date();
      const start = /* @__PURE__ */ new Date();
      start.setMonth(start.getMonth() - 1);
      return [start, end];
    }
  },
  {
    text: "\u8FD1\u4E09\u6708",
    value: () => {
      const end = /* @__PURE__ */ new Date();
      const start = /* @__PURE__ */ new Date();
      start.setMonth(start.getMonth() - 3);
      return [start, end];
    }
  }
];
const onShortcut = (item) => {
  value.value = item.value();
  visible.value = false;
};
</script>

API ​

DatetimeRangePickerInputProps ​

继承 DatetimeRangePickerPopoutProps 并有以下额外属性：

属性描述类型默认值
root-class弹出式输入框根元素类名string-
root-style弹出式输入框根元素样式StyleValue-
disabled禁用状态booleanfalse
readonly只读状态booleanfalse
clearable是否显示清空按钮booleanfalse
placeholder输入框占位符内容string-
outlet-format输出到输入框的日期格式，不指定则根据 type 属性自动生成格式string 详见特殊符号-
value-on-clear 1.19.2+设置点击清除按钮后的值() => any() => undefined
arrow 1.22+自定义箭头图标名string'caret-right'
arrow-family 1.22+自定义箭头图标字体string'sari'
input-props 1.22+自定义输入框组件属性InputProps-

DatetimeRangePickerInputSlots ​

继承 PopoutInputSlots 和 DatetimeRangePickerPopoutSlots

DatetimeRangePickerInputEmits ​

继承 DatetimeRangePickerPopoutEmits

Released under the MIT License.

Copyright © 2023-present wuzhitao