Log In Sign Up
HomeDocsFormDatetime Component

Datetime Component

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.

  • Output
  • HTML
  •                 
                    
                

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
  • Output
  • HTML
  • 2023-3-12
  •                 
                    
                

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.

  • 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:

  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')})

New Launch: 20% Off All Products

Unlock all examples and development resources