Usage
Signature:
interface CDatePickerElement
Typescript Import Format
//To typecheck the element APIs, import as below.
import { CDatePickerElement } from "oj-c/date-picker";
//For the transpiled javascript to load the element's module, import as below
import "oj-c/date-picker";
For additional information visit:
Note: Application logic should not interact with the component's properties or invoke its methods until the BusyContext indicates that the component is ready for interaction.
Attributes
-
day-formatter :(date: Required<CalendarDate>) => { state: "disabled" | "enabled" | "restricted"; }
-
A function that receives a date and returns an object specifying how to format the provided date. This function is called for each date that is rendered and this can be used to control how individual dates are rendered - disabled, restricted, or enabled.
Names
Item Name Property dayFormatter
Property change event dayFormatterChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-day-formatter-changed
-
days-outside-month :"hidden"|"selectable"
-
The days-outside-month attribute affects the day cells that are outside of the current month.
- Default Value:
"hidden"
Supported Values:
Value Description hidden
The days outside of the current month will be hidden. selectable
The days outside of the current month will be visible and selectable. Names
Item Name Property daysOutsideMonth
Property change event daysOutsideMonthChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-days-outside-month-changed
-
max :(string|null)
-
The maximum selectable date, in date only ISO string format. Dates in the date picker that are greater than this date will not be selectable. This must be a date only ISO string with no time, otherwise an error is thrown and the component will not render. When set to null, there is no maximum.
- Default Value:
null
Names
Item Name Property max
Property change event maxChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-max-changed
-
max-width :(number|string)
-
Specifies the component style maxWidth.
If not specified, defaults to the theme specified maxWidth.
This attribute accepts values of type:
0 | `${number}${CssUnits}` | `${number}x` | `--${string}` | `var($string})` | `${number}%`When this component is used in composition and the component should take up 100% of the parent container's width, set maxWidth to '100%'.
Because there is a theme default value for maxWidth, when setting the width property to achieve a fixed width, set the maxWidth property to the same value.Names
Item Name Property maxWidth
Property change event maxWidthChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-max-width-changed
-
min :(string|null)
-
The minimum selectable date, in date only ISO string format. Dates in the date picker that are less than this date will not be selectable. This must be a date only ISO string with no time, otherwise an error is thrown and the component will not render. When set to null, there is no minimum.
- Default Value:
null
Names
Item Name Property min
Property change event minChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-min-changed
-
month-and-year-picker :"on"|"off"
-
The month-and-year-picker attribute can be used to specify whether or not the DatePicker should show the toggle buttons that toggle the month grid picker and year grid picker. The month picker grid allows the user to select a month to display in the date picker and the year picker grid allows the user to select the year to display in the date picker.
- Default Value:
"on"
Supported Values:
Value Description off
The month and year toggle buttons will not be shown and the date picker renders the month and the year as text. on
The month and year toggle buttons will be shown. Names
Item Name Property monthAndYearPicker
Property change event monthAndYearPickerChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-month-and-year-picker-changed
-
readonly :boolean
-
Whether the component is readonly. When the component is readonly, the date picker can still be used to navigate to different calendar dates, but the date picker won't allow the date to be changed via user action.
- Default Value:
false
Names
Item Name Property readonly
Property change event readonlyChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-readonly-changed
-
today-button :"visible"|"hidden"
-
Specifies the visibility of the 'Go to today' button.
- Default Value:
"visible"
Supported Values:
Value Description hidden
The 'Go to Today' button will be hidden. visible
The 'Go to Today' button will be shown and it can be pressed to navigate to Today. Names
Item Name Property todayButton
Property change event todayButtonChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-today-button-changed
-
today-time-zone :string
-
The today-time-zone attribute is used to compute today's date. This defaults to the user's system timezone.
The only reason an application would set the today-time-zone property is if they want the highlighted today cell to be in a different timezone than the user's system's timezone, like if the user has a preferred timezone that is not where they are physically working.
Names
Item Name Property todayTimeZone
Property change event todayTimeZoneChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-today-time-zone-changed
-
value :(string|null)
-
The value of the component.
The value must be a local date (no time) ISO string such as '2021-03-14', otherwise the component will throw an error.
The oj-c-date-picker initially opens to the selected date if there is one and it is within the min/max range. If there is no value, the DatePicker initially opens to today's month.
- Default Value:
null
- Supports writeback:
true
Names
Item Name Property value
Property change event valueChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-value-changed
-
width :(number|string)
-
Specifies the component style width.
If not specified, defaults to '100%'.
This attribute accepts values of type:
0 | `${number}${CssUnits}` | `${number}x` | `--${string}` | `var($string})` | `${number}%`
Because there is a theme default value for maxWidth, when setting the width property to achieve a fixed width, set the maxWidth property to the same value.
Names
Item Name Property width
Property change event widthChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-width-changed
Methods
-
getProperty(property) : {any}
-
Retrieves the value of a property or a subproperty.
Parameters:
Name Type Description property
The property name to get. Supports dot notation for subproperty access. Returns:
- Type
- any
-
setProperties(properties) : {void}
-
Performs a batch set of properties.
Parameters:
Name Type Description properties
An object containing the property and value pairs to set. Returns:
- Type
- void
-
setProperty(property, value) : {void}
-
Sets a property or a single subproperty for complex properties and notifies the component of the change, triggering a corresponding event.
Parameters:
Name Type Description property
The property name to set. Supports dot notation for subproperty access. value
The new value to set the property to. Returns:
- Type
- void