Datetime Component

Last updated: 4 months ago

Category: Form

The 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.

Initial Values

There are two ways to set initial values:

1. Using the value attribute on the component
2. Writing the value directly in the component's innerHTML

Common Formats

Set output text format using the format parameter, supporting the following keywords:

• BC: BC era expression text
• AD: AD era expression text
• YYYY: Year (unpadded)
• M: Month (unpadded); MM: Zero-padded month; MMM: Month abbreviation; MMMM: Full month name
• D: Day (unpadded); DD: Zero-padded day
• d: Week index (Sunday=0); dd: Minimal weekday name (2 chars); ddd: Weekday abbreviation (3 chars); dddd: Full weekday name
• H: 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 minute
• s: Second (unpadded); ss: Zero-padded second
• SSS: Three-digit milliseconds
• W: Week of year (index); WW: Zero-padded week index; WWW: Week of year with text
• w: Week of month (index); ww: Zero-padded week index www: 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 with daytime selection sub-panel
• YYYY-MM-DD HH:mm or YYYY/MM/DD HH:mm - Enables date main panel with daytime 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 with daytime 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.

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:

1. All component attributes should be lowercase.
2. Attribute values must be in string format.
3. If an attribute value is an object, the surrounding { and } symbols can be omitted.
4. 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 as cont-type in component attributes
   • Parameter b4Init should be written as b4-init in attributes
5. All methods, events, and variables can be accessed through the built-in instance (typically via this.ins).
6. 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')})