时间选择器 DateTimePicker

用于选择时间，支持日期、时分等时间维度，通常与弹出层组件配合使用

使用

API

安装使用

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

用法示例

基础用法

弹出选择器

codesanbox

copy

code

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

export default function App() {
  const ref = useRef<HTMLDivElement>();
  const [visible, setVisible] = useState(false);

  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>
          <TiPopup
            teleport={ref.current}
            visible={visible}
            closeOnMask
            onClose={() => setVisible(false)}
            position="bottom"
          >
            {visible ? <TiDatetimePicker /> : null}
          </TiPopup>
        </div>
      </div>
    </div>
  );
}

选项格式化

弹出选择器

codesanbox

copy

code

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

export default function App() {
  const ref = useRef<HTMLDivElement>();
  const [visible, setVisible] = useState(false);

  const formatter = (type: string, value: number) => {
    const pipe = {
      year: `${value}年`,
      month: `${value}月`,
      day: `${value}天`,
      hour: `${value}时`,
      minute: `${value}分`,
    };
    return pipe[type];
  };
  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>
          <TiPopup
            teleport={ref.current}
            visible={visible}
            closeOnMask
            onClose={() => setVisible(false)}
            position="bottom"
          >
            {visible ? <TiDatetimePicker formatter={formatter} /> : null}
          </TiPopup>
        </div>
      </div>
    </div>
  );
}

设置边界

弹出选择器

codesanbox

copy

code

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

export default function App() {
  const ref = useRef<HTMLDivElement>();
  const [visible, setVisible] = useState(false);

  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>
          <TiPopup
            teleport={ref.current}
            visible={visible}
            closeOnMask
            onClose={() => setVisible(false)}
            position="bottom"
          >
            {visible ? (
              <TiDatetimePicker
                value={new Date().getTime()}
                maxDate={new Date().setDate(new Date().getDate() + 1)}
                minDate={new Date().setDate(new Date().getDate() - 1)}
              />
            ) : null}
          </TiPopup>
        </div>
      </div>
    </div>
  );
}

不同时间类型

Date 展示Time 展示DateTime 展示Year-Month 展示

codesanbox

copy

code

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

export default function App() {
  const ref = useRef<HTMLDivElement>();
  const [visible, setVisible] = useState(false);
  const [type, setType] = useState<any>('date');

  const show = (_type: string) => {
    setType(_type);
    setVisible(true);
  };

  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={() => show('date')}>Date 展示</TiButton>
          <TiButton onClick={() => show('time')}>Time 展示</TiButton>
          <TiButton onClick={() => show('datetime')}>DateTime 展示</TiButton>
          <TiButton onClick={() => show('year-month')}>Year-Month 展示</TiButton>
          <TiPopup
            teleport={ref.current}
            visible={visible}
            closeOnMask
            onClose={() => setVisible(false)}
            position="bottom"
          >
            {visible ? <TiDatetimePicker type={type} onConfirm={() => setVisible(false)} /> : null}
          </TiPopup>
        </div>
      </div>
    </div>
  );
}

选项过滤

弹出选择器

过滤为奇数的年份

codesanbox

copy

code

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

export default function App() {
  const ref = useRef<HTMLDivElement>();
  const [visible, setVisible] = useState(false);

  const filter = (type: string, options: Array<{ value: number }>) => {
    if (type === 'year') {
      return options.filter(option => option.value % 2 === 0);
    }
    return options;
  };
  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>
          <TiPopup
            teleport={ref.current}
            visible={visible}
            closeOnMask
            onClose={() => setVisible(false)}
            position="bottom"
          >
            {visible ? <TiDatetimePicker filter={filter} /> : null}
          </TiPopup>
        </div>
      </div>
    </div>
  );
}

时间项排序

弹出选择器

sort项取值应该和type类型对应

codesanbox

copy

code

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

export default function App() {
  const ref = useRef<HTMLDivElement>();
  const [visible, setVisible] = useState(false);

  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>
          <TiPopup
            teleport={ref.current}
            visible={visible}
            closeOnMask
            onClose={() => setVisible(false)}
            position="bottom"
          >
            {visible ? <TiDatetimePicker sort={['month', 'year']} type="year-month" /> : null}
          </TiPopup>
        </div>
      </div>
    </div>
  );
}

TiDatetimePicker API

属性 Properties

名称	类型	是否必填	默认值	说明	备注
value	string	否	-	-	-
type	string	否	data	年月日date 年月year-month 时分time 年月日 - 时分datetime	-
minDate	number	否	十年前毫秒数	最小边界	-
maxDate	number	否	十年后毫秒数	最大边界	-
sort	array	否	-	sort 需要与 type 匹配，匹配关系	-
loading	boolean	否	false	加载动画	-
formatter	function	否	-	格式化内容	-
filter	function	否	-	过滤时间	-
title	string	否	-	标题	-
subTitle	string	否	-	副标题	-
confirmText	string	否	-	确认按钮文案	-
cancelText	string	否	-	取消按钮文案	-
optionItemHeight	number | string	否	108	展示项高度	-
visibleItemCount	number	否	5	可见展示项数	-
extStyle	string	否	-	容器样式	-
extOptionStyle	string	否	-	子器样式	-

sort排序的取值和type对应关系

type	sort
date	['year', 'month', 'day']
year-month	['year', 'month']
time	['hour', 'minute']
datetime	['year', 'month', 'day', 'hour', 'minute']

插槽 Slots

名称	说明	备注
header	titlebar下方区域	—

事件 Events

名称	参数列表	描述	备注
onConfirm	(e: CustomEvent<{type: string, value: number}>) => void	点击确定按钮后触发	-
onChange	(e: CustomEvent<{type: string, value: number}) => void	列表变化是触发	-
onCancel	(e: CustomEvent<{type: string, value: number}) => void	点击取消按钮后触发	-

外部样式类 External Classes

名称	说明	备注
extHairlineClass	时间选择器中间线样式	-
extMaskClass	时间选择器蒙层样式	-
extOptionClass	时间选择器纵列容器样式	-
extOptionItemClass	时间选择器纵列单项样式	-
extClass	时间选择容器样式	-

CSS 变量 CSS Variable

变量	默认值	说明	备注
--datetime-picker-mask-bg-image	#ffffff	同 picker 组件 --picker-mask-bg-image	-
--datetime-picker-loading-bg-color	#ffffff	同 picker 组件 --picker-loading-bg-color	-
--datetime-picker-row-color	#212121	同 picker-column 组件 --picker-column-row-color	-
--datetime-picker-row-disabled-color	#212121	同 picker-column 组件 --picker-column-row-disabled-color	-