The sbb-datepicker component can be used together with a native input element to display the typed value
as a formatted date (dd.MM.yyyy).

The component allows the insertion of up to 10 numbers, possibly with separators like ., -, , , or /,
then automatically formats the value as date and displays it. It also exposes methods to get/set the value formatted as Date.

If the sbb-datepicker is used within a sbb-form-field with a native input, they are automatically linked; otherwise,
they can be connected using the input property, which accepts the id of the native input, or directly its reference.

When the two are linked, the component sets the input placeholder, and the input's type as text, then reads
the disabled, readonly, min and max attributes from the input and emits then as payload of the inputUpdated event.
If the input's value changes, it is formatted then a change event is emitted with the new value. If it's an invalid date, the data-sbb-invalid attribute is added to the input. The component also listens for changes in its two properties, wide and dateFilter, and emits a datePickerUpdated event when changed.

Consumers can listen to the native change and input events on the sbb-datepicker component to intercept date changes, the current value can be read from the async method event.target.getValueAsDate().
To set the value programmatically it's recommended to use the setValueAsDate() method of the <sbb-datepicker>.
Each time the user changes the date by using the calendar, the next and previous day arrow, or by using the setValueAsDate() method, a blur event is fired on the input to ensure compatibility with any framework that relies on that event to update the current state.

Note that using the dateFilter function as a replacement for the min and max properties will most likely result in a significant loss of performance.

Custom date formats

Using a combination of the dateParser and format properties, it's possible to configure the datepicker to accept date formats other than the default EE, dd.mm.yyyy.
In the following example the datepicker is set to accept dates in the format yyyy-mm-dd. In particular, dateParser is the function that the component uses internally to decode strings and parse them into Date objects, while the format function is the one that the component uses internally to display a given Date object as a string.

    // datePicker is a HTMLSbbDatepickerElement
    datePicker.dateParser = (value: string) => {
        // You should implement some kind of input validation
        if (!value || !isValid(value)) {
            return undefined;
        }

        return new Date(value);
    };

    datePicker.format = (value: Date) => {
        if (!value) {
            return '';
        }

        const offset = value.getTimezoneOffset();
        value = new Date(yourDate.getTime() - (offset * 60 * 1000));
        return yourDate.toISOString().split('T')[0];
    };

Usually these functions need to be changed together, although in simple cases where the default dateParser might still work properly (e.g. in case we wanted to accept the format dd.mm.yyyy), it's possible to provide just the format function.
For custom format functions is recommended to use the Intl.DateTimeFormat API, as it's done in the default implementation.

Validation Change

Whenever the validation state changes (e.g. a valid value becomes invalid or vice versa), the validationChange event is emitted.

Usage

Without sbb-form-field:

    <input id="datepicker-input" />
    <sbb-datepicker input="datepicker-input"></sbb-datepicker>

Without sbb-form-field, with all related components:

    <sbb-datepicker-previous-day date-picker="datepicker"></sbb-datepicker-previous-day>
    <sbb-datepicker-toggle date-picker="datepicker"></sbb-datepicker-toggle>
    <input id="datepicker-input" />
    <sbb-datepicker input="datepicker-input" id="datepicker"></sbb-datepicker>
    <sbb-datepicker-next-day date-picker="datepicker"></sbb-datepicker-next-day>

With sbb-form-field, and input params set:

    <sbb-form-field>
      <input min="1600000000" max="1700000000" value="01.01.2023" readonly=""/>
      <sbb-datepicker></sbb-datepicker>
    </sbb-form-field>

With sbb-form-field and all related components, input's value set, wide set to true:

    <sbb-form-field>
      <sbb-datepicker-previous-day></sbb-datepicker-previous-day>
      <sbb-datepicker-toggle></sbb-datepicker-toggle>
      <input value="01.01.2023"/>
      <sbb-datepicker wide></sbb-datepicker>
      <sbb-datepicker-next-day></sbb-datepicker-next-day>
    </sbb-form-field>

Testing

To specify a specific date for the current datetime, you can use the data-now attribute (timestamp in milliseconds).
This is helpful if you need a specific state of the component.

Properties

Events

Methods

getValueAsDate() => Promise<Date>

Gets the input value with the correct date format.

Returns

Type: Promise<Date>

setValueAsDate(date: Date | number | string) => Promise<void>

Set the input value to the correctly formatted value.

Returns

Type: Promise<void>