Datetime Component
Category: FormThe datetime component can create date picker instances, supporting single or multiple date selection, date range selection, lunar calendar usage, and custom events.
Introduction
The oc-datetime component is based on the Datetime
library with simplified parameters, serving as a date/calendar selection component.
It supports most common date/calendar formats and can completely replace native type=date/datetime-local/year/month/time
input controls.
Basic Usage
Using no attributes creates a "Year-Month-Day" format date picker, with the panel defaulting to show the current month's calendar.
- Output
- HTML
Initial Values
There are two ways to set initial values:
- Using the
value
attribute on the component - Writing the value directly in the component's
innerHTML
- Output
- HTML
-
2023-3-12 -
Common Formats
Set output text format using the format
parameter, supporting the following keywords:
BC
: BC era expression textAD
: AD era expression textYYYY
: Year (unpadded)M
: Month (unpadded);MM
: Zero-padded month;MMM
: Month abbreviation;MMMM
: Full month nameD
: Day (unpadded);DD
: Zero-padded dayd
: Week index (Sunday=0);dd
: Minimal weekday name (2 chars);ddd
: Weekday abbreviation (3 chars);dddd
: Full weekday nameH
: Hour (24-hour, unpadded);HH
: Zero-padded hour (24-hour)h
: Hour (12-hour, unpadded);hh
: Zero-padded hour (12-hour)A
: AM/PM indicator (uppercase)a
: am/pm indicator (lowercase)m
: Minute (unpadded);mm
: Zero-padded minutes
: Second (unpadded);ss
: Zero-padded secondSSS
: Three-digit millisecondsW
: Week of year (index);WW
: Zero-padded week index;WWW
: Week of year with textw
: Week of month (index);ww
: Zero-padded week indexwww
: Week of month with text
Common format parameter combinations:
- YYYY - Enables
year
type main panel - YYYY-M, YYYY/M, YYYY-MM, YYYY/MM - Enables
month
type main panel - YYYY-M-D, YYYY/M/D, YYYY-MM-DD, YYYY/MM/DD - Enables
date
type main panel - YYYY-M-D H, YYYY/M/D H, YYYY-MM-DD HH, YYYY/MM/DD HH - Enables
date
main panel withdaytime
selection sub-panel - YYYY-MM-DD HH:mm or YYYY/MM/DD HH:mm - Enables
date
main panel withdaytime
sub-panel - YYYY-M-D H:m:s, YYYY/M/D H:m:s, YYYY-MM-DD HH:mm:ss, YYYY/MM/DD HH:mm:ss - Enables
date
main panel withdaytime
sub-panel - H:m:s and HH:mm:ss - No main panel, only
daytime
selection sub-panel - H:m and HH:mm - No main panel, only
daytime
selection sub-panel - H and HH - No main panel, only
daytime
selection sub-panel
For BC years, use the BC
keyword. To customize the "BC" text, use the lang.BC
parameter.
- Output
- HTML
Attributes
This component encapsulates the built-in instance, and its attributes are consistent with the parameters of the built-in instance. You can click here to view all parameters.
Several important notes:
- All component attributes should be lowercase.
- Attribute values must be in string format.
- If an attribute value is an object, the surrounding
{
and}
symbols can be omitted. - For attribute names that are verb-object structures or composed of two words, use hyphens to separate them. For example:
- Module parameter
contType
(if exists) should be written ascont-type
in component attributes - Parameter
b4Init
should be written asb4-init
in attributes
- Module parameter
- All methods, events, and variables can be accessed through the built-in instance (typically via
this.ins
). - When data cannot be passed through component attributes (e.g., due to nested single/double quote issues), you can manipulate the built-in instance to achieve your goal. It's particularly recommended to implement event listeners through the built-in instance.
Common Methods
Common component methods:
set
: Set properties (takes key-value pairs or array)reset
: Reset properties (no params)clear
: Clear properties and values (no params)
Basic usage: CompElem.reset()
Common Events
Common component events:
connected
: Component connected (no params)disconnected
: Component disconnected (no params)adopted
: Component moved (no params)set
: Property set (receives value)cleared
: Property cleared (no params)reset
: Property reset (no params)
Basic usage: CompElem.on('connected',()=>{console.log('connected')})