Datetime Library: Parameter Details and Display Method Demonstration Examples

Last updated: 7 months ago

Category: Examples

The Datetime module can create date picker instances, supporting single or multiple date selection, as well as date range selection. It also supports the use of lunar calendars and custom events.

Starting Day of Week

The date panel defaults to starting with Monday. This can be configured using the weekStart parameter, which supports two values: ISO (default) and USA (which starts the week on Sunday).

Panel YYYY+MM Layout

The panel header displays the current year and month values with two layout options configurable via the headFormat parameter:

Value Types

Based on the format setting, use the value parameter to set date values (e.g., with format:'YYYY-MM-DD', set value to something like "2023-05-06").

Auto-Create Input Container

The module can automatically create an input container by applying the _datetime-wrap class to any node, which will create an oc-textarea node as the input container.

Form Submission

Auto-created input containers don't have a name attribute by default. Use the name parameter to add one for form submission.

Disable Auto-Correction

By default, the module checks and corrects input/div values on init or when opening. Set autoCorrect:false to disable this and make input/div one-way value receivers.

Specify Child Container

For non-input elements (like div/span), use childSel to specify which child node's innerHTML should be replaced with the selected date.

Step-by-Step Implementation

Normally the target, positioning, and input/output nodes are the same. Use these parameters to separate them:

btnSel supports multiple nodes via selector string or node array.

Custom Footer Buttons

Configure footer buttons via footer.children array (see createFooter utility).

You can create custom buttons using standard methods. Implement specific functionality through the button's click event.

Chained Date Pickers

Use the next parameter to open another picker when closing the current one (specify target instance's insName).

Display Selection Results

To check selected dates/times before confirmation, set resultShow:true to enable real-time display of selected results.

Selectable Date/Time Ranges

Use datespan and timespan parameters to set valid date and time ranges. datespan has two formats:

For datetime type (year-month-day + hour-minute-second picker), you can use both datespan and timespan together.