Sard Uniapp

Appearance

在新窗口打开⤴

DatetimePickerPopout日期时间弹出框1.16+

介绍 ​

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

引入 ​

js
import DatetimePickerPopout from 'sard-uniapp/components/datetime-picker-popout/datetime-picker-popout.vue'

代码演示 ​

基础使用 ​

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

vue
<template>
  <sar-datetime-picker-popout
    v-model="value"
    v-model:visible="visible"
    title="请选择日期"
    type="yMd"
    @change="onChange"
  />

  <sar-list card>
    <sar-list-item>
      <sar-button @click="visible = true">
        {{ value ? formatDate(value, 'YYYY-MM-DD') : '请选择' }}
      </sar-button>
    </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'
import { formatDate } from 'sard-uniapp'

const value = ref<Date | undefined>(new Date())
const visible = ref(false)

const onChange = (value: any) => {
  console.log('change', value)
}
</script>
vue
<template>
  <sar-datetime-picker-popout
    v-model="value"
    v-model:visible="visible"
    title="请选择日期"
    type="yMd"
    @change="onChange"
  />

  <sar-list card>
    <sar-list-item>
      <sar-button @click="visible = true">
        {{ value ? formatDate(value, 'YYYY-MM-DD') : '请选择' }}
      </sar-button>
    </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(/* @__PURE__ */ new Date());
const visible = ref(false);
const onChange = (value2) => {
  console.log("change", value2);
};
</script>

类型 ​

可以使用 yMdhms（年月日时分秒）进行任意组合，每个字母对应一列。

vue
<template>
  <sar-datetime-picker-popout
    v-model="date1"
    v-model:visible="visible1"
    title="年月日"
    type="yMd"
    value-format="YYYY-MM-DD"
  />

  <sar-datetime-picker-popout
    v-model="date2"
    v-model:visible="visible2"
    title="时分秒"
    type="hms"
    value-format="HH:mm:ss"
  />

  <sar-datetime-picker-popout
    v-model="date3"
    v-model:visible="visible3"
    title="月日时"
    type="Mdh"
    value-format="MM-DD HH"
  />

  <sar-list card>
    <sar-list-item
      title="年月日"
      arrow
      hover
      :value="JSON.stringify(date1)"
      @click="visible1 = true"
    />
    <sar-list-item
      title="时分秒"
      arrow
      hover
      :value="JSON.stringify(date2)"
      @click="visible2 = true"
    />
    <sar-list-item
      title="月日时"
      arrow
      hover
      :value="JSON.stringify(date3)"
      @click="visible3 = true"
    />
  </sar-list>
</template>

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

const date1 = ref<Date>()
const date2 = ref<Date>()
const date3 = ref<Date>()

const visible1 = ref(false)
const visible2 = ref(false)
const visible3 = ref(false)
</script>
vue
<template>
  <sar-datetime-picker-popout
    v-model="date1"
    v-model:visible="visible1"
    title="年月日"
    type="yMd"
    value-format="YYYY-MM-DD"
  />

  <sar-datetime-picker-popout
    v-model="date2"
    v-model:visible="visible2"
    title="时分秒"
    type="hms"
    value-format="HH:mm:ss"
  />

  <sar-datetime-picker-popout
    v-model="date3"
    v-model:visible="visible3"
    title="月日时"
    type="Mdh"
    value-format="MM-DD HH"
  />

  <sar-list card>
    <sar-list-item
      title="年月日"
      arrow
      hover
      :value="JSON.stringify(date1)"
      @click="visible1 = true"
    />
    <sar-list-item
      title="时分秒"
      arrow
      hover
      :value="JSON.stringify(date2)"
      @click="visible2 = true"
    />
    <sar-list-item
      title="月日时"
      arrow
      hover
      :value="JSON.stringify(date3)"
      @click="visible3 = true"
    />
  </sar-list>
</template>

<script setup lang="js">
import { ref } from "vue";
const date1 = ref();
const date2 = ref();
const date3 = ref();
const visible1 = ref(false);
const visible2 = ref(false);
const visible3 = ref(false);
</script>

自定义日期时间范围 ​

可以使用 min 和 max 属性限制可以选择的日期时间的范围。

vue
<template>
  <sar-datetime-picker-popout
    v-model="date1"
    v-model:visible="visible1"
    type="yMd"
    :min="new Date(2000, 4, 13)"
    :max="new Date(2003, 6, 8)"
  />

  <sar-datetime-picker-popout
    v-model="date2"
    v-model:visible="visible2"
    type="hms"
    :min="new Date(0, 0, 1, 9, 0, 0)"
    :max="new Date(0, 0, 1, 18, 30, 0)"
  />

  <sar-list card>
    <sar-list-item
      title="2000年5月13日 -> 2003年6月8日"
      arrow
      hover
      :value="JSON.stringify(date1)"
      @click="visible1 = true"
    />
    <sar-list-item
      title="9时0分0秒 -> 18时30分0秒"
      arrow
      hover
      :value="JSON.stringify(date2)"
      @click="visible2 = true"
    />
  </sar-list>
