«datetime-local» Component Type

📖 Table of Contents

Introduction

The datetime-local component type extends the Input component type, providing specialized handling for datetime-local input fields with local date/time parsing and formatting.

  • Imports and Exports: ISO datetime-local string (YYYY-MM-DDTHH:mm:ss) or null (when empty)
  • Singleton Pattern: Implements the Singleton Pattern
  • Data Conversion: Converts between various datetime formats and ISO datetime-local strings

Usage

Use <input type="datetime-local" data-smark>. SmarkForm also infers datetime-local from the native type, or sets it when you explicitly declare {"type":"datetime-local"} on an <input> without type.

<input data-smark='{"type":"datetime-local", "name":"appointmentTime"}'>

Alternatively, you can also use the shorthand notation inferring the type from the <input> element type:

<input type="datetime-local" name="appointmentTime" data-smark>

Example:

🔗
🗒️ HTML
🎨 CSS
⚙️ JS 👁️ Preview
❓ 
<div id="myForm">
  <input type="datetime-local" name="appointmentTime" data-smark>
</div>

const myForm = new SmarkForm(document.getElementById("myForm"), {
    "value": {
    "appointmentTime": "2025-06-15T09:30:00"
}
});

Data Formats

The datetime-local component accepts multiple input formats for maximum flexibility:

  • ISO DateTime-Local String (YYYY-MM-DDTHH:mm:ss): "2023-12-25T14:30:45" (standard HTML datetime-local input format)
  • Short DateTime-Local String (YYYY-MM-DDTHH:mm): "2023-12-25T14:30" (automatically adds :00 for seconds)
  • Compact DateTime String (YYYYMMDDTHHmmss): "20231225T143045" (15-character format, converted to standard format)
  • Short Compact DateTime String (YYYYMMDDTHHmm): "20231225T1430" (13-character format, converted with :00 for seconds)
  • ISO 8601 String with Timezone: "2023-12-25T14:30:45.000Z" (converted to local time representation)
  • Date Object: new Date("2023-12-25T14:30:45") (JavaScript Date instance)
  • Epoch Timestamp: 1703512245000 (milliseconds since Unix epoch)
  • Empty/Null Values: null or "" clears the field. undefined is a reset signal; see the reset caveat below.

All valid values are normalized to YYYY-MM-DDTHH:mm:ss for export. ISO strings with a timezone or epoch timestamps are converted to the runtime’s local time; the exported value contains no timezone information.

Field defaults and reset

Current implementation caveat: datetime-local.import(undefined) normalizes the reset signal to null before delegating to the generic input type. A direct field reset() therefore clears to null and can replace the field’s stored default with null; the base field’s initial reset can also discard a field-local value default. A parent Form reset that imports an explicit datetime in its stored object still restores that value. No focused regression test covers datetime-local field-level defaults; see the Step 14 transfer map.

Requirements

The component requires an <input type="datetime-local">; a missing native type is filled in, while a different type or tag raises a render error. Unparseable values export as null.

🔗
🗒️ HTML
🎨 CSS
⚙️ JS 👁️ Preview
❓ 
<div id="myForm">
  <p>
    <label>Correct:</label>
    <input type="datetime-local" name="appointmentTime1" data-smark='{"type":"datetime-local"}'>
  </p>
  <p>
    <label>Incorrect:</label>
    <input type="text" name="appointmentTime2" data-smark='{"type":"datetime-local"}'>
  </p>
</div>

const myForm = new SmarkForm(document.getElementById("myForm"));

When a component fails to render, SmarkForm replaces it with an error placeholder that shows the code and provides a button to replay the error in the console.

👉 Take a look to the Preview tab of the previous example to see it in action.

Notice that you’ll need to open your browser console if you want to see the error details when pressing the “Replay Error” button.

API Reference

Actions

Actions are special component methods that can be triggered both programmatically (by directly calling the function) or by user interaction with a trigger component. Each action is associated with a specific behavior that can be performed on the component.

👉 Actions receive an options object as an argument, which contains the necessary information to perform the action.

👉 When called from triggers, the properties defined in their data-smark object, are passed as options to the action. Those expecting a path(★ ) to other components are resolved to the actual component.

The datetime-local component type supports the following actions:

(Async) export (Action)

Exports the value of the datetime-local input field as an ISO datetime-local string. If the field is empty or contains an invalid datetime, it returns null.

Options (export)
  • action: (= “export”)
  • origin: Origin is automatically set to the trigger component that called the action (and cannot be overridden). In case of a manual call, it is set to Null.
  • context: Path★ (absolute or relative to its natural context) to the component that is the context of the action. If not provided, the context is set to its natural context.
  • target: Path★ (absolute or relative to its context). Pipes the exported data to the import action of the target component.
  • data:

(Async) import (Action)

Imports a value into the datetime-local input field. Accepts various datetime formats and converts them to the appropriate input format.

Options (import)
  • action: (= “import”)
  • origin: Origin is automatically set to the trigger component that called the action (and cannot be overridden). In case of a manual call, it is set to Null.
  • context: Path★ (absolute or relative to its natural context) to the component that is the context of the action. If not provided, the context is set to its natural context.
  • target: Path★ (absolute or relative to its context). Pipes the imported data from the export action of the target component, overridding the “data” option if specified.
  • data: (Date object, ISO datetime-local string, compact datetime string, or epoch timestamp)
  • focus: (boolean, default true)

(Async) clear (Action)

Clears the value of the datetime-local input field (sets it to null).

Options (clear)
  • action: (= “clear”)
  • origin: Origin is automatically set to the trigger component that called the action (and cannot be overridden). In case of a manual call, it is set to Null.
  • context: Path★ (absolute or relative to its natural context) to the component that is the context of the action. If not provided, the context is set to its natural context.

(Async) reset (Action)

The reset behavior for this type differs from the generic field contract; see Field defaults and reset.

Options (reset)
  • action: (= “reset”)
  • origin: Origin is automatically set to the trigger component that called the action (and cannot be overridden). In case of a manual call, it is set to Null.
  • context: Path★ (absolute or relative to its natural context) to the component that is the context of the action. If not provided, the context is set to its natural context.
Component Reference
«time» Component Type
Component Reference
«color» Component Type