SuperAPI AI 工具集

shadcn_ui-calendar

前端与建站

查看项目

更新于 10-16 04:00

技能介绍

ShadCalendar 是 Shadcn UI 提供的日期字段组件,主要用途是让用户输入和编辑日期。

用途

用于在界面中构建日期选择字段,支持单日期、多日期和日期范围三种输入场景。

选择模式

  • 单日期:使用 ShadCalendar 默认构造,通过 selected 指定选中日期。
  • 多日期:使用 ShadCalendar.multiple,可设置选择数量下限(min)与上限(max)。
  • 日期范围:使用 ShadCalendar.range,可设置范围天数下限(min)与上限(max)。

主要能力与参数

  • fromMonth / toMonth:限制可选月份范围。
  • captionLayout:控制标题布局,可用 ShadCalendarCaptionLayout.dropdownMonths 或 ShadCalendarCaptionLayout.dropdownYears 切换为下拉式的月份/年份选择。
  • numberOfMonths:一次显示的月份数量。
  • hideNavigation:设为 true 时隐藏月份导航。
  • showWeekNumbers:设为 true 时显示周数。
  • showOutsideDays:设为 false 时隐藏相邻月份的日期。
  • fixedWeeks:设为 true 时使用固定的周数行数。
  • hideWeekdayNames:设为 true 时隐藏星期表头。

使用方式

单日期示例:

final today = DateTime.now();

ShadCalendar( selected: today, fromMonth: DateTime(today.year - 1), toMonth: DateTime(today.year, 12), )

多日期示例:

ShadCalendar.multiple( numberOfMonths: 2, fromMonth: DateTime(today.year), toMonth: DateTime(today.year + 1, 12), min: 5, max: 10, )

范围示例:

const ShadCalendar.range( min: 2, max: 5, )

标题布局示例:

ShadCalendar( captionLayout: ShadCalendarCaptionLayout.dropdownMonths, );

ShadCalendar( captionLayout: ShadCalendarCaptionLayout.dropdownYears, );

适用场景

需要在 Flutter 应用中提供日期录入的界面,例如表单中的日期字段、需要选择多个日期的排期场景,以及需要选择起止日期的范围选择场景。

限制

关于平台支持、收费与价格、具体视觉效果等信息,资料暂未提供。