</template>

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

const date1 = ref<Date>()
const date2 = ref<Date>()

const visible1 = ref(false)
const visible2 = ref(false)
</script>
vue
<template>
  <sar-datetime-picker-popout
    v-model="date1"
    v-model:visible="visible1"
    type="yMd"
    :min="new Date(2000, 4, 13)"
    :max="new Date(2003, 6, 8)"
  />

  <sar-datetime-picker-popout
    v-model="date2"
    v-model:visible="visible2"
    type="hms"
    :min="new Date(0, 0, 1, 9, 0, 0)"
    :max="new Date(0, 0, 1, 18, 30, 0)"
  />

  <sar-list card>
    <sar-list-item
      title="2000年5月13日 -> 2003年6月8日"
      arrow
      hover
      :value="JSON.stringify(date1)"
      @click="visible1 = true"
    />
    <sar-list-item
      title="9时0分0秒 -> 18时30分0秒"
      arrow
      hover
      :value="JSON.stringify(date2)"
      @click="visible2 = true"
    />
  </sar-list>
</template>

<script setup lang="js">
import { ref } from "vue";
const date1 = ref();
const date2 = ref();
const visible1 = ref(false);
const visible2 = ref(false);
</script>

过滤器 ​

可以使用 filter 属性来仅展示想要的内容，只有返回真的值才会展示。

vue
<template>
  <sar-datetime-picker-popout
    v-model="date"
    v-model:visible="visible"
    title="取15的倍数的分钟数"
    type="hm"
    :filter="filter"
  />

  <sar-list card>
    <sar-list-item
      title="取15的倍数的分钟数"
      arrow
      hover
      :value="JSON.stringify(date)"
      @click="visible = true"
    />
  </sar-list>
</template>

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

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

const filter = (letter: DatetimeLetter, value: number) => {
  if (letter === 'm') {
    return value % 15 === 0
  }
  return true
}
</script>
vue
<template>
  <sar-datetime-picker-popout
    v-model="date"
    v-model:visible="visible"
    title="取15的倍数的分钟数"
    type="hm"
    :filter="filter"
  />

  <sar-list card>
    <sar-list-item
      title="取15的倍数的分钟数"
      arrow
      hover
      :value="JSON.stringify(date)"
      @click="visible = true"
    />
  </sar-list>
</template>

<script setup lang="js">
import { ref } from "vue";
const visible = ref(false);
const date = ref();
const filter = (letter, value) => {
  if (letter === "m") {
    return value % 15 === 0;
  }
  return true;
};
</script>

格式化 ​

可以使用 formatter 属性格式化展示的内容。

vue
<template>
  <sar-datetime-picker-popout
    v-model="date"
    v-model:visible="visible"
    title="英文月日年"
    type="Mdy"
    :formatter="formatter"
  />

  <sar-list card>
    <sar-list-item
      title="英文月日年"
      arrow
      hover
      :value="JSON.stringify(date)"
      @click="visible = true"
    />
  </sar-list>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { type DatetimeColumnOption, type DatetimeLetter } from 'sard-uniapp'

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

const monthAbbreviations: Record<number, string> = {
  0: 'Jan',
  1: 'Feb',
  2: 'Mar',
  3: 'Apr',
  4: 'May',
  5: 'Jun',
  6: 'Jul',
  7: 'Aug',
  8: 'Sep',
  9: 'Oct',
  10: 'Nov',
  11: 'Dec',
}

function getEnglishDateRepresentation(day: number) {
  let suffix = 'th'

  if (day === 1 || day === 21 || day === 31) {
    suffix = 'st'
  } else if (day === 2 || day === 22) {
    suffix = 'nd'
  } else if (day === 3 || day === 23) {
    suffix = 'rd'
  }

  return day + suffix
}

const formatter = (letter: DatetimeLetter, option: DatetimeColumnOption) => {
  if (letter === 'M') {
    return monthAbbreviations[option.value - 1]
  }
  if (letter === 'd') {
    return getEnglishDateRepresentation(option.value)
  }
  if (letter === 'y') {
    return option.zerofill
  }
}
</script>
vue
<template>
  <sar-datetime-picker-popout
    v-model="date"
    v-model:visible="visible"
    title="英文月日年"
    type="Mdy"
    :formatter="formatter"
  />

  <sar-list card>
    <sar-list-item
      title="英文月日年"
      arrow
      hover
      :value="JSON.stringify(date)"
      @click="visible = true"
    />
  </sar-list>
</template>

