设置

type

类型: 字符串

默认: 'default'

选项: 'default' | 'multiple' | 'month' | 'year' | 'week'

new Calendar('#calendar', {
  type: 'default',
});

type 参数定义显示的日历类型。week 类型显示单独一周而不是整月。它可以单独使用，也可以与 enableCollapse 一起使用，让访问者在整月和一周之间切换。

inputMode

类型: 布尔值

默认: false

选项: true | false

new Calendar('#calendar', {
  inputMode: true,
});

inputMode 参数指示作为第一个参数传递的 mainElement 表示输入字段而不是日历的包装器。

openOnFocus

类型: 布尔值 | 函数

默认: true

选项: true | false | () => false

new Calendar('#calendar', {
  openOnFocus: false,
  // 或使用回调
  openOnFocus: (self) => !self.context.isShowInInputMode,
});

如果 openOnFocus 参数为 true 或回调返回 true，则聚焦 input 会打开日历。使用 false 或回调来控制此行为并实现您自己的焦点处理器。

positionToInput

类型: 字符串

默认: 'left'

选项: 'auto' | 'center' | 'left' | 'right' | ['bottom' | 'top', 'center' | 'left' | 'right']

new Calendar('#calendar', {
  positionToInput: 'auto',
  // positionToInput: ['bottom', 'center'],
});

此参数定义日历相对于输入的位置，如果日历使用 inputMode 参数初始化。

positionToInput 接受一个字符串，值为 'left'、'center' 或 'right'，或者一个值数组 [Y轴, X轴]，其中 Y 轴可以是 'bottom' 或 'top'，X 轴可以是 'left'、'center' 或 'right'。 如果未指定 Y 轴，则使用默认值 'bottom'。

您可以使用值 positionToInput: 'auto' 根据视口中可用空间自动确定最佳位置。 该选项允许计算所有 4 个边的可用空间，并首先尝试在输入下方显示日历，这是默认位置。 如果下方空间不足，它将评估另一个最佳可用位置。

animation新内容

Type: Boolean | Object

Default: false

Options: true | false | { duration?: Number, easing?: String, slide?: Timing, fade?: Timing, collapse?: Timing }

Timing: { duration?: Number, easing?: String }

new Calendar('#calendar', {
  animation: true,
  // animation: { duration: 400, easing: 'ease-out' },
  // animation: { slide: { duration: 400 }, fade: { duration: 120 }, collapse: { duration: 300 } },
});

为视图之间的切换添加动画。箭头导航和 enableSwipe 使用水平滑动，月份与年份选择器使用交叉淡入淡出，enableCollapse 则在整月与一周之间对日历高度进行动画。

不同过渡的默认值并不相同——滑动为 250ms，交叉淡入淡出为 150ms，折叠为 300ms，缓动均为 cubic-bezier(0.4, 0, 0.2, 1)。传入对象可覆盖其中任意一项：duration 的单位是毫秒，easing 接受 CSS 缓动函数。顶层的值作用于所有过渡；嵌套在 slide（箭头和 enableSwipe）、fade（选择器）或 collapse（enableCollapse）下则只作用于该组。嵌套值优先于顶层值。

出于向后兼容的考虑，默认值为 false：该选项是后来加入的，而开启它会改变滑动和交叉淡入淡出期间的 DOM 查询结果。正在退出的内容仍保留在 DOM 中带有 inert 的 [data-vc-ghost] 图层内，因此日期元素可能会短暂地出现两份。如果你自己的代码会查询这些元素，请排除该图层；折叠不会创建幽灵图层。

firstWeekday

类型: 数字

默认: 1

选项: 从 0 到 6

new Calendar('#calendar', {
  firstWeekday: 1,
});

此参数设置一周的第一天。指定一个从 0 到 6 的数字，其中数字表示星期几的标识符。根据 JS 标准，星期几从 0 开始，0 是星期日。

monthsToSwitch

类型: 数字

默认: 1

选项: 从 1 到 12

new Calendar('#calendar', {
  monthsToSwitch: 1,
});

monthsToSwitch 参数控制可切换月份的数量。

themeAttrDetect

类型: 字符串 | 假

默认: 'html[data-theme]'

选项: '字符串 | false

new Calendar('#calendar', {
  themeAttrDetect: 'html[data-theme]',
});

