Q2 Calendar

Use assume to detect the year automatically based on today's date when the user presses the Escape key or the Blur mouse event occurs.

Type

type Assume = 'current' | 'future' | 'past';

Example

Always assume the current year:

element.assume = 'current';

Assume the next year if the type mm/dd is later than today:

element.assume = 'future';

Assume the previous year if the type mm/dd is earlier than today:

element.assume = 'past';

A label shown at the top of the popover date picker.

Example

element.calendarLabel = "Transfer date";

Specifies a time of day after which a date is no longer valid.

Example

// 2:00 PM local US Central Daylight Time
element.cutoffTime = '2020-10-15T14:00:00.000-05:00';

// UTC time 19:00
element.cutoffTime = '2020-10-15T19:00:00.000Z';

The most concise way to define valid days of the week. Each day of the week has a checksum value:

• Sunday = 1
• Monday = 2
• Tuesday = 4
• Wednesday = 8
• Thursday = 16
• Friday = 32
• Saturday = 64

Sum the checksum values of your desired valid days, and set daysOfWeekChecksum to that summed value.

Example

element.daysOfWeekChecksum = 127; // All days of the week are valid
element.daysOfWeekChecksum = 62; // Only weekdays are valid
element.daysOfWeekChecksum = 65; // Only Saturday and Sunday are valid

When true, the field is disabled.

Example

element.disabled = true;

Text that appears within the q2-calendar field when it is disabled.

Example

element.disabledMsg = "Please select an account first";

Text that appears at the bottom of the popover date picker.

Example

element.disclaimer = "Weekend delivery may incur additional fees";

Determines the display format of the date field value. Must follow the date-fns token specification.

Example

element.displayFormat = "MM-dd-yyyy";

Defines the last selectable date in the date picker popover.

Example

element.endDate = "2019-04-12";

Hides the field's <label> element from view.

Example

element.hideLabel = true;

This property is used to show error styles when the calendar is in an errant state.

Example

element.invalid = true;

Defines an explicit date blacklist.

Example

element.invalidDates = ['2019-11-23', '2019-12-25'];

The visible label for the q2-calendar input field.

Example

element.label = "Select a date";

When true, appends "(optional)" to the q2-calendar field label and sets aria-required="false".

Example

element.optional = true;

Use popDirection to force the direction of the pop-up that the calendar displays. If no value is passed the component auto-detects based on the available space below it. The component auto-detection will drop down unless it detects there is not sufficient height left to do so, in which case it will pop up.

Type

type PopDirection = "up" | "down";

Example

element.popDirection = 'up';

Defines the first selectable date in the date picker popover.

Example

element.startDate = "2019-02-21";

When true, the user can type in the field.

Example

element.typeable = true;

Defines a date whitelist.

Example

element.validDates = ['2019-11-23', '2019-12-25'];

The value of the q2-calendar element, e.g. the selected date.

Example

element.value = "2019-1-30";

How to change or clear value using javascript

// change date
element.value = '2022-12-21';

// clear date
element.value = null;

Emitted when a date is selected.

Type

type ChangeEvent = CustomEvent<{ value: string }>;

Example

element.onchange = (event) => {
  this.value = event.detail.value;
}