Tuniao UI Uniapp V3

Appearance

12:13

TnDateTimePicker-日期时间选择器 ​

DateTimePicker 日期时间选择器一般用于选择选择日期时间的情况。

组件位置 ​

typescript
import TnDateTimePicker from '@tuniao/tnui-vue3-uniapp/components/date-time-picker/src/date-time-picker.vue'
import TnDateTimePicker from '@tuniao/tnui-vue3-uniapp/components/date-time-picker/src/date-time-picker.vue'
typescript
import TnDateTimePicker from '@/uni_modules/tuniaoui-vue3/components/date-time-picker/src/date-time-picker.vue'
import TnDateTimePicker from '@/uni_modules/tuniaoui-vue3/components/date-time-picker/src/date-time-picker.vue'

平台差异说明 ​

App(vue)H5微信小程序支付宝小程序...
√√√√适配中

基础使用 ​

  • 通过v-model:open控制日期时间选择器的显示与隐藏
  • 通过v-model绑定当前选择的日期时间，格式为YYYY/MM/DD HH:mm:ss，在不同的模式下传递不同的格式的值，如果为空则使用当前时间
vue
<script lang="ts" setup>
import { ref } from 'vue'

const openDateTimePicker = ref(false)
const dateTimeValue = ref('')
</script>

<template>
  <TnDateTimePicker v-model="dateTimeValue" v-model:open="openDateTimePicker" />
</template>
<script lang="ts" setup>
import { ref } from 'vue'

const openDateTimePicker = ref(false)
const dateTimeValue = ref('')
</script>

<template>
  <TnDateTimePicker v-model="dateTimeValue" v-model:open="openDateTimePicker" />
</template>

日期时间模式 ​

通过mode属性控制日期时间选择器的模式，可选值为year、yearmonth、date、time、datetime，默认为date

选择年份 ​

设置mode为year

在该模式下，v-model绑定的值为YYYY格式的字符串

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

const openDateTimePicker = ref(false)
const dateTimeValue = ref('2019')
</script>

<template>
  <TnDateTimePicker
    v-model="dateTimeValue"
    v-model:open="openDateTimePicker"
    mode="year"
  />
</template>
<script lang="ts" setup>
import { ref } from 'vue'

const openDateTimePicker = ref(false)
const dateTimeValue = ref('2019')
</script>

<template>
  <TnDateTimePicker
    v-model="dateTimeValue"
    v-model:open="openDateTimePicker"
    mode="year"
  />
</template>

选择年月 ​

设置mode为yearmonth

在该模式下，v-model绑定的值为YYYY/MM格式的字符串

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

const openDateTimePicker = ref(false)
const dateTimeValue = ref('2019/12')
</script>

<template>
  <TnDateTimePicker
    v-model="dateTimeValue"
    v-model:open="openDateTimePicker"
    mode="yearmonth"
  />
</template>
<script lang="ts" setup>
import { ref } from 'vue'

const openDateTimePicker = ref(false)
const dateTimeValue = ref('2019/12')
</script>

<template>
  <TnDateTimePicker
    v-model="dateTimeValue"
    v-model:open="openDateTimePicker"
    mode="yearmonth"
  />
</template>

选择日期(默认模式) ​

设置mode为date

在该模式下，v-model绑定的值为YYYY/MM/DD格式的字符串

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

const openDateTimePicker = ref(false)
const dateTimeValue = ref('2019-12-27')
</script>

<template>
  <TnDateTimePicker
    v-model="dateTimeValue"
    v-model:open="openDateTimePicker"
    mode="date"
  />
</template>
<script lang="ts" setup>
import { ref } from 'vue'

const openDateTimePicker = ref(false)
const dateTimeValue = ref('2019-12-27')
</script>

<template>
  <TnDateTimePicker
    v-model="dateTimeValue"
    v-model:open="openDateTimePicker"
    mode="date"
  />
</template>

选择时间 ​

设置mode为time

在该模式下，v-model绑定的值为HH:mm:ss格式的字符串

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

const openDateTimePicker = ref(false)
const dateTimeValue = ref('12:10:30')
</script>

<template>
  <TnDateTimePicker
    v-model="dateTimeValue"
    v-model:open="openDateTimePicker"
    mode="time"
  />
</template>
<script lang="ts" setup>
import { ref } from 'vue'

const openDateTimePicker = ref(false)
const dateTimeValue = ref('12:10:30')
</script>

<template>
  <TnDateTimePicker
    v-model="dateTimeValue"
    v-model:open="openDateTimePicker"
    mode="time"
  />
</template>

选择时间不带秒 ​

设置mode为timeNoSecond

在该模式下，v-model绑定的值为HH:mm格式的字符串

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

const openDateTimePicker = ref(false)
const dateTimeValue = ref('12:10')
</script>

<template>
  <TnDateTimePicker
    v-model="dateTimeValue"
    v-model:open="openDateTimePicker"
    mode="timeNoSecond"
  />