要让日历自动跟踪并应用网站的主题，您可以传递一个字符串值，形式为 CSS 选择器。 方括号表示包含主题名称的属性。 默认情况下，跟踪带有 data-theme 属性的 html 标签，但您可以配置任何其他属性和标签，例如 class，如果类名用于设置主题：'html[class]'。 如果设置为 false，主题将由用户的系统或 selectedTheme 参数确定。

locale

类型: 字符串

默认: 'en'

选项: 语言标签 | 数组<区域设置>

new Calendar('#calendar', {
  locale: 'en',
  // 或为您的标签指定一个对象
  // locale: {
  //   months: {
  //     long: [],
  //     short: [],
  //   },
  //   weekday: {
  //     long: [],
  //     short: [],
  //   }
  // },
});

此参数设置日历的语言本地化。 您可以根据 BCP 47 指定语言标签，或提供月份和星期几名称的数组，更多详细信息请参见此处。

dateToday

类型: Date 对象

默认: 'today'

选项: Date | number | 'YYYY-MM-DD' | 'today'

new Calendar('#calendar', {
  dateToday: 'today',
});

dateToday 参数定义哪个日期将被视为日历的今天。

dateMin

类型: 字符串

默认: '1970-01-01'

选项: 'Date | number | 'YYYY-MM-DD' | 'today'

new Calendar('#calendar', {
  dateMin: '1970-01-01',
});

dateMin 参数设置日历将考虑的最小允许日期，该日期不能小于此日期。

dateMax

类型: 字符串

默认: '2470-12-31'

选项: 'Date | number | 'YYYY-MM-DD' | 'today'

new Calendar('#calendar', {
  dateMax: '2470-12-31',
});

dateMax 参数设置日历将考虑的最大允许日期，该日期不能大于此日期。

displayDateMin

类型: 字符串

默认: '1970-01-01'

选项: 'Date | number | 'YYYY-MM-DD' | 'today'

new Calendar('#calendar', {
  displayDateMin: '2022-07-01',
});

此参数设置用户可以选择的最小日期。早于指定日期的日期将被禁用且不可选择。

displayDateMax

类型: 字符串

默认: '2470-12-31'

选项: 'Date | number | 'YYYY-MM-DD' | 'today'

new Calendar('#calendar', {
  displayDateMax: '2024-07-01',
});

此参数设置用户可以选择的最大日期。晚于指定日期的日期将被禁用且不可选择。

displayDatesOutside

类型: 布尔值

默认: true

选项: true | false

new Calendar('#calendar', {
  displayDatesOutside: false,
});

使用此参数，您可以决定是否显示上个月和下个月的日期。

displayDisabledDates

类型: 布尔值

默认: false

选项: true | false

new Calendar('#calendar', {
  displayDisabledDates: false,
});

此参数确定是否显示所有日期，包括禁用的日期。

displayMonthsCount

类型: 数字

默认: 2

选项: 从 2 到 12

new Calendar('#calendar', {
  displayMonthsCount: 2,
});

displayMonthsCount 参数定义如果日历类型设置为 'multiple' 时显示的月份数量。

disableDates

类型: 字符串[] | 数字[] | 日期[]

默认: null

选项: ['YYYY-MM-DD'] | [数字] | [日期] | null

new Calendar('#calendar', {
  disableDates: ['2022-08-10:2022-08-15', '2022-08-20', 1722152977141, new Date()],
});

此参数允许您禁用指定的日期，无论指定的范围如何。

disableAllDates

类型: 布尔值

默认: false

选项: true | false

new Calendar('#calendar', {
  disableAllDates: true,
});

此参数禁用所有日期，在使用 enableDates 时可能很有用。

disableDatesPast

类型: 布尔值

默认: false

选项: true | false

new Calendar('#calendar', {
  disableDatesPast: true,
});

此参数禁用所有过去的日期。

disableDatesGaps

类型: 布尔值

默认: false

选项: true | false

new Calendar('#calendar', {
  disableDatesGaps: true,
});

此参数禁用范围内带有禁用日期的日期选择。仅当 selectionDatesMode 参数设置为 'multiple-ranged' 时才有效。

disableWeekdays

类型: 数字

默认: []

选项: 从 0 到 6

new Calendar('#calendar', {
  disableWeekdays: [0, 6],
});

