Date

Local date or date and time input with a calendar, display mask, and validation.

Quick start

Add Date1 in the Designer. Use the example in a page method.

Date1.mode = 'date';
Date1.dateFormat = 'dd/MM/yyyy';
Date1.required = true;
Date1.min = '2026-01-01';
Date1.max = '2026-12-31';
Date1.value = '2026-11-04';
Date1.onChange = (sender) => {
  if (sender.valid) console.log(sender.value, sender.text);
};

Configure a date field

1. Add Date from the palette and select it in the Designer.
2. In the Inspector, choose Mode: date or datetime. Set Date format to dd/MM/yyyy, MM/dd/yyyy, or yyyy-MM-dd; enable Show seconds for datetime when needed.
3. Set the accessible label, optional placeholder, required and read-only settings, and whether to show the calendar. Configure value, min, and max using local ISO values; the limits are inclusive.
4. Link OnInput for typing and OnChange for a committed change in Interaction. The calendar can also be opened with Alt+Down or showPicker().

Values and validation

The displayed mask follows the selected format and mode. value uses YYYY-MM-DD or local YYYY-MM-DDTHH:mm[:ss], independent of the display format. These are local calendar fields with no time zone or UTC conversion. text contains the displayed draft, including incomplete or impossible dates; value is empty for such drafts. date returns a local Date at the start of the day, while datetime includes the time; both return null for invalid or incomplete input.

Use valid or checkValidity() before processing input and reportValidity() to show the browser's validation message. required, min, and max participate in validation. clear() clears the field and setNow() uses the current local date and time. Runtime assignments affect the current instance; configure the Inspector to save project defaults.

More examples

Date1.mode = 'datetime';
Date1.dateFormat = 'MM/dd/yyyy';
Date1.showSeconds = true;
Date1.min = '2026-01-01T09:00:00';
Date1.max = '2026-12-31T18:00:00';
Date1.value = '2026-11-04T14:30:00';
if (Date1.reportValidity()) {
  console.log(Date1.value, Date1.text, Date1.datetime);
}

Date1.mode = 'date';
Date1.setNow();
if (!Date1.showPicker()) console.log('Calendar is unavailable');
// Date1.clear();

Inspector properties

Component options and defaults. Fields without runtime access are configured in the Inspector.

API in code

focus(options?: FocusOptions): void;

Date1.focus({ preventScroll: true });

checkValidity(): boolean;

Date1.checkValidity();

reportValidity(): boolean;

Date1.reportValidity();

clear(): void;

Date1.clear();

setNow(): void;

Date1.setNow();

showPicker(): boolean;

Date1.showPicker();

dispose(): void;

// Call only when disposing of an instance whose lifecycle you control.
Date1.dispose();

show(): void;

hide(): void;

bindEvent(eventName: string, handler: WebComponentEventHandler<this> | null): () => void;

emit(eventName: string, detail?: unknown): boolean;

Events

Link methods in Interaction. How to use events.

import type { WebDate } from '@webrad/runtime';
// Copy this method into the page class and link it in Interaction.
class Example {
  public async Date1Change(
    sender: WebDate,
    event: Event,
  ): Promise<void> {
    console.log(sender.name, event.type);
  }
}

import type { WebDate } from '@webrad/runtime';
// Copy this method into the page class and link it in Interaction.
class Example {
  public async Date1Input(
    sender: WebDate,
    event: Event,
  ): Promise<void> {
    console.log(sender.name, event.type);
  }
}

import type { WebDate } from '@webrad/runtime';
// Copy this method into the page class and link it in Interaction.
class Example {
  public async Date1Focus(
    sender: WebDate,
    event: Event,
  ): Promise<void> {
    console.log(sender.name, event.type);
  }
}

import type { WebDate } from '@webrad/runtime';
// Copy this method into the page class and link it in Interaction.
class Example {
  public async Date1Blur(
    sender: WebDate,
    event: Event,
  ): Promise<void> {
    console.log(sender.name, event.type);
  }
}

import type { WebDate } from '@webrad/runtime';
// Copy this method into the page class and link it in Interaction.
class Example {
  public async Date1KeyDown(
    sender: WebDate,
    event: Event,
  ): Promise<void> {
    if (event instanceof KeyboardEvent) console.log(event.key);
  }
}

import type { WebDate } from '@webrad/runtime';
// Copy this method into the page class and link it in Interaction.
class Example {
  public async Date1KeyUp(
    sender: WebDate,
    event: Event,
  ): Promise<void> {
    if (event instanceof KeyboardEvent) console.log(event.key);
  }
}