Sard Uniapp

Appearance

在新窗口打开⤴

DatetimePickerInput日期时间输入框

介绍 ​

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

引入 ​

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

代码演示 ​

基础使用 ​

使用 v-model 绑定当前值，通过 title 和 placeholder 属性设置弹出框标题和输入框占位文本。

在点击输入框后会显示日期时间弹出框。

vue
<template>
  <sar-list card>
    <sar-list-item>
      <sar-datetime-picker-input
        v-model="value"
        title="请选择日期"
        placeholder="请选择日期"
        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()"
    />
    <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-picker-input
        v-model="value"
        title="请选择日期"
        placeholder="请选择日期"
        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()"
    />
    <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-picker-input
        v-model="value"
        title="请选择日期"
        placeholder="请选择日期"
        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()"
    />
    <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-picker-input
        v-model="value"
        title="请选择日期"
        placeholder="请选择日期"
        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()"
    />
    <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-picker-input
        v-model="value"
        title="请选择日期"
        placeholder="请选择日期"
        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="设置为 2025/01/01"
      arrow
      hover
      @click="value = '2025/01/01'"
    />
    <sar-list-item title="清空" arrow hover @click="value = undefined" />
  </sar-list>
</template>

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

const value = ref<string | undefined>('')

const onChange = (value: any) => {
  console.log('change', value)
}
</script>
vue
<template>
  <sar-list card>
    <sar-list-item>
      <sar-datetime-picker-input
        v-model="value"
        title="请选择日期"
        placeholder="请选择日期"
        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="设置为 2025/01/01"
      arrow
      hover
      @click="value = '2025/01/01'"
    />
    <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>

min、max 联动 ​

可以通过 min 和 max 属性使两个选择器联动。

选择日期时间范围，使用 DatetimeRangePickerInput 是更好的选择。

vue
<template>
  <sar-form>
    <sar-form-item label="开始时间" star-position="right" name="startTime">
      <sar-datetime-picker-input
        v-model="formData.startTime"
        title="请选择开始时间"
        placeholder="请选择开始时间"
        clearable
        type="yMdh"
        outlet-format="YYYY-MM-DD HH时"
      />
    </sar-form-item>

    <sar-form-item label="结束时间" star-position="right" name="endTime">
      <sar-datetime-picker-input
        v-model="formData.endTime"
        title="请选择结束时间"
        placeholder="请选择结束时间"
        clearable
        type="yMdh"
        outlet-format="YYYY-MM-DD HH时"
        :min="formData.startTime"
      />
    </sar-form-item>
  </sar-form>
</template>

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

const formData = reactive({
  startTime: undefined,
  endTime: undefined,
})
</script>
vue
<template>
  <sar-form>
    <sar-form-item label="开始时间" star-position="right" name="startTime">
      <sar-datetime-picker-input
        v-model="formData.startTime"
        title="请选择开始时间"
        placeholder="请选择开始时间"
        clearable
        type="yMdh"
        outlet-format="YYYY-MM-DD HH时"
      />
    </sar-form-item>

    <sar-form-item label="结束时间" star-position="right" name="endTime">
      <sar-datetime-picker-input
        v-model="formData.endTime"
        title="请选择结束时间"
        placeholder="请选择结束时间"
        clearable
        type="yMdh"
        outlet-format="YYYY-MM-DD HH时"
        :min="formData.startTime"
      />
    </sar-form-item>
  </sar-form>
</template>

<script setup lang="js">
import { reactive } from "vue";
const formData = reactive({
  startTime: void 0,
  endTime: void 0
});
</script>

API ​

DatetimePickerInputProps ​

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

属性描述类型默认值
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-

type 到 outletFormat 的映射： ​

ts
const mapTypeFormat = {
  y: 'YYYY',
  yM: 'YYYY-MM',
  yMd: 'YYYY-MM-DD',
  yMdh: 'YYYY-MM-DD HH',
  yMdhm: 'YYYY-MM-DD HH:mm',
  yMdhms: 'YYYY-MM-DD HH:mm:ss',
  hm: 'HH:mm',
  hms: 'HH:mm:ss',
}
js
const mapTypeFormat = {
  y: 'YYYY',
  yM: 'YYYY-MM',
  yMd: 'YYYY-MM-DD',
  yMdh: 'YYYY-MM-DD HH',
  yMdhm: 'YYYY-MM-DD HH:mm',
  yMdhms: 'YYYY-MM-DD HH:mm:ss',
  hm: 'HH:mm',
  hms: 'HH:mm:ss',
}

DatetimePickerInputSlots ​

继承 PopoutInputSlots

DatetimePickerInputEmits ​

继承 DatetimePickerPopoutEmits

Released under the MIT License.

Copyright © 2023-present wuzhitao