<script setup lang="js">
import { ref } from "vue";
const visible = ref(false);
const date = ref();
const monthAbbreviations = {
  0: "Jan",
  1: "Feb",
  2: "Mar",
  3: "Apr",
  4: "May",
  5: "Jun",
  6: "Jul",
  7: "Aug",
  8: "Sep",
  9: "Oct",
  10: "Nov",
  11: "Dec"
};
function getEnglishDateRepresentation(day) {
  let suffix = "th";
  if (day === 1 || day === 21 || day === 31) {
    suffix = "st";
  } else if (day === 2 || day === 22) {
    suffix = "nd";
  } else if (day === 3 || day === 23) {
    suffix = "rd";
  }
  return day + suffix;
}
const formatter = (letter, option) => {
  if (letter === "M") {
    return monthAbbreviations[option.value - 1];
  }
  if (letter === "d") {
    return getEnglishDateRepresentation(option.value);
  }
  if (letter === "y") {
    return option.zerofill;
  }
};
</script>

农历 ​

可以设置 calendar="lunar" 将历法类型改为农历。农历仅用于展示，实际绑定的值还是公历。

vue
<template>
  <sar-datetime-picker-popout
    v-model="date1"
    v-model:visible="visible1"
    title="年月日"
    type="yMd"
    calendar="lunar"
    value-format="YYYY-MM-DD"
  />

  <sar-datetime-picker-popout
    v-model="date2"
    v-model:visible="visible2"
    title="年月日时分"
    type="yMdhm"
    calendar="lunar"
    value-format="YYYY-MM-DD HH:mm"
  />

  <sar-datetime-picker-popout
    v-model="date3"
    v-model:visible="visible3"
    title="月日时"
    type="Mdh"
    calendar="lunar"
    value-format="MM-DD HH"
  />

  <sar-list card>
    <sar-list-item
      title="年月日"
      arrow
      hover
      :value="JSON.stringify(date1)"
      @click="visible1 = true"
    />
    <sar-list-item
      title="年月日时分"
      arrow
      hover
      :value="JSON.stringify(date2)"
      @click="visible2 = true"
    />
    <sar-list-item
      title="月日时"
      arrow
      hover
      :value="JSON.stringify(date3)"
      @click="visible3 = true"
    />
  </sar-list>
</template>

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

const date1 = ref<Date>()
const date2 = ref<Date>()
const date3 = ref<Date>()

const visible1 = ref(false)
const visible2 = ref(false)
const visible3 = ref(false)
</script>
vue
<template>
  <sar-datetime-picker-popout
    v-model="date1"
    v-model:visible="visible1"
    title="年月日"
    type="yMd"
    calendar="lunar"
    value-format="YYYY-MM-DD"
  />

  <sar-datetime-picker-popout
    v-model="date2"
    v-model:visible="visible2"
    title="年月日时分"
    type="yMdhm"
    calendar="lunar"
    value-format="YYYY-MM-DD HH:mm"
  />

  <sar-datetime-picker-popout
    v-model="date3"
    v-model:visible="visible3"
    title="月日时"
    type="Mdh"
    calendar="lunar"
    value-format="MM-DD HH"
  />

  <sar-list card>
    <sar-list-item
      title="年月日"
      arrow
      hover
      :value="JSON.stringify(date1)"
      @click="visible1 = true"
    />
    <sar-list-item
      title="年月日时分"
      arrow
      hover
      :value="JSON.stringify(date2)"
      @click="visible2 = true"
    />
    <sar-list-item
      title="月日时"
      arrow
      hover
      :value="JSON.stringify(date3)"
      @click="visible3 = true"
    />
  </sar-list>
</template>

<script setup lang="js">
import { ref } from "vue";
const date1 = ref();
const date2 = ref();
const date3 = ref();
const visible1 = ref(false);
const visible2 = ref(false);
const visible3 = ref(false);
</script>

API ​

DatetimePickerPopoutProps ​

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

属性描述类型默认值
popout-class弹窗框根元素类名string-
popout-style弹窗框根元素样式StyleValue-
visible (v-model)是否显示弹出框boolean-
title弹出框标题string-
validate-event是否触发表单验证booleantrue
resettable 1.23.3+关闭弹出框后，是否可复位弹出框值booleanfalse

DatetimePickerPopoutEmits ​

事件描述类型
update:model-value日期时间输入组件值改变时触发(value: Date | string | undefined) => void
change日期时间输入组件值改变时触发(value: Date |string | undefined) => void
update:visible弹出框显隐时触发(visible: boolean) => void
confirm 1.22.1+点击确定按钮时触发() => void
visible-hook 1.22.1+入场/退场动画状态改变时触发(name: TransitionHookName) => void
before-enter 1.22.1+入场动画开始前触发() => void
enter 1.22.1+入场动画开始时触发() => void
after-enter 1.22.1+入场动画结束时触发() => void
enter-cancelled 1.22.1+入场动画取消时触发() => void
before-leave 1.22.1+退场动画开始前触发() => void
leave 1.22.1+退场动画开始时触发() => void
after-leave 1.22.1+退场动画结束时触发() => void
leave-cancelled 1.22.1+退场动画取消时触发() => void

Released under the MIT License.

Copyright © 2023-present wuzhitao