DatePicker

() => {
  /*
   * 回调参数d包含开始和结束日期的数组[starDate,endDate]，当只是日期选择而不包含时间选择时，时间部分均为当前时间
   * 1. 选择day模式，startDate与endDate相等
   * 2. 选择week模式，startDate为当周的起始日期，endDate为当周的结束日期
   * 3. 选择month模式，startDate为当月的起始日期，endDate为当月的结束日期
   * 4. 选择quarter模式，startDate为当季度的起始日期，endDate为当季度的结束日期
   * 5. 选择year模式，startDate为当年的起始日期，endDate为当年的结束日期
   */
  const datePick = d => {
    const startDate = d[0]
    const endDate = d[1]
    window.console.log(
      `开始日期：${dayjs(startDate).format(
        'YYYY/MM/DD HH:mm:ss',
      )} —— 结束日期：${dayjs(endDate).format('YYYY/MM/DD HH:mm:ss')}`,
    )
  }
  return <DatePicker onPick={datePick} />
}

<>
  <DatePicker selectionMode="day" />
  <DatePicker selectionMode="week" />
  <DatePicker selectionMode="month" />
  <DatePicker selectionMode="quarter" />
  <DatePicker selectionMode="year" />
  <DatePicker selectionMode="daytime" />
</>

<DatePicker defaultDate="2022-2-22" />

<>
  <DatePicker format="YYYY/MM/DD" />
  <DatePicker selectionMode="week" format="YYYY年第w周" />
  <DatePicker selectionMode="quarter" format="YYYY年第Q季度" />
</>

<DatePicker placeholder="请请请选择开始日期" />

() => {
  const disabledDateFunc = currentDate => {
    const d = dayjs(currentDate)
    const today = dayjs()
    // 只能选择当日前的日期内
    if (d.isAfter(today)) return true
  }
  return <DatePicker disabledDateFunc={disabledDateFunc} />
}