Tuniao UI Uniapp V3

Appearance

12:13

TnCalendar-日历 ​

此组件用于选择日期，可以选择单个日期、多个日期、日期区间。可以配合TnPopup组件一起使用实现从底部弹出的日历选择器。

组件位置 ​

typescript
import TnCalendar from '@tuniao/tnui-vue3-uniapp/components/calendar/src/calendar.vue'
import TnCalendar from '@tuniao/tnui-vue3-uniapp/components/calendar/src/calendar.vue'
typescript
import TnCalendar from '@/uni_modules/tuniaoui-vue3/components/calendar/src/calendar.vue'
import TnCalendar from '@/uni_modules/tuniaoui-vue3/components/calendar/src/calendar.vue'

平台差异说明 ​

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

基础使用 ​

  • 通过v-model绑定日期数据，传递的日期格式式为YYYY-MM-DD或者YYYY/MM/DD，如2023-06-12或2023/06/12
  • 将show-lunar设置为 true 将显示农历信息
vue
<script lang="ts" setup>
import { ref } from 'vue'

const selectDate = ref('')
</script>

<template>
  <TnCalendar v-model="selectDate" />
</template>
<script lang="ts" setup>
import { ref } from 'vue'

const selectDate = ref('')
</script>

<template>
  <TnCalendar v-model="selectDate" />
</template>

日历模式 ​

单选模式-默认 ​

将mode设置为date日历组件将以单选模式显示，此时v-model绑定的值为YYYY-MM-DD或者YYYY/MM/DD格式的字符串

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

const selectDate = ref('')
</script>

<template>
  <TnCalendar v-model="selectDate" mode="date" />
</template>
<script lang="ts" setup>
import { ref } from 'vue'

const selectDate = ref('')
</script>

<template>
  <TnCalendar v-model="selectDate" mode="date" />
</template>

多选模式 ​

将mode设置为multi日历组件将以多选模式显示，此时v-model绑定的值为YYYY-MM-DD或者YYYY/MM/DD格式的字符串数组

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

const selectDate = ref<string[]>([])
</script>

<template>
  <TnCalendar v-model="selectDate" mode="multi" />
</template>
<script lang="ts" setup>
import { ref } from 'vue'

const selectDate = ref<string[]>([])
</script>

<template>
  <TnCalendar v-model="selectDate" mode="multi" />
</template>

区间模式 ​

将mode设置为range日历组件将以区间模式显示，此时v-model绑定的值为YYYY-MM-DD或者YYYY/MM/DD格式的字符串数组，数组长度为 2，第一个元素为开始日期，第二个元素为结束日期

在区间模式下可以通过range-start-desc和range-end-desc设置开始时间的文案和结束时间的文案

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

const selectDate = ref<string[]>([])
</script>

<template>
  <TnCalendar v-model="selectDate" mode="range" />
</template>
<script lang="ts" setup>
import { ref } from 'vue'

const selectDate = ref<string[]>([])
</script>

<template>
  <TnCalendar v-model="selectDate" mode="range" />
</template>

区间模式-自定义文案 ​

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

const selectDate = ref<string[]>([])
</script>

<template>
  <TnCalendar
    v-model="selectDate"
    mode="range"
    range-start-desc="入住"
    range-end-desc="离店"
  />
</template>
<script lang="ts" setup>
import { ref } from 'vue'

const selectDate = ref<string[]>([])
</script>

<template>
  <TnCalendar
    v-model="selectDate"
    mode="range"
    range-start-desc="入住"
    range-end-desc="离店"
  />
</template>

自定义日历样式 ​

  • 通过active-bg-color设置日历激活日期的背景颜色，可以使用图鸟内置的背景色、hex、rgb、rgba
  • 通过active-text-color设置日历激活日期的文字颜色，支持图鸟内置的颜色值、hex、rgb、rgba
  • 通过range-bg-color设置在区间范围内的日期的背景颜色，可以使用图鸟内置的背景色、hex、rgb、rgba
  • 通过range-text-color设置在区间范围内的日期的文字颜色，支持图鸟内置的颜色值、hex、rgb、rgba
vue
<script lang="ts" setup>
import { ref } from 'vue'

const selectDate = ref('')
</script>

<template>
  <TnCalendar
    v-model="selectDate"
    active-bg-color="tn-grey"
    active-text-color="#01beff"
  />
</template>
<script lang="ts" setup>
import { ref } from 'vue'

const selectDate = ref('')
</script>

<template>
  <TnCalendar
    v-model="selectDate"
    active-bg-color="tn-grey"
    active-text-color="#01beff"
  />
</template>

设置最小日期和最大日期 ​

通过min-date和max-date设置最小日期和最大日期，日期格式为YYYY-MM-DD或者YYYY/MM/DD

如果不设置则默认以当前月的第一天和当前时间年份最后一天为最小日期和最大日期

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

const selectDate = ref('')
</script>

<template>
  <TnCalendar
    v-model="selectDate"
    min-date="2019-12-27"
    max-date="2024-02-01"
  />
</template>
<script lang="ts" setup>
import { ref } from 'vue'

const selectDate = ref('')
</script>

<template>
  <TnCalendar
    v-model="selectDate"
    min-date="2019-12-27"
    max-date="2024-02-01"
  />
</template>

API ​

Props ​

属性名说明类型默认值可选值
model-value/v-model日历绑定的值，支持的格式为 YYYY/MM/DD 2023/01/01 或者 YYYY-MM-DD 2023-01-01 [2023/01/01, 2023/01/02] [2023-01-01, 2023-01-02]String | Array<String>--
mode日历选择日期模式Stringdatemulti \ range
min-date最小可选日期，支持的格式为 YYYY/MM/DD 或者 YYYY-MM-DD，如果没有设置最小值则以当前日期作为最小值String--
max-date最大可选日期，支持的格式为 YYYY/MM/DD 或者 YYYY-MM-DD，如果没有设置最大值则以当前年份最后一天作为最大值String--
active-bg-color被选中日期的背景颜色，可以使用图鸟内置的背景色、hex、rgb、rgbaString--
active-text-color被选中日期的文字颜色，支持图鸟内置的颜色值、hex、rgb、rgbaString--
range-bg-color范围内日期的背景颜色，可以使用图鸟内置的背景色、hex、rgb、rgbaString--
range-text-color范围内日期的文字颜色，支持图鸟内置的颜色值、hex、rgb、rgbaString--
allow-change-year允许切换年份Booleantruefalse
allow-change-month允许切换月份Booleantruefalse
show-lunar是否显示农历Booleanfalsetrue
range-start-desc日期范围开始时间的文案String开始-
range-end-desc日期范围结束时间的文案String结束-

Emits ​

事件名说明类型
change所选日期发生修改事件(value: string | string[]) => void
change-year切换年份触发事件(value: number) => void
change-month切换月份触发事件(value: number) => void

Tuniao UI

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