nutui-uniapp

Appearance

Calendar 日历 ​

介绍 ​

日历，可平铺 / 弹窗展示。

基础用法 ​

html
<template>
  <nut-calendar
    v-model:visible="visible"
    :default-value="date"
    start-date="2022-01-11"
    end-date="2022-11-30"
    @choose="onChoose"
  ></nut-calendar>
</template>
ts
const visible = ref(false);

const date = ref("");

function onChoose(event: any) {
  console.log(event);
}

选择日期区间 ​

html
<template>
  <nut-calendar
    v-model:visible="visible"
    :default-value="date"
    type="range"
    start-date="2022-01-11"
    end-date="2022-11-30"
  ></nut-calendar>
</template>
ts
const date = ref(["2019-12-23", "2019-12-26"]);

选择多个日期 ​

html
<template>
  <nut-calendar
    v-model:visible="visible"
    :default-value="date"
    type="multiple"
    start-date="2022-01-11"
    end-date="2022-11-30"
  ></nut-calendar>
</template>
ts
const date = ref([]);

选择周 ​

当设置为周选择时，会根据 first-day-of-week 判断周的起始与结束日期，0 表示星期日。

html
<template>
  <nut-calendar
    v-model:visible="visible"
    :default-value="date"
    type="week"
    start-date="2022-01-11"
    end-date="2022-11-30"
  ></nut-calendar>
</template>
ts
const date = ref(["2019-12-23", "2019-12-26"]);

快捷选择-单选 ​

html
<template>
  <nut-calendar
    v-model:visible="visible"
    :default-value="date"
    is-auto-back-fill
  ></nut-calendar>
</template>

快捷选择-范围选择 ​

html
<template>
  <nut-calendar
    v-model:visible="visible"
    :default-value="date"
    type="range"
    is-auto-back-fill
  ></nut-calendar>
</template>

自定义日历按钮 ​

html
<template>
  <nut-calendar
    ref="calendarEl"
    v-model:visible="visible"
    :default-value="date"
    type="range"
    btn-slot
  >
    <template #btn>
      <view>
        <nut-button @click="go()">去某个时间</nut-button>
        <nut-button @click="day7()">最近七天</nut-button>
        <nut-button @click="month()">当月</nut-button>
      </view>
    </template>

    <template #day="{ date }">
      <text>{{ date.day }}</text>
    </template>
  </nut-calendar>
</template>
ts
import dayjs from "dayjs";

const calendarEl = ref();

const date = ref([]);

function go() {
  calendarEl.value.scrollToDate("2025-10-01");
}

const pattern = "YYYY-MM-DD";

function day7() {
  const today = dayjs();

  date.value = [
    today.subtract(7, "day").format(pattern),
    today.format(pattern)
  ];
}

function month() {
  const today = dayjs();

  date.value = [
    today.startOf("month").format(pattern),
    today.format(pattern)
  ];
}

自定义时间文案 ​

html
<template>
  <nut-calendar
    v-model:visible="visible"
    :default-value="date"
    type="range"
    title="日期选择"
    start-text="入店"
    end-text="离店"
    confirm-text="提交"
  >
    <template #day="{ date }">
      <text>{{ date.day <= 9 ? `0${date.day}` : date.day }}</text>
    </template>

    <template #bottom-info="{ date }">
      <text>{{ date ? (date.day === 10 ? "十" : "") : "" }}</text>
    </template>
  </nut-calendar>
</template>

自定义底部区域 ​

html
<template>
  <nut-calendar
    v-model:visible="visible"
    :default-value="date"
    footer-slot
  >
    <template #footer-info="{ date }">
      <nut-button>自定义</nut-button>
    </template>
  </nut-calendar>
</template>

自定义周起始日 ​

html
<template>
  <nut-calendar
    v-model:visible="visible"
    :default-value="date"
    :first-day-of-week="2"
  ></nut-calendar>
</template>

平铺展示 ​

html
<template>
  <nut-calendar
    :poppable="false"
    :default-value="date"
  ></nut-calendar>
