日历 Calendar

用于选择日期，或日期区间。

使用

API

安装使用

import { TiCalendar } from '@titian-design/mobile-react';

用法示例

基础用法

弹出选择器

codesanbox

copy

code

import React, { useRef, useState } from 'react';
import { TiButton, TiCalendar } from 'titian-h5-react';

export default function App() {
  const [visible, setVisible] = useState(false);
  const ref = useRef<HTMLDivElement>();
  return (
    <div className="code-container">
      <div className="content">
        <div
          ref={ref}
          className={`popup-container ${visible ? 'is-opened' : 'is-closed'}`}
          style={{ transition: visible ? 'unset' : 'height 0.3s 0.3s' }}
        >
          <TiButton onClick={() => setVisible(true)}>弹出选择器</TiButton>
          <TiCalendar teleport={ref.current} onClose={() => setVisible(false)} visible={visible} />
        </div>
      </div>
    </div>
  );
}

设置默认值

弹出选择器

codesanbox

copy

code

import React, { useRef, useState } from 'react';
import { TiButton, TiCalendar } from 'titian-h5-react';

export default function App() {
  const [visible, setVisible] = useState(false);
  const ref = useRef<HTMLDivElement>();
  return (
    <div className="code-container">
      <div className="content">
        <div
          ref={ref}
          className={`popup-container ${visible ? 'is-opened' : 'is-closed'}`}
          style={{ transition: visible ? 'unset' : 'height 0.3s 0.3s' }}
        >
          <TiButton onClick={() => setVisible(true)}>弹出选择器</TiButton>
          <TiCalendar
            defaultValue={new Date(new Date().getFullYear(), new Date().getMonth() + 1, new Date().getDate())}
            teleport={ref.current}
            onClose={() => setVisible(false)}
            visible={visible}
          />
        </div>
      </div>
    </div>
  );
}

多选

弹出选择器

codesanbox

copy

code

import React, { useRef, useState } from 'react';
import { TiButton, TiCalendar } from 'titian-h5-react';

export default function App() {
  const [visible, setVisible] = useState(false);
  const ref = useRef<HTMLDivElement>();
  return (
    <div className="code-container">
      <div className="content">
        <div
          ref={ref}
          className={`popup-container ${visible ? 'is-opened' : 'is-closed'}`}
          style={{ transition: visible ? 'unset' : 'height 0.3s 0.3s' }}
        >
          <TiButton onClick={() => setVisible(true)}>弹出选择器</TiButton>
          <TiCalendar teleport={ref.current} onClose={() => setVisible(false)} visible={visible} mode="multiple" />
        </div>
      </div>
    </div>
  );
}

设置边界

弹出选择器

codesanbox

copy

code

import React, { useRef, useState } from 'react';
import { TiButton, TiCalendar } from 'titian-h5-react';

export default function App() {
  const [visible, setVisible] = useState(false);
  const ref = useRef<HTMLDivElement>();
  return (
    <div className="code-container">
      <div className="content">
        <div
          ref={ref}
          className={`popup-container ${visible ? 'is-opened' : 'is-closed'}`}
          style={{ transition: visible ? 'unset' : 'height 0.3s 0.3s' }}
        >
          <TiButton onClick={() => setVisible(true)}>弹出选择器</TiButton>
          <TiCalendar
            teleport={ref.current}
            minDate={new Date(new Date().getFullYear() - 1, new Date().getMonth(), new Date().getDate()).getTime()}
            maxDate={new Date(new Date().getFullYear() + 1, new Date().getMonth(), new Date().getDate()).getTime()}
            onClose={() => setVisible(false)}
            visible={visible}
          />
        </div>
      </div>
    </div>
  );
}

受控模式

弹出选择器

codesanbox

copy

code

import React, { useRef, useState } from 'react';
import { TiButton, TiCalendar } from 'titian-h5-react';

export default function App() {
  const [visible, setVisible] = useState(false);
  const ref = useRef<HTMLDivElement>();
  return (
    <div className="code-container">
      <div className="content">
        <div
          ref={ref}
          className={`popup-container ${visible ? 'is-opened' : 'is-closed'}`}
          style={{ transition: visible ? 'unset' : 'height 0.3s 0.3s' }}
        >
          <TiButton onClick={() => setVisible(true)}>弹出选择器</TiButton>
          <TiCalendar teleport={ref.current} onClose={() => setVisible(false)} visible={visible} value={new Date()} />
        </div>
      </div>
    </div>
  );
}

选择范围

弹出选择器

codesanbox

copy

code

import React, { useRef, useState } from 'react';
import { TiButton, TiCalendar } from 'titian-h5-react';

export default function App() {
  const [visible, setVisible] = useState(false);
  const ref = useRef<HTMLDivElement>();
  return (
    <div className="code-container">
      <div className="content">
        <div
          ref={ref}
          className={`popup-container ${visible ? 'is-opened' : 'is-closed'}`}
          style={{ transition: visible ? 'unset' : 'height 0.3s 0.3s' }}
        >
          <TiButton onClick={() => setVisible(true)}>弹出选择器</TiButton>
          <TiCalendar teleport={ref.current} onClose={() => setVisible(false)} visible={visible} mode="range" />
        </div>
      </div>
    </div>
  );
}

TiCalendar API

属性 Properties

