内联显示的组件

YearPicker,MonthPicker,DatePicker组件可用于内联显示, 尤其DatePicker组件可作为日历使用.

它们均支持受控和非受控模式使用, value为受控属性, defaultValue为非受控属性, onChange为回调属性.

也支持不同类型的选择模式(type): defalut(单选), multiple(多选), range(范围选择).

注意: 当type属性为"default"时, valuedefaultValue的值类型均为 Date 类型, 当type属性为"multiple"或者"range"时, 值类型为Data数组

YearPickerInput组件的下拉框中使用了YearPicker组件, MonthPickerInput组件的下拉框中使用了MonthPicker组件, DatePickerInputDateTimePickerInput组件的下拉框中使用了DatePicker组件

YearPicker
2020 - 2029
选择的年份: none
MonthPicker
选择的月份: none
DatePicker
周一周二周三周四周五周六周日
选择的日期: none
Allow deselect

DatePicker 组件

DatePicker组件功能最多, 属性也较多. 下面着重介绍

概念: DatePicker有三个级别, 分别为:month, year, decade. 不同的级别显示不同的视图.

支持的属性:

  • locale 组件级别的本地化

  • level,defaultLevel是受控和非受控属性. 用于设置当前的显示级别.

  • maxLevel属性用于控制最大能提升到的级别, 取值: "month"(月级别),"year"(年级别),"decade"(十年级别), 默认为"decade"

  • numberOfColumns属性用于设置多日历并列显示的数量.

  • 各个级别的自定义格式化支持, 完全支持date-fns format的格式化文本, 格式化依赖于locale属性

    • decadeLabelFormat, yearLabelFormatmonthLabelFormat属性用于设置各级别日历头部中的日期格式化
      decadeLabelFormat默认为:"yyyy", yearLabelFormat默认为:"yyyy", monthLabelFormat默认为:"MMMM yyyy"
    • yearsListFormatmonthsListFormat属性用于设置年级别中月份的格式化和十年级别中年份的格式化
      yearsListFormat默认为:"yyyy", monthsListFormat默认为:"MMM"

    通常只需自定义monthLabelFormatmonthsListFormat

  • minDatemaxDate限制可选择的范围, 范围外部将被禁用.

  • renderDay月级别中自定义渲染日

  • firstDayOfWeek 定义星期的开始日, 默认使用上下文的设置, 如果不存在上下文则默认为1

  • hideWeekdays 是否隐藏日历的星期标签行, 默认为false

  • weekendDays 自定义周末, 默认使用上下文的设置

locale: es
lunmarmiéjueviesábdom
defaultLevel: year
maxLevel: year
周一周二周三周四周五周六周日
firstDayOfWeek: 0
周日周一周二周三周四周五周六
hideWeekdays: true
weekendDays: [1,2]
周一周二周三周四周五周六周日
numberOfColumns: 2
周一周二周三周四周五周六周日
周一周二周三周四周五周六周日
monthLabelFormat: yyyy MMMM
monthsListFormat: MMMM
周一周二周三周四周五周六周日
自定义今日组件
周一周二周三周四周五周六周日
minDate 和 maxDate 被限制到本月的2-15日
周一周二周三周四周五周六周日