DatePicker 日期选择

使用场景

输入或选择日期的控件。当用户需要输入一个日期，可以点击标准输入框，弹出日期面板进行选择。

示例

基本示例

-

inline

function Basic() { return ( <Group> <DatePicker onChange={console.log} defaultValue="2021-03-15" /> <DateRangePicker defaultValue={['2021-03-12', '2021-04-02']} onChange={console.log} /> </Group> ); }

function Basic() {
  return (
    <Group>
      <DatePicker onChange={console.log} defaultValue="2021-03-15" />
      <DateRangePicker defaultValue={['2021-03-12', '2021-04-02']} onChange={console.log} />
    </Group>
  );
}

带时间

-

inline

function HasTime() { return ( <Group> <DatePicker hasTime onChange={console.log} /> <DatePicker hasTime timeProps={{ mode: 'normal' }} onChange={console.log} /> <DateRangePicker hasTime onChange={console.log} /> </Group> ); }

function HasTime() {
  return (
    <Group>
      <DatePicker hasTime onChange={console.log} />

      <DatePicker hasTime timeProps={{ mode: 'normal' }} onChange={console.log} />

      <DateRangePicker hasTime onChange={console.log} />
    </Group>
  );
}

设置默认展示日期

inline

function GetVisibleMonth() { return <DatePicker getDefaultVisibleMonth={() => dayjs('2020-12', 'YYYY-MM')} />; }

function GetVisibleMonth() {
  return <DatePicker getDefaultVisibleMonth={() => dayjs('2020-12', 'YYYY-MM')} />;
}

自定义禁用日期

inline

function DisabledDate() { const today = dayjs(); return ( <DatePicker getDisabledDate={(date) => { // 禁用今天之前的所有日期 if (date.isBefore(today)) { return true; } return false; }} /> ); }

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

  return (
    <DatePicker
      getDisabledDate={(date) => {
        // 禁用今天之前的所有日期
        if (date.isBefore(today)) {
          return true;
        }
        return false;
      }}
    />
  );
}

API

DatePicker

字段	描述
placeholder	string 输入框提示文本
value	string 受控的日期值
defaultValue	string 默认选中的日期值
onChange	FormControlOnChangeHandler<string> 选中日期值改变时的回调
status	string
hasTime	boolean 是否有时间
timeProps	TimePanelProps 传递给时间面板的属性集
format	string 日期格式
popupProps	any 传递给弹层的属性集
getDisabledDate	CheckDateFn 设置禁用日期
getDefaultVisibleMonth	any 设置默认显示的月份
className	string
style	CSSProperties

DateRangePicker

字段	描述
placeholder	string[] 输入框提示文本
value	string[]
defaultValue	string[]
onChange	FormControlOnChangeHandler<string[]>
hasTime	boolean 是否有时间
timeProps	TimePanelProps 传递给时间面板的属性集
format	string 日期格式
popupProps	any 传递给弹层的属性集
getDisabledDate	CheckDateFn 设置禁用日期
getDefaultVisibleMonth	any 设置默认显示的月份
className	string
style	CSSProperties