此参数允许您禁用指定的星期几。指定一个包含从 0 到 6 的数字的数组，其中每个数字表示星期几的标识符。根据 JS 标准，星期几从 0 开始，0 是星期日。

disableToday

类型: 布尔值

默认: false

选项: true | false

new Calendar('#calendar', {
  disableToday: true,
});

使用此参数，您可以禁用日历中今天日期的选择。

enableDates

类型: 字符串[] | 数字[] | 日期[]

默认: null

选项: ['YYYY-MM-DD'] | [数字] | [日期] | null

new Calendar('#calendar', {
  enableDates: ['2022-08-11:2022-08-16', '2022-08-20', 1722152977141, new Date()],
});

此参数允许您启用指定的日期，无论范围和禁用的日期如何。

enableEdgeDatesOnly

类型: 布尔值

默认: true

选项: true | false

new Calendar('#calendar', {
  enableEdgeDatesOnly: true,
});

此参数允许您仅获取用户选择的开始和结束日期，忽略中间日期。此参数仅在 selectionDatesMode 设置为 'multiple-ranged' 时有效。

enableDateToggle

类型: 布尔值 | 函数

默认: true

选项: true | false | () => false

new Calendar('#calendar', {
  enableDateToggle: false,
  // 或使用回调
  enableDateToggle: (self) => new Date(self.selectedDates[0]) < new Date(),
});

如果 enableDateToggle 参数为 true 或回调返回 true，则再次单击选定的日期将取消选择它。

enableWeekNumbers

类型: 布尔值

默认: false

选项: true | false

new Calendar('#calendar', {
  enableWeekNumbers: true,
});

使用此参数，您可以决定是否在年份中显示周数。

enableMonthChangeOnDayClick

类型: 布尔值

默认: true

选项: true | false

new Calendar('#calendar', {
  enableMonthChangeOnDayClick: false,
});

使用此参数，您可以决定当单击上个月或下个月的日期时月份是否会切换。

enableJumpToSelectedDate

类型: 布尔值

默认: false

选项: true | false

new Calendar('#calendar', {
  enableJumpToSelectedDate: true,
  selectedDates: ['2018-05-02'],
});

如果启用此选项并指定一个或多个选定日期，但未指定 selectedMonth 和 selectedYear，日历将跳转到第一个选定日期。如果设置为 false，日历将始终打开当前月份和年份。

enableCollapse新内容

Type: Boolean

Default: false

Options: true | false

new Calendar('#calendar', {
  enableCollapse: true,
});

在网格下方添加一个控件，把整月折叠为一周，再次操作则展开。如果第一个选中日期属于当前显示月份，就以它所在的周为准；否则，如果今天属于该月份，就以今天所在的周为准；再否则，以当前显示月份第一天所在的周为准。在使用鼠标的设备上显示为箭头，在触摸设备上显示为可上下拖动的小横条。

enableSwipe新内容

Type: Boolean

Default: false

Options: true | false

new Calendar('#calendar', {
  enableSwipe: true,
});

允许访问者横向拖动日历内容来切换到下一个或上一个周期，适用于所有可以用箭头导航的视图：default、multiple、week 和年份列表。相邻周期会跟随指针移动，松手时的距离和速度决定它是落位还是返回。

selectionDatesMode

类型: 字符串 | false

默认: 'single'

选项: 'single' | 'multiple' | 'multiple-ranged' | false

new Calendar('#calendar', {
  selectionDatesMode: 'single',
});

此参数确定是允许选择一个或多个日期，还是完全禁用日期选择。

selectionMonthsMode

类型: 布尔值

默认: true

选项: true | false | 'only-arrows'

new Calendar('#calendar', {
  selectionMonthsMode: false,
});

此参数允许您禁用月份选择，仅允许使用箭头切换月份，或允许以任何方式切换月份。

selectionYearsMode

类型: 布尔值

默认: true

选项: true | false | 'only-arrows'

new Calendar('#calendar', {
  selectionYearsMode: false,
});

此参数允许您禁用年份选择，仅允许使用箭头切换年份，或允许以任何方式切换年份。

selectionTimeMode

类型: 假 | 数字

默认: false

选项: false | 24 | 12

new Calendar('#calendar', {
  selectionTimeMode: true,
});

