«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 enhanced parsing and formatting capabilities.

  • 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

Just add the data-smark attribute to the <input> element specifying the 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
⚙️ 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"
}
});

Every example in this section comes with many of the following tabs:

  • HTML: HTML source code of the example.
  • CSS: CSS applied (if any).
  • JS: JavaScript source code of the example.
  • Preview: Live, sandboxed rendering of the example — fully isolated from the page styles.
  • Notes: Additional notes and insights for better understanding. Don't miss it‼️

✨ In the Preview tab, a JSON playground editor is available with handy buttons:

  • ⬇️ Export to export the form data to the JSON playground editor.
  • ⬆️ Import to import data from the JSON playground editor into the form.
  • ♻️ Reset to reset the form to its default values.
  • ❌ Clear to clear the whole form.

💡 The JSON playground editor is part of the SmarkForm form itself — it is just omitted from the code snippets to keep the examples focused on what matters.

🛠️ Between the tab labels and the content there is always an edit toolbar:

  • ✏️ Edit — activates edit mode: each source tab turns into a syntax-highlighted code editor (powered by Ace) pre-filled with the full, merged source. Changes are sandboxed — the original example is not affected.
  • 📋 Include editor — (only visible in edit mode) controls whether the JSON playground editor is included in the preview. When toggled, the HTML and JS editors update instantly so you can see exactly what code is needed to add or remove it.
  • ▶️ Run — (only visible in edit mode) re-renders the Preview from the current editor contents and switches to the Preview tab.

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 undefined (clears the field)

All valid datetime values are normalized to ISO datetime-local format (YYYY-MM-DDTHH:mm:ss) for export, ensuring consistency across your application. Note that the datetime-local type works with local time (not UTC), so timezone information is not included in the exported value.

Requirements

The datetime-local component will throw an error if the target field is not an INPUT element or its type is explicitly defined and different to “datetime-local”. Invalid datetime strings that cannot be parsed will result in a null value rather than throwing an error.

🔗
🗒️ HTML
⚙️ JS
👁️ Preview
❓
<div id="myForm">
<input type="text" name="appointmentTime" data-smark='{"type":"datetime-local"}'>
</div>

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

Every example in this section comes with many of the following tabs:

  • HTML: HTML source code of the example.
  • CSS: CSS applied (if any).
  • JS: JavaScript source code of the example.
  • Preview: Live, sandboxed rendering of the example — fully isolated from the page styles.
  • Notes: Additional notes and insights for better understanding. Don't miss it‼️

✨ In the Preview tab, a JSON playground editor is available with handy buttons:

  • ⬇️ Export to export the form data to the JSON playground editor.
  • ⬆️ Import to import data from the JSON playground editor into the form.
  • ♻️ Reset to reset the form to its default values.
  • ❌ Clear to clear the whole form.

💡 The JSON playground editor is part of the SmarkForm form itself — it is just omitted from the code snippets to keep the examples focused on what matters.

🛠️ Between the tab labels and the content there is always an edit toolbar:

  • ✏️ Edit — activates edit mode: each source tab turns into a syntax-highlighted code editor (powered by Ace) pre-filled with the full, merged source. Changes are sandboxed — the original example is not affected.
  • 📋 Include editor — (only visible in edit mode) controls whether the JSON playground editor is included in the preview. When toggled, the HTML and JS editors update instantly so you can see exactly what code is needed to add or remove it.
  • ▶️ Run — (only visible in edit mode) re-renders the Preview from the current editor contents and switches to the Preview tab.

When a SmarkForm component fails to render due to a RenderError, it is replaced by a flamboyant placeholder that shows the error code and provides a handy button to “replay” it to the console making it easier to debug the issue.

👉 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)

Reverts the datetime-local field to its configured default value. If no default was configured, the field reverts to null (same as clear).

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 Types
«time» Component Type
Component Types
«select» Component Type