</template>
<script lang="ts" setup>
import { ref } from 'vue'

const openDateTimePicker = ref(false)
const dateTimeValue = ref('12:10')
</script>

<template>
  <TnDateTimePicker
    v-model="dateTimeValue"
    v-model:open="openDateTimePicker"
    mode="timeNoSecond"
  />
</template>

选择日期时间 ​

设置mode为datetime

在该模式下，v-model绑定的值为YYYY/MM/DD HH:mm:ss格式的字符串

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

const openDateTimePicker = ref(false)
const dateTimeValue = ref('2019/12/27 12:10:30')
</script>

<template>
  <TnDateTimePicker
    v-model="dateTimeValue"
    v-model:open="openDateTimePicker"
    mode="datetime"
  />
</template>
<script lang="ts" setup>
import { ref } from 'vue'

const openDateTimePicker = ref(false)
const dateTimeValue = ref('2019/12/27 12:10:30')
</script>

<template>
  <TnDateTimePicker
    v-model="dateTimeValue"
    v-model:open="openDateTimePicker"
    mode="datetime"
  />
</template>

选择日期时间不带秒 ​

设置mode为datetimeNoSecond

在该模式下，v-model绑定的值为YYYY/MM/DD HH:mm格式的字符串

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

const openDateTimePicker = ref(false)
const dateTimeValue = ref('2019/12/27 12:10')
</script>

<template>
  <TnDateTimePicker
    v-model="dateTimeValue"
    v-model:open="openDateTimePicker"
    mode="datetimeNoSecond"
  />
</template>
<script lang="ts" setup>
import { ref } from 'vue'

const openDateTimePicker = ref(false)
const dateTimeValue = ref('2019/12/27 12:10')
</script>

<template>
  <TnDateTimePicker
    v-model="dateTimeValue"
    v-model:open="openDateTimePicker"
    mode="datetimeNoSecond"
  />
</template>

设置最大最小值 ​

可以通过min-time和max-time设置日期时间选择器的最大最小值，格式为 YYYY/MM/DD HH:mm:ss

在不同的模式下最小最大值可以设置为不同的格式

  • year模式下可以只设置YYYY
  • yearmonth模式下可以只设置YYYY/MM
  • date模式下可以只设置YYYY/MM/DD
  • time模式下可以只设置HH:mm:ss
  • datetimeNoSecond模式下只可以设置YYYY/MM/DD HH:mm
  • timeNoSecond模式下只可以设置HH:mm

默认不设置的情况下取当前年份的前后 10 年作为最小最大值，时间从00:00:00~23:59:59

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

const openDateTimePicker = ref(false)
const dateTimeValue = ref('')
</script>

<template>
  <TnDateTimePicker
    v-model="dateTimeValue"
    v-model:open="openDateTimePicker"
    mode="datetime"
    min-time="2020/10/01 12:30:02"
    max-time="2023/12/01 12:10:30"
  />
</template>
<script lang="ts" setup>
import { ref } from 'vue'

const openDateTimePicker = ref(false)
const dateTimeValue = ref('')
</script>

<template>
  <TnDateTimePicker
    v-model="dateTimeValue"
    v-model:open="openDateTimePicker"
    mode="datetime"
    min-time="2020/10/01 12:30:02"
    max-time="2023/12/01 12:10:30"
  />
</template>

API ​

Props ​

属性名说明类型默认值可选值
model-value/v-model日期时间选择器绑定的值，具体格式看上面具体说明String--
open/v-model:open日期时间选择器显示与隐藏Booleanfalsetrue
mode日期时间选择器类型，具体每个值的模式可查看上面说明Stringdateyear \ yearmonth \ datetime \ time \ datetimeNoSecond \ timeNoSecond
min-time最小可选时间，格式具体要求查看上方说明String--
max-time最大可选时间，格式具体要求查看上方说明String--
init-current-date-time如果model-value的值为空时是否初始化为当前时间Booleantruefalse
format日期时间格式化字符串，分割符暂时只支持-_:.,()/StringYYYY/MM/DD HH:mm:ss-
show-cancel显示取消按钮Booleantruefalse
cancel-text取消按钮的文本String取 消-
cancel-color取消按钮的字体颜色，支持图鸟内置的颜色值、hex、rgb、rgbaString--
show-confirm显示确认按钮Booleantruefalse
confirm-text确认按钮的文本String确 定-
confirm-color确认按钮的字体颜色，支持图鸟内置的颜色值、hex、rgb、rgbaString--
mask显示遮罩Booleanfalsetrue
z-index日期事件选择器的 zIndexNumber20075-

Event ​

事件名说明类型
change所选日期时间发生改变(value: string) => void
confirm点击确认事件(value: string) => void
cancel点击取消事件() => void
close弹框关闭事件() => void

Tuniao UI

Copyright © 2019-present Evan You,Made with ❤️ by Tuniao UI