名称	类型	必填	默认值	说明	备注
start	WeekDayEnum	否	'Sunday'	从周几开始；	参数类型 WeekDayEnum
mode	single | multiple | range	否	'single'	单选/多选/范围	-
defaultValue	array | string | number	否	null	默认值，传值则组件设置为非受控模式	-
value	array | string | number	否	null	值，则组件设置为受控模式	-
minDate	string | number	否	当天	最小日期范围，可转 Date 即可	-
maxDate	string | number	否	从当天起 6 个月	最大日期范围，可转 Date 即可	-
position	top | bottom | left | right	否	bottom	展示位置，透传给 popup.position	-
closeOnMask	boolean	否	true	点击遮罩关闭，透传给 popup.close-on-mask	-
destroyOnClose	boolean	否	false	关闭后销毁组件，透传给 popup.destroyOnClose	-
usePopup	boolean	否	true	是否使用弹窗	-
confirmText	string	否	确认	确认文案；传空字符串''则不展示按钮	-
visible	boolean	否	false	是否展示，透传给 popup.visible	-
allowSameDay	boolean	否	false	起止日期是否可用是同一天;range 模式下生效	-
maxRange	number	否	0	起止日期最大跨度天数; range 模式且大于 0 下生效	-
maxSize	number	否	0	最多可选天数 ; multiple 模式且大于 0 下生效	-
color	string	否	theme.color.brand.1000	选中颜色值	-
round	boolean	否	false	圆角模式	-
title	string	否	'选择日期'	标题	-
formatter	(date: CalRenderDateProps) => CalRenderDateProps	否	null	格式化日历函数，参数类型 CalRenderDateProps	-
maskZIndex	number	否	10000	遮罩 z-index 层级	-
contentZIndex	number	否	10001	内容 z-index 层级	-
extStyle	string	否	''	容器样式	-
teleport	Element	否	document.body	DOM 挂载节点	-

事件 Events

名称	参数列表	描述	备注
onSelect	(e: CustomEvent<{date: CalDateProps; currentDate: CalRenderDateProps[];}>) => void	日历面板选择事件	参数类型见 CalDateProps， CalRenderDateProps
onConfirm	(e: CustomEvent<CalRenderDateProps[]>) => void	日历面板确认事件	参数见 CalRenderDateProps
onClose	(e: CustomEvent) => void	日历面板关闭事件	-
onError	(e: CustomEvent<{error: CalErrorProps; date: CalDateProps; currentDate: CalRenderDateProps[]; }>) => void	日历面板错误事件	参数类型见 CalErrorProps， CalRenderDateProps，CalRenderDateProps

外部样式类 External Classes

类名	说明	备注
extPopupClass	popup 容器样式，透传给 popup/ext-class	-
extPopupMaskClass	popup 遮罩样式，透传给 popup/ext-mask-class	-
extPopupContentClass	popup 内容样式，透传给 popup/ext-content-class	-
extClass	日历组件容器样式	-
extScrollClass	日历组件滚动容器样式	-

CSS 变量 CSS Variables

变量	默认值	说明
--calendar-popup-mask-bg-color	默认值	同 Popup 组件 --popup-mask-bg-color
--calendar-popup-radius	theme.borderRadius.r4	同 Popup 组件 --popup-popup-radius
--calendar-popup-box-bg-color	theme.color.gray.background.default	同 Popup 组件 --popup-box-bg-color
--calendar-scroll-height	500px	日历滚动区域高度
--calendar-week-height	60px	日历星期区域高度
--calendar-week-item-color	var(--neutral-color-2, #757575)	日历星期区域字体颜色
--calendar-title-height	80px	日历标题区域高度
--calendar-title-color	theme.color.gray.texticon.250	日历标题区域字体颜色
--calendar-date-text-color	theme.color.gray.texticon.900	日历时间区域日期字体颜色
--calendar-date-text-font-size	theme.fontSize.t6	日历时间区域日期字体字号
--calendar-date-text-font-weight	theme.fontWeight.regular	日历时间区域日期字体字重（未选中）
--calendar-date-select-font-weight	theme.fontWeight.regular	日历时间区域日期字体字重（选中）
--calendar-date-info-color	var(--neutral-color-3, #9e9e9e)	日历时间区域描述字体颜色
--calendar-date-select-color	theme.color.gray.texticon.invert	日历时间区域选中字体颜色
--calendar-date-select-radius	theme.borderRadius.r2	日历时间区域选中圆角
--calendar-date-disabled-color	var(--neutral-color-4, #c4c4c4)	日历时间区域禁用颜色
--calendar-date-margin-v	10px	日历时间区域垂直方向距离
--calendar-date-margin-h	0px	日历时间区域水平方向距离
--calendar-font-weight-semibold	theme.fontWeight.semibold	星期的文字字重
--calendar-tip-font-size	theme.fontSize.t2	天数上方描述文字大小
--calendar-tip-line-height	theme.lineHeight.single.t4	天数上方描述文字行高

数据结构 Data Structure

星期枚举 WeekDayEnum

值	含义	备注
Sunday	周日	-
Monday	周一	-
Tuesday	周二	-
Wednesday	周三	-
Thursday	周四	-
Friday	周五	-
Saturday	周六	-

日期数据结构 CalDateProps

键名	说明	类型
date	日期	Date
time	毫秒数	number
year	年	number
month	月	month
day	日	number
week	星期	number
fullDateNum	年月日，如20211231	number
text	文本	string | number
status	状态	DateStatusEnum
topInfo	顶部文案	string
bottomInfo	底部文案	string

日期渲染数据结构 CalRenderDateProps

interface CalRenderDateProps extends CalDateProps {
  parentIndex: number;
}

报错数据结构 CalErrorProps

interface CalErrorProps {
  message: string;
  type: 'maxSize' | 'maxRange' | 'disabled';
}

日期状态枚举 DateStatusEnum

枚举值	说明
null	无状态
disabled	禁用
single	单选选中状态
range_start	范围选择：起始状态
range_full	范围选择：起始时间与结束时间为同一天
range_end	范围选择：结束状态
multiple	孤立多选（无连接）
multiple_start	多选（有连接） 起始状态
multiple_middle	多选（有连接） 中间状态
multiple_end	多选（有连接） 结束状态