</template>

自定义禁用日期 ​

通过配置 disabled-date 函数回调可实现自定义禁用某些日期为不可选中状态。 当 type 类型为 range（日期区间）时，若是设置了该函数，则需要在选中结果后自行过滤掉禁用的日期。

html
<template>
  <nut-calendar
    v-model:visible="visible"
    :default-value="date"
    :disabled-date="disabledDate"
  ></nut-calendar>
</template>
ts
const disabledDates = {
  "2022-01-05": true,
  "2022-01-06": true,
  "2022-01-10": true,
  "2022-01-11": true,
  "2022-01-12": true,
  "2022-01-13": true,
  "2022-01-14": true
};

function disabledDate(date: string) {
  return disabledDates[date];
}

API ​

Props ​

参数说明类型可选值默认值
v-model:visible是否可见boolean-false
type类型stringone / range / multiple / weekone
poppable是否弹窗状态展示boolean-true
is-auto-back-fill自动回填boolean-false
title显示标题string-日期选择
default-value默认值（单个日期选择 string，其他为 string[]）string / Array--
start-date开始日期string-今天
end-date结束日期string-距离今天 365 天
start-text范围选择，开始信息文案string-开始
end-text范围选择，结束信息文案string-结束
confirm-text底部确认按钮文案string-确认
show-today是否展示今天标记boolean-true
show-title是否在展示日历标题boolean-true
show-sub-title是否展示日期标题boolean-true
to-date-animation是否启动滚动动画boolean-true
first-day-of-week设置周起始日number0 / 1 / 2 / 3 / 4 / 5 / 60
disabled-date 1.4.0一个用来判断该日期是否被禁用的函数，应该返回 boolean 表示是否禁用Function--
footer-slot 1.4.0是否使用 footer 插槽boolean-false
btn-slot 1.5.7是否使用 btn 插槽boolean-false
pop-style 1.8.0自定义弹窗样式CSSProperties--
lock-scroll H5背景是否锁定boolean-true

Events ​

事件名说明类型
choose选择之后或是点击确认按钮触发,日期数组（包含年月日和星期）(value: string | string[]) => void
select点击/选择后触发(value: string | string[]) => void
click-close-icon点击关闭图标后触发() => void
click-overlay点击遮罩关闭后触发() => void
open 1.8.0打开弹窗时触发() => void
opened 1.8.0打开弹窗动画结束时触发() => void
close关闭弹窗时触发() => void
closed 1.8.0关闭弹窗动画结束时触发() => void

Slots ​

名称说明
btn自定义日历标题下部，可用以添加自定义操作
day 不支持小程序日期信息
topInfo 不支持小程序日期顶部信息
bottomInfo 不支持小程序日期底部信息
footer 1.4.0日历自定义底部，替代 confirm 按钮

Exposes ​

通过 ref 可以获取到 Calendar 实例并调用实例方法。

名称说明类型
scrollToDate滚动到指定日期所在月，如：2021-12-30(date: string) => void
initPosition初始化滚动位置() => void

主题定制 ​

样式变量 ​

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。

名称默认值
--nut-calendar-primary-colorvar(--nut-primary-color)
--nut-calendar-choose-colorvar(--nut-primary-color)
--nut-calendar-choose-font-colorvar(--nut-primary-color)
--nut-calendar-base-color#333333
--nut-calendar-disable-color#d1d0d0
--nut-calendar-base-fontvar(--nut-font-size-3)
--nut-calendar-title-fontvar(--nut-font-size-4)
--nut-calendar-title-font-weight500
--nut-calendar-sub-title-fontvar(--nut-font-size-2)
--nut-calendar-text-fontvar(--nut-font-size-1)
--nut-calendar-day-font16px
--nut-calendar-day-active-border-radius0px
--nut-calendar-day-font-weight500
--nut-calendar-day67-font-colorvar(--nut-primary-color)
--nut-calendar-month-title-font-sizeinherit

MIT Licensed

版权所有 © 2023 年-至今 yang1206 贡献者