此参数启用时间选择。您还可以使用数字指定时间格式：24 小时制或 12 小时制。

selectedDates

类型: 字符串[] | 数字[] | 日期[]

默认: null

选项: ['YYYY-MM-DD'] | [数字] | [日期] | null

new Calendar('#calendar', {
  selectedDates: ['2022-08-10:2022-08-15', '2022-08-20', 1722152977141, new Date()],
});

此参数允许您指定在日历初始化时将选择的日期列表。

selectedMonth

类型: 数字

默认: null

选项: 从 0 到 11 | null

new Calendar('#calendar', {
  selectedMonth: 0,
});

此参数定义在日历初始化时将显示的月份。根据 JS 标准，月份从 0 到 11 编号。参见 enableJumpToSelectedDate，以默认使用第一条选中的日期。

selectedYear

类型: 数字

默认: null

选项: 数字 (YYYY) | null

new Calendar('#calendar', {
  selectedYear: 2022,
});

此参数定义在日历初始化时将显示的年份。参见 enableJumpToSelectedDate，以默认使用第一条选中的日期。

selectedHolidays

类型: 字符串[] | 数字[] | 日期[]

默认: null

选项: ['YYYY-MM-DD'] | [数字] | [日期] | null

new Calendar('#calendar', {
  selectedHolidays: ['2022-08-10:2022-08-15', '2022-08-20', 1722152977141, new Date()],
});

此参数允许您指定将被视为节假日的日期，并将接收额外的数据属性以进行样式设置。

selectedWeekends

类型: 数字

默认: [0, 6]

选项: 数字[0-6]

new Calendar('#calendar', {
  selectedWeekends: [0, 6],
});

此参数允许您指定一周的周末日。指定一个包含从 0 到 6 的数字的数组，其中每个数字表示星期几的标识符。根据 JS 标准，星期几从 0 开始，0 是星期日。

selectedTime

类型: 字符串

默认: null

选项: 'hh:mm aa' | null

new Calendar('#calendar', {
  selectedTime: '03:44 AM',
});

此参数允许您设置在日历初始化时将显示的时间。时间以格式 'hh:mm aa' 设置，其中 'aa' 是 AM/PM 标记。如果使用 24 小时制，则不需要 'aa' 标记。

selectedTheme

类型: 字符串

默认: 'system'

选项: 字符串 (自定义主题) | 'light' | 'dark' | 'system'

new Calendar('#calendar', {
  selectedTheme: 'system',
});

此参数定义日历的主题。默认情况下，主题由用户的系统或网站设置确定。

timeMinHour

类型: 数字

默认: 0

选项: 从 0 到 23

new Calendar('#calendar', {
  timeMinHour: 0,
});

此参数指定哪个小时将是选择的最小值。

timeMaxHour

类型: 数字

默认: 23

选项: 从 0 到 23

new Calendar('#calendar', {
  timeMaxHour: 23,
});

此参数指定哪个小时将是选择的最大值。

timeMinMinute

类型: 数字

默认: 0

选项: 从 0 到 59

new Calendar('#calendar', {
  timeMinMinute: 0,
});

此参数指定哪个分钟将是选择的最小值。

timeMaxMinute

类型: 数字

默认: 59

选项: 从 0 到 59

new Calendar('#calendar', {
  timeMaxMinute: 59,
});

此参数指定哪个分钟将是选择的最大值。

timeControls

类型: 字符串

默认: 'all'

选项: 'all' | 'range'

new Calendar('#calendar', {
  timeControls: 'all',
});

此参数定义时间选择的方法：'all'（任何方法）或 'range'（仅使用控制器）。

timeStepHour

类型: 数字

默认: 1

选项: 从 1 到 23

new Calendar('#calendar', {
  timeStepHour: 1,
});

此参数设置小时控制器的步长。

timeStepMinute

类型: 数字

默认: 1

选项: 从 1 到 59

new Calendar('#calendar', {
  timeStepMinute: 1,
});

此参数设置分钟控制器的步长。

sanitizerHTML

类型: 函数

默认: (html) => html

import DOMPurify from 'dompurify';
 
new Calendar('#calendar', {
  sanitizerHTML: (html) => DOMPurify.sanitize(html),
});

sanitizerHTML 可以清理 HTML 模板，使其对 CSP 安全。