### Start development server

Source: https://github.com/duetds/date-picker/blob/master/README.md

Starts the development server and watch tasks, automatically opening a browser window with an example page.

```sh
npm start
```

--------------------------------

### startOfWeek usage examples

Source: https://github.com/duetds/date-picker/blob/master/_autodocs/api-reference/date-utils.md

Shows example calls to startOfWeek with default and custom firstDayOfWeek values, including expected results.

```JavaScript
startOfWeek(new Date(2020, 7, 15)) // 2020-08-10 — Monday (default)
startOfWeek(new Date(2020, 7, 15), DaysOfWeek.Sunday) // 2020-08-09
```

--------------------------------

### Install dependencies

Source: https://github.com/duetds/date-picker/blob/master/README.md

Installs the project dependencies using npm.

```sh
npm install
```

--------------------------------

### clamp usage examples

Source: https://github.com/duetds/date-picker/blob/master/_autodocs/api-reference/date-utils.md

JavaScript examples showing the return values of clamp for dates before, after, and within the given bounds. The examples assume min and max are Date instances.

```js
clamp(new Date(2019, 0, 1), min, max) // min
clamp(new Date(2021, 0, 1), min, max) // max
clamp(new Date(2020, 5, 15), min, max) // the original date instance
```

--------------------------------

### Install ember-cli-stencil and ember-auto-import

Source: https://github.com/duetds/date-picker/blob/master/README.md

Run this command to install the required Ember addons for integrating Duet Date Picker.

```shell
ember install ember-cli-stencil ember-auto-import
```

--------------------------------

### inRange usage example

Source: https://github.com/duetds/date-picker/blob/master/_autodocs/api-reference/date-utils.md

JavaScript example showing how to use inRange with various bounds. Demonstrates true/false results for dates inside and outside the range, including an unbounded max.

```js
const min = new Date(2020, 0, 1)
const max = new Date(2020, 11, 31)
inRange(new Date(2020, 5, 15), min, max) // true
inRange(new Date(2021, 0, 1), min, max)  // false
inRange(new Date(2020, 5, 15), undefined, max) // true
```

--------------------------------

### Using show() method

Source: https://github.com/duetds/date-picker/blob/master/docs/index.html

Shows the date picker programmatically when a button is clicked. The button and script are included in the example.

```html
<label for="date">Choose a date</label>
<duet-date-picker identifier="date"></duet-date-picker>
<button type="button">Show date picker</button>

<script>
  const button = document.querySelector("button")

  button.addEventListener("click", function() {
    document.querySelector("duet-date-picker").show()
  });
</script>
```

--------------------------------

### createIdentifier(prefix) usage example

Source: https://github.com/duetds/date-picker/blob/master/_autodocs/api-reference/date-utils.md

Example call to createIdentifier() with the prefix "DuetDateMonth", showing the generated identifier format.

```js
createIdentifier("DuetDateMonth") // "DuetDateMonth-7f3a9c1b-2d0e-4a5b-8c6d-e0f1a2b3c4d5"
```

--------------------------------

### Console output for duetChange event

Source: https://github.com/duetds/date-picker/blob/master/README.md

Example console output when the duetChange event fires, showing the selected date.

```Shell
selected date Sat Aug 15 2020 00:00:00 GMT+0300 (Eastern European Summer Time)
```

--------------------------------

### getViewOfMonth usage example

Source: https://github.com/duetds/date-picker/blob/master/_autodocs/api-reference/date-utils.md

JavaScript example showing that May 2020 (starting on a Friday) results in a 42-day view, with three June days spilling into the last row.

```js
// May 2020 starts on a Friday; three June days spill into the last row:
getViewOfMonth(new Date(2020, 4, 15)).length // 42
```

--------------------------------

### Using setFocus() method

Source: https://github.com/duetds/date-picker/blob/master/docs/index.html

Focuses the date picker when a button is clicked. The button and script are included in the example.

```html
<label for="date">Choose a date</label>
<duet-date-picker identifier="date"></duet-date-picker>
<button type="button">Focus date picker</button>

<script>
  const button = document.querySelector("button")

  button.addEventListener("click", function() {
    document.querySelector("duet-date-picker").setFocus()
  });
</script>
```

--------------------------------

### printISODate usage examples

Source: https://github.com/duetds/date-picker/blob/master/_autodocs/api-reference/date-utils.md

Shows expected return values for a valid Date and for null. A valid date returns a zero-padded string, while null returns an empty string.

```javascript
printISODate(new Date(2020, 7, 15)) // "2020-08-15"
printISODate(null)                  // ""
```

--------------------------------

### isEqual usage example

Source: https://github.com/duetds/date-picker/blob/master/_autodocs/api-reference/date-utils.md

Shows usage of isEqual with two date pairs. The second call demonstrates that time of day is ignored; only the calendar day matters.

```JavaScript
isEqual(new Date(2020, 0, 1), new Date(2020, 0, 1)) // true
isEqual(new Date(2020, 0, 1, 23, 59), new Date(2020, 0, 1)) // true — time of day ignored
```

--------------------------------

### chr4() usage example

Source: https://github.com/duetds/date-picker/blob/master/_autodocs/api-reference/date-utils.md

Example call to chr4() showing it returns a 4-character hex string like "c1e9".

```js
chr4() // "c1e9"
```

--------------------------------

### parseISODate usage examples

Source: https://github.com/duetds/date-picker/blob/master/_autodocs/api-reference/date-utils.md

Shows expected return values for valid and invalid inputs. Valid ISO strings return a Date object, while malformed or empty strings return undefined.

```javascript
parseISODate("2020-08-15") // Date
parseISODate("15.08.2020") // undefined
parseISODate("")           // undefined
```

--------------------------------

### startOfWeek function

Source: https://github.com/duetds/date-picker/blob/master/_autodocs/api-reference/date-utils.md

Returns the first day of the week containing the given date, with the week start configurable via firstDayOfWeek (default Monday). The time-of-day is preserved.

```TypeScript
export function startOfWeek(date: Date, firstDayOfWeek: DaysOfWeek = DaysOfWeek.Monday): Date {
  var d = new Date(date)
  var day = d.getDay()
  var diff = (day < firstDayOfWeek ? 7 : 0) + day - firstDayOfWeek

  d.setDate(d.getDate() - diff)
  return d
}
```

--------------------------------

### Ember Octane template example

Source: https://github.com/duetds/date-picker/blob/master/README.md

Use this HTML template to render the date picker with a label and pass the localization property.

```html
<label  for="date">Choose a date.</label>
<duet-date-picker identifier="date" {{prop localization=this.localization}} ></duet-date-picker>
```

--------------------------------

### Finnish localization example for duet-date-picker

Source: https://github.com/duetds/date-picker/blob/master/README.md

Use this snippet to configure the Duet Date Picker with Finnish date format and localization. It sets a custom dateAdapter to parse and format dates in the dd.mm.yyyy format and provides a full localization object with Finnish labels and month/day names. Note that you must provide all localization properties when overriding.

```html
<label for="date">Valitse päivämäärä</label>
<duet-date-picker identifier="date"></duet-date-picker>

<script>
  const picker = document.querySelector("duet-date-picker")
  const DATE_FORMAT = /^(\d{1,2})\.(\d{1,2})\.(\d{4})$/

  picker.dateAdapter = {
    parse(value = "", createDate) {
      const matches = value.match(DATE_FORMAT)

      if (matches) {
        return createDate(matches[3], matches[2], matches[1])
      }
    },
    format(date) {
      return `${date.getDate()}.${date.getMonth() + 1}.${date.getFullYear()}`
    },
  }

  picker.localization = {
    buttonLabel: "Valitse päivämäärä",
    placeholder: "pp.kk.vvvv",
    selectedDateMessage: "Valittu päivämäärä on",
    prevMonthLabel: "Edellinen kuukausi",
    nextMonthLabel: "Seuraava kuukausi",
    monthSelectLabel: "Kuukausi",
    yearSelectLabel: "Vuosi",
    closeLabel: "Sulje ikkuna",
    calendarHeading: "Valitse päivämäärä",
    dayNames: [
      "Sunnuntai", "Maanantai", "Tiistai", "Keskiviikko",
      "Torstai", "Perjantai", "Lauantai"
    ],
    monthNames: [
      "Tammikuu", "Helmikuu", "Maaliskuu", "Huhtikuu",
      "Toukokuu", "Kesäkuu", "Heinäkuu", "Elokuu",
      "Syyskuu", "Lokakuu", "Marraskuu", "Joulukuu"
    ],
    monthNamesShort: [
      "Tammi", "Helmi", "Maalis", "Huhti", "Touko", "Kesä",
      "Heinä", "Elo", "Syys", "Loka", "Marras", "Joulu"
    ],
    locale: "fi-FI",
  }
</script>
```

--------------------------------

### Ember Octane controller example

Source: https://github.com/duetds/date-picker/blob/master/README.md

This controller defines the localization object with all the necessary labels and names for the date picker.

```js
import Controller from "@ember/controller";
import { action } from "@ember/object";
import { tracked } from "@glimmer/tracking";

export default class ExampleController extends Controller {
  @tracked localization = {
    buttonLabel: "Choose date",
    placeholder: "mm/dd/yyyy",
    selectedDateMessage: "Selected date is",
    prevMonthLabel: "Previous month",
    nextMonthLabel: "Next month",
    monthSelectLabel: "Month",
    yearSelectLabel: "Year",
    closeLabel: "Close window",
    calendarHeading: "Choose a date",
    dayNames: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
    monthNames: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
    monthNamesShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
  };
}
```

--------------------------------

### createDate usage examples (JavaScript)

Source: https://github.com/duetds/date-picker/blob/master/_autodocs/api-reference/date-utils.md

Shows how to use createDate with leap year and non-existent date. The function returns undefined for invalid dates, but also note range check passes for 2019-02-29, so verification is needed.

```javascript
import { createDate } from "@duetds/date-picker/dist/components/duet-date-picker/date-utils"

createDate("2020", "2", "29") // 2020-02-29 (leap year)
createDate("2019", "2", "29") // undefined (2019-02-29 does not exist; range check passes, Date rolls over — verify explicitly if needed)
```

--------------------------------

### Build the project

Source: https://github.com/duetds/date-picker/blob/master/README.md

Builds the project for production.

```sh
npm run build
```

--------------------------------

### isDateDisabled

Source: https://github.com/duetds/date-picker/blob/master/_autodocs/api-reference/duet-date-picker.md

Controls which days are disabled and therefore disallowed. For example, can be used to disallow selection of weekends.

```APIDOC
## Property: isDateDisabled

### Description
Controls which days are disabled and therefore disallowed. For example, can be used to disallow selection of weekends.

### Type
`DateDisabledPredicate`

### Required
No

### Default
`() => false`

### Usage
```ts
@Prop() isDateDisabled: DateDisabledPredicate = () => false
```

### Parameters
- **isDateDisabled** (DateDisabledPredicate) - Optional - Controls which days are disabled and therefore disallowed. For example, this can be used to disallow selection of weekends.

### Behavior
`DateDisabledPredicate = (date: Date) => boolean`. Checked in `handleDaySelect`: selecting a disallowed day does not change the value but does move the focused day to it. Disabled days remain focusable (no `disabled` attribute — only `aria-disabled`) but cannot be activated.
```

--------------------------------

### Tag a beta release

Source: https://github.com/duetds/date-picker/blob/master/README.md

Creates an annotated tag for a beta release.

```sh
git tag -a 1.2.0-beta.0 -m "1.2.0-beta.0"
```

--------------------------------

### Clone the repository

Source: https://github.com/duetds/date-picker/blob/master/README.md

Clones the duet-date-picker repository from GitHub.

```sh
git clone git@github.com:duetds/duet-date-picker.git
```

--------------------------------

### Run tests

Source: https://github.com/duetds/date-picker/blob/master/README.md

Runs unit, end-to-end, and visual diff tests.

```sh
npm run test
```

--------------------------------

### Publish beta release to npm

Source: https://github.com/duetds/date-picker/blob/master/README.md

Publishes the package to npm with the beta tag.

```sh
npm publish --tag beta
```

--------------------------------

### Import default theme from CDN

Source: https://github.com/duetds/date-picker/blob/master/README.md

Link to the default theme CSS file from JSDelivr CDN. This is the default theme that can be customized.

```HTML
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@duetds/date-picker@1.4.0/dist/duet/themes/default.css" />
```

--------------------------------

### Register component with polyfills for IE11/Edge

Source: https://github.com/duetds/date-picker/blob/master/_autodocs/api-reference/entry-points.md

Use the lib/loader bundle to apply polyfills for IE11 and Edge 17-18 before registering the component.

```javascript
import { applyPolyfills, defineCustomElements } from "@duetds/date-picker/lib/loader"
applyPolyfills().then(() => {
  defineCustomElements(window)
})
```

--------------------------------

### Getting selected value with duetChange event

Source: https://github.com/duetds/date-picker/blob/master/src/index.html

Listens for the 'duetChange' event on the date picker and updates an output element with the selected date. The event detail contains 'valueAsDate'.

```html
<label for="date">Choose a date</label>
<duet-date-picker identifier="date"></duet-date-picker>
<output>undefined</output>

<script>
  const picker = document.querySelector("duet-date-picker")
  const output = document.querySelector("output")

  picker.addEventListener("duetChange", function(event) {
    output.innerHTML = event.detail.valueAsDate
  });
</script>
```

--------------------------------

### Listen for duetChange event

Source: https://github.com/duetds/date-picker/blob/master/README.md

Add an event listener for the custom duetChange event to get the selected date. The event's detail object contains valueAsDate with the selected date.

```JavaScript
// Select the date picker component
const date = document.querySelector("duet-date-picker")

// Listen for when date is selected
date.addEventListener("duetChange", function(e) {
  console.log("selected date", e.detail.valueAsDate)
})
```

--------------------------------

### Import hydrate from @duetds/date-picker/hydrate

Source: https://github.com/duetds/date-picker/blob/master/_autodocs/api-reference/entry-points.md

Default import of the hydrate helper for server-side rendering. Use this to access the renderToString function.

```javascript
import hydrate from "@duetds/date-picker/hydrate"
```

--------------------------------

### Preload Duet Date Picker scripts from CDN

Source: https://github.com/duetds/date-picker/blob/master/README.md

Add these link tags in the <head> before other script or link tags to preload the main ESM and entry scripts from JSDelivr.

```html
<link rel="preload" href="https://cdn.jsdelivr.net/npm/@duetds/date-picker@1.4.0/dist/duet/duet.esm.js" as="script" crossorigin="anonymous" />
<link rel="preload" href="https://cdn.jsdelivr.net/npm/@duetds/date-picker@1.4.0/dist/duet/duet-date-picker.entry.js" as="script" crossorigin="anonymous" />
```

--------------------------------

### Disable selectable days example

Source: https://github.com/duetds/date-picker/blob/master/src/index.html

Shows how to disable weekend dates in the Duet Date Picker. The isDateDisabled property is set to a function that returns true for Saturdays and Sundays, and the duetChange event alerts the user if a weekend is selected.

```html
<label for="date">Choose a date</label>
<duet-date-picker identifier="date"></duet-date-picker>

<script>
  function isWeekend(date) {
    return date.getDay() === 0 || date.getDay() === 6
  }

  const pickerDisableWeekend = document.querySelector(".picker-disabled-weekend")
  pickerDisableWeekend.isDateDisabled = isWeekend

  pickerDisableWeekend.addEventListener("duetChange", function(e) {
    if (isWeekend(e.detail.valueAsDate)) {
      alert("Please select a weekday")
    }
  })
</script>
```

--------------------------------

### getViewOfMonth function implementation

Source: https://github.com/duetds/date-picker/blob/master/_autodocs/api-reference/date-utils.md

TypeScript implementation of getViewOfMonth. It returns an array of dates from the first day of the week of the month's start to the last day of the week of the month's end, resulting in 28, 35, or 42 entries. The firstDayOfWeek parameter defaults to DaysOfWeek.Monday.

```ts
/**
 * given a date, return an array of dates from a calendar perspective
 * @param date
 * @param firstDayOfWeek
 */
export function getViewOfMonth(date: Date, firstDayOfWeek: DaysOfWeek = DaysOfWeek.Monday): Date[] {
  const start = startOfWeek(startOfMonth(date), firstDayOfWeek)
  const end = endOfWeek(endOfMonth(date), firstDayOfWeek)

  return getDaysInRange(start, end)
}
```

--------------------------------

### startOfWeek(date, firstDayOfWeek)

Source: https://github.com/duetds/date-picker/blob/master/_autodocs/api-reference/date-utils.md

Returns the first day of the week containing the given date, based on the specified first day of the week. The original date is not mutated.

```APIDOC
## startOfWeek(date, firstDayOfWeek)

### Description
Returns the first day of the week containing the given date, based on the specified first day of the week. The original date is not mutated.

### Method
startOfWeek

### Parameters
- **date** (Date) - Required - Reference date.
- **firstDayOfWeek** (DaysOfWeek) - Optional - The day treated as week start. Default: `DaysOfWeek.Monday`.

### Returns
- **Date** - The first day of the week containing `date` (time-of-day preserved).

### Examples
```js
startOfWeek(new Date(2020, 7, 15)) // 2020-08-10 — Monday (default)
startOfWeek(new Date(2020, 7, 15), DaysOfWeek.Sunday) // 2020-08-09
```
```

--------------------------------

### Use hydrate.renderToString to pre-render HTML

Source: https://github.com/duetds/date-picker/blob/master/_autodocs/api-reference/entry-points.md

Calls hydrate.renderToString with content and options to generate static HTML and CSS. The result is available in results.html. One pre-render pass is needed per supported theme.

```javascript
const results = await hydrate.renderToString(content, {
  clientHydrateAnnotations: true,
  removeScripts: false,
  removeUnusedStyles: false,
})
// results.html — static HTML + CSS for the given theme
```

--------------------------------

### Preload Duet Date Picker theme CSS from CDN

Source: https://github.com/duetds/date-picker/blob/master/README.md

Use this tag to preload a theme stylesheet (e.g., default.css) the same way as the scripts.

```html
<link rel="preload" href="https://cdn.jsdelivr.net/npm/@duetds/date-picker@1.4.0/dist/duet/themes/default.css" as="style" />
```

--------------------------------

### duetOpen

Source: https://github.com/duetds/date-picker/blob/master/_autodocs/api-reference/duet-date-picker.md

Emitted when the calendar modal is opened. The payload contains only the component name.

```APIDOC
## duetOpen

### Description
Emitted when the calendar modal is opened — from `show()`.

### Event Type
`CustomEvent<DuetDatePickerOpenEvent>`

### Payload
- **component** (string) - Always `"duet-date-picker"`.

### Example
```js
picker.addEventListener("duetOpen", (e) => {
  console.log(e.detail.component) // "duet-date-picker"
})
```
```

--------------------------------

### dateAdapter

Source: https://github.com/duetds/date-picker/blob/master/_autodocs/api-reference/duet-date-picker.md

Custom date adapter for parsing and formatting dates. Must be an object with parse and format functions. Default is ISO-8601 parsing and formatting.

```APIDOC
## Property: dateAdapter

### Description
Custom date adapter for parsing and formatting dates. Must be an object with a `parse` function which accepts a `string` and returns a `Date`, and a `format` function which accepts a `Date` and returns a `string`. Default is ISO-8601 parsing and formatting.

### Type
`DuetDateAdapter`

### Required
No

### Default
`isoAdapter`

### Usage
```ts
@Prop() dateAdapter: DuetDateAdapter = isoAdapter
```

### Parameters
- **dateAdapter** (DuetDateAdapter) - Optional - Date adapter, for custom parsing/formatting. Must be object with a `parse` function which accepts a `string` and returns a `Date`, and a `format` function which accepts a `Date` and returns a `string`. Default is ISO-8601 parsing and formatting.

### Behavior
The adapter's `parse` is called in `handleInputChange` for every user keystroke; `format` is called in `render()` to produce the display text.
```

--------------------------------

### custom-element — Single-File Bundle

Source: https://github.com/duetds/date-picker/blob/master/_autodocs/api-reference/entry-points.md

Provides a polyfill-free single-file bundle exposing the DuetDatePicker class for manual registration. Does not auto-register or apply polyfills.

```APIDOC
## custom-element — Single-File Bundle

### Description
Provides a polyfill-free single-file bundle exposing the `DuetDatePicker` class for manual registration. Unlike the loader bundles, this does not auto-register the element or apply polyfills.

### Usage
Import the `DuetDatePicker` class and register it manually:

```jsx
import { DuetDatePicker } from "@duetds/date-picker/custom-element"

customElements.define("duet-date-picker", DuetDatePicker)
```
```

--------------------------------

### Using the DatePicker wrapper component

Source: https://github.com/duetds/date-picker/blob/master/README.md

Use the wrapper like any other React component. The onChange handler receives the event and can access the detail via e.detail. Remember to import duet.css separately for the default theme.

```js
<DatePicker
  value="2020-08-24"
  onChange={e => console.log(e.detail)}
/>
```

--------------------------------

### Register Duet Date Picker with defineCustomElements

Source: https://github.com/duetds/date-picker/blob/master/README.md

Call defineCustomElements(window) from index.js to register the custom elements. Import the loader from @duetds/date-picker/dist/loader.

```js
// Import Duet Date Picker
import { defineCustomElements } from "@duetds/date-picker/dist/loader";

// ...
// Register Duet Date Picker
defineCustomElements(window);
```

--------------------------------

### Publish a new minor version

Source: https://github.com/duetds/date-picker/blob/master/README.md

Publishes a new stable minor version. This command runs tests, builds, bumps the minor version, commits and tags, publishes to npm, and pushes commits.

```sh
npm version minor
```

--------------------------------

### dateAdapter and localization Properties

Source: https://github.com/duetds/date-picker/blob/master/src/index.html

Customize date parsing/formatting and UI text for localization by setting the 'dateAdapter' and 'localization' properties on the picker element.

```APIDOC
## dateAdapter and localization Properties

### Description
Allows customization of date parsing/formatting and UI text for localization. Set these properties on the picker element.

### Properties
- **dateAdapter** (object) - An object with `parse` and `format` functions to handle date conversion.
  - **parse(value, createDate)** (function) - Parses a string value and returns a Date object using `createDate(year, month, day)`.
  - **format(date)** (function) - Formats a Date object into a string.
- **localization** (object) - An object containing localized strings for UI elements.
  - **buttonLabel** (string) - Label for the calendar button.
  - **placeholder** (string) - Placeholder text for the input.
  - **selectedDateMessage** (string) - Message for selected date.
  - **prevMonthLabel** (string) - Label for previous month button.
  - **nextMonthLabel** (string) - Label for next month button.
  - **monthSelectLabel** (string) - Label for month select.
  - **yearSelectLabel** (string) - Label for year select.
  - **closeLabel** (string) - Label for close button.
  - **calendarHeading** (string) - Heading for the calendar.
  - **dayNames** (array) - Array of full day names.
  - **monthNames** (array) - Array of full month names.
  - **monthNamesShort** (array) - Array of short month names.
  - **locale** (string) - BCP 47 language tag (e.g., "fi-FI").

### Example
```html
<label for="date">Valitse päivämäärä</label>
<duet-date-picker identifier="date"></duet-date-picker>

<script>
  const picker = document.querySelector("duet-date-picker")
  const DATE_FORMAT = /^(\d{1,2})\.(\d{1,2})\.(\d{4})$/

  picker.dateAdapter = {
    parse(value = "", createDate) {
      const matches = value.match(DATE_FORMAT)
      if (matches) {
        return createDate(matches[3], matches[2], matches[1])
      }
    },
    format(date) {
      return `${date.getDate()}.${date.getMonth() + 1}.${date.getFullYear()}`
    },
  }

  picker.localization = {
    buttonLabel: "Valitse päivämäärä",
    placeholder: "pp.kk.vvvv",
    selectedDateMessage: "Valittu päivämäärä on",
    prevMonthLabel: "Edellinen kuukausi",
    nextMonthLabel: "Seuraava kuukausi",
    monthSelectLabel: "Kuukausi",
    yearSelectLabel: "Vuosi",
    closeLabel: "Sulje ikkuna",
    calendarHeading: "Valitse päivämäärä",
    dayNames: ["Sunnuntai", "Maanantai", "Tiistai", "Keskiviikko", "Torstai", "Perjantai", "Lauantai"],
    monthNames: ["Tammikuu", "Helmikuu", "Maaliskuu", "Huhtikuu", "Toukokuu", "Kesäkuu", "Heinäkuu", "Elokuu", "Syyskuu", "Lokakuu", "Marraskuu", "Joulukuu"],
    monthNamesShort: ["Tammi", "Helmi", "Maalis", "Huhti", "Touko", "Kesä", "Heinä", "Elo", "Syys", "Loka", "Marras", "Joulu"],
    locale: "fi-FI",
  }
</script>
```
```

--------------------------------

### localization

Source: https://github.com/duetds/date-picker/blob/master/_autodocs/api-reference/duet-date-picker.md

Provides localized text for button labels, day names, month names, etc. Must be assigned as a property (not an attribute). Changing it re-runs date formatters.

```APIDOC
## Property: localization

### Description
Provides localized text for button labels, day names, month names, etc. Must be assigned as a property (not an attribute). Changing it re-runs `createDateFormatters()` which rebuilds the `Intl.DateTimeFormat` instances.

### Type
`DuetLocalizedText`

### Required
No

### Default
`defaultLocalization`

### Usage
```ts
@Prop() localization: DuetLocalizedText = defaultLocalization
```

### Parameters
- **localization** (DuetLocalizedText) - Optional - Button labels, day names, month names, etc, used for localization. Default is English.

### Behavior
Must be assigned as a property (not an attribute) — e.g. `picker.localization = {...}` in JS, or `:localization.prop` in Vue. Changing it re-runs `createDateFormatters()` which rebuilds the `Intl.DateTimeFormat` instances (short: `{ day: "numeric", month: "long" }`; long: `{ day: "numeric", month: "long", year: "numeric" }`).
```

--------------------------------

### DuetDateAdapter

Source: https://github.com/duetds/date-picker/blob/master/_autodocs/types.md

Interface for custom date parsing and formatting.

```APIDOC
## DuetDateAdapter

### Description
Interface for custom date parsing and formatting.

### Fields
- **parse** (`DuetDateParser`) - Required - Parses the raw input string into a `Date`.
- **format** (`DuetDateFormatter`) - Required - Formats a `Date` into the display string shown in the input.

### Default Implementation
The default implementation is the `isoAdapter` (ISO-8601 parse/format).

### Usage
Used by the `DuetDatePicker.dateAdapter` prop (default `isoAdapter`).
```

--------------------------------

### getViewOfMonth(date, firstDayOfWeek)

Source: https://github.com/duetds/date-picker/blob/master/_autodocs/api-reference/date-utils.md

Given a date, returns an array of dates from a calendar perspective, covering the full grid of the month view.

```APIDOC
## `getViewOfMonth(date, firstDayOfWeek)`

### Description
Given a date, return an array of dates from a calendar perspective.

### Parameters
- **date** (Date) - Required - Any date in the month to render.
- **firstDayOfWeek** (DaysOfWeek) - Optional - Week start. Default: `DaysOfWeek.Monday`.

### Returns
- **Date[]** - A contiguous, inclusive array of dates from the first displayed grid cell (week start of the month's first day) through the last (week end of the month's last day), i.e. exactly 28, 35, or 42 entries (4–6 weeks).

### Example
```js
// May 2020 starts on a Friday; three June days spill into the last row:
getViewOfMonth(new Date(2020, 4, 15)).length // 42
```
```

--------------------------------

### Component Properties

Source: https://github.com/duetds/date-picker/blob/master/_autodocs/configuration.md

Lists all configurable properties of the <duet-date-picker> element, including name, identifier, disabled, role, direction, required, value, min, max, firstDayOfWeek, localization, dateAdapter, and isDateDisabled.

```APIDOC
## Component Properties

### Description
These are the configurable properties of the `<duet-date-picker>` custom element. They control the input's behavior, appearance, and localization.

### Properties

#### `name`
- **Type**: `string`
- **Default**: `"date"`
- **Required**: No
- **Description**: Name of the date picker input.

#### `identifier`
- **Type**: `string`
- **Default**: `""`
- **Required**: No
- **Description**: Unique identifier for the date picker input; use this instead of the HTML `id` attribute.

#### `disabled`
- **Type**: `boolean`
- **Default**: `false`
- **Required**: No
- **Description**: Makes the input component disabled, preventing interaction and conveying the inactive state to assistive technologies. Reflected to the attribute.

#### `role`
- **Type**: `string`
- **Default**: `undefined`
- **Required**: No
- **Description**: Specific `role` attribute for the date picker input.

#### `direction`
- **Type**: `DuetDatePickerDirection` (`"left" | "right"`)
- **Default**: `"right"`
- **Required**: No
- **Description**: Forces the opening direction of the calendar modal to always be left or right. Useful when the input is smaller than the opening date picker.

#### `required`
- **Type**: `boolean`
- **Default**: `false`
- **Required**: No
- **Description**: Marks the input as required.

#### `value`
- **Type**: `string`
- **Default**: `""`
- **Required**: No
- **Description**: Date value, ISO-8601 format `YYYY-MM-DD`. Mutable and reflected.

#### `min`
- **Type**: `string`
- **Default**: `""`
- **Required**: No
- **Description**: Minimum date allowed to be picked, ISO-8601 `YYYY-MM-DD`. Can be used alone or with `max`.

#### `max`
- **Type**: `string`
- **Default**: `""`
- **Required**: No
- **Description**: Maximum date allowed to be picked, ISO-8601 `YYYY-MM-DD`. Can be used alone or with `min`.

#### `firstDayOfWeek`
- **Type**: `DaysOfWeek`
- **Default**: `DaysOfWeek.Monday`
- **Required**: No
- **Description**: Which day is considered first day of the week (`0` for Sunday, `1` for Monday, etc.).

#### `localization`
- **Type**: `DuetLocalizedText`
- **Default**: `defaultLocalization`
- **Required**: No
- **Description**: Button labels, day names, month names, etc. Default is English (`locale: "en-GB"`). Must be set as an element property (not an HTML attribute).

#### `dateAdapter`
- **Type**: `DuetDateAdapter`
- **Default**: `isoAdapter`
- **Required**: No
- **Description**: Custom parsing/formatting. Must be an object with a `parse` function and a `format` function. Default is ISO-8601 parsing and formatting. Must be set as an element property (not an HTML attribute).

#### `isDateDisabled`
- **Type**: `DateDisabledPredicate`
- **Default**: `() => false`
- **Required**: No
- **Description**: Controls which days are disabled and therefore disallowed (e.g. weekends). Must be set as an element property (not an HTML attribute).

### Notes
- `value`, `min`, and `max` are parsed on every render via `parseISODate`; unparseable or empty strings are treated as "not set" (`undefined`), which the internal range helpers treat as unbounded.
- Object/function props (`localization`, `dateAdapter`, `isDateDisabled`) cannot be set as HTML attributes; they must be assigned as element properties in JavaScript (or with framework bindings such as `:localization.prop` in Vue).
- The `min`/`max` range gates both the grid rendering (out-of-range days get the `is-outside` class and are unfocusable) and selection in `handleDaySelect`. `isDateDisabled` disables days visually and blocks selection but does not affect the `min`/`max` grid rendering.
- Changing `localization` triggers `@Watch("localization") createDateFormatters()`, rebuilding the `Intl.DateTimeFormat` instances used for screen-reader date text.
```

--------------------------------

### HTML / CDN Loader Scripts

Source: https://github.com/duetds/date-picker/blob/master/_autodocs/api-reference/entry-points.md

Loads the Duet Date Picker via CDN script tags, auto-defining the custom element. Includes optional default theme CSS.

```APIDOC
## HTML / CDN Loader Scripts

### Description
Loads the Duet Date Picker component via CDN script tags. Including the scripts auto-defines the `<duet-date-picker>` custom element. The CSS import is optional and only needed for the default theme.

### Usage
Include the following script and link tags in your HTML:

```html
<script type="module" src="https://cdn.jsdelivdelivr.net/npm/@duetds/date-picker@1.4.0/dist/duet/duet.esm.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/@duetds/date-picker@1.4.0/dist/duet/duet.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@duetds/date-picker@1.4.0/dist/duet/themes/default.css" />
```

### Notes
- The scripts auto-define the `<duet-date-picker>` custom element.
- The CSS import is optional and only needed for the default theme.
```

--------------------------------

### CSS custom properties for theming

Source: https://github.com/duetds/date-picker/blob/master/hydrate/tests/fixtures/kitchen-sink.html

Defines the default theme colors, fonts, and layout for the Duet Date Picker. Override these variables to customize the appearance.

```css
:root {
  --duet-color-primary: #005fcc;
  --duet-color-text: #333;
  --duet-color-text-active: #fff;
  --duet-color-placeholder: #666;
  --duet-color-button: #f5f5f5;
  --duet-color-surface: #fff;
  --duet-color-overlay: rgba(0, 0, 0, 0.8);
  --duet-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --duet-font-normal: 400;
  --duet-font-bold: 600;
  --duet-radius: 4px;
  --duet-z-index: 600;
}
```

```css
body {
  font-weight: var(--duet-font-normal);
  font-family: var(--duet-font);
  color: var(--duet-color-text);
  background: var(--duet-color-surface);
  line-height: 1.5;
  margin: 0 auto;
  max-width: 40rem;
  font-size: 100%;
  padding: 2rem;
}
```

```css
label {
  margin: 0.6rem 0;
  display: block;
}
```

--------------------------------

### duetFocus

Source: https://github.com/duetds/date-picker/blob/master/_autodocs/api-reference/duet-date-picker.md

Emitted when the date picker input is focused. The payload contains only the component name.

```APIDOC
## duetFocus

### Description
Emitted when the date picker input is focused (from `handleFocus`).

### Event Type
`CustomEvent<DuetDatePickerFocusEvent>`

### Payload
- **component** (string) - Always `"duet-date-picker"`.

### Example
```js
picker.addEventListener("duetFocus", (e) => {
  console.log(e.detail.component) // "duet-date-picker"
})
```
```

--------------------------------

### Register Duet Date Picker in main.ts

Source: https://github.com/duetds/date-picker/blob/master/README.md

Call defineCustomElements(window) once during application bootstrapping to register the custom element in the browser.

```js
// Import Duet Date Picker
import { defineCustomElements } from "@duetds/date-picker/dist/loader";
// ...
// Register Duet Date Picker
defineCustomElements(window);
```

--------------------------------

### Listen to duetChange event

Source: https://github.com/duetds/date-picker/blob/master/_autodocs/api-reference/duet-date-picker.md

Shows how to listen for the duetChange event on a duet-date-picker element. The event detail contains value (ISO-8601 string) and valueAsDate (Date object).

```js
const picker = document.querySelector("duet-date-picker")
picker.addEventListener("duetChange", (e) => {
  console.log(e.detail.value)        // "2020-08-15"
  console.log(e.detail.valueAsDate)  // Date object
})
```

--------------------------------

### Load Duet Date Picker via CDN

Source: https://github.com/duetds/date-picker/blob/master/_autodocs/api-reference/entry-points.md

Load the Duet Date Picker via CDN. The scripts auto-define the <duet-date-picker> custom element (namespace duet). The CSS import is optional and only needed for the default theme.

```html
<script type="module" src="https://cdn.jsdelivr.net/npm/@duetds/date-picker@1.4.0/dist/duet/duet.esm.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/@duetds/date-picker@1.4.0/dist/duet/duet.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@duetds/date-picker@1.4.0/dist/duet/themes/default.css" />
```

--------------------------------

### Register component with defineCustomElements

Source: https://github.com/duetds/date-picker/blob/master/_autodocs/api-reference/entry-points.md

Register the component programmatically for framework integrations (Angular, Vue, React) using the dist/loader bundle.

```javascript
import { defineCustomElements } from "@duetds/date-picker/dist/loader"
defineCustomElements(window)
```

--------------------------------

### dateAdapter property

Source: https://github.com/duetds/date-picker/blob/master/_autodocs/api-reference/duet-date-picker.md

Custom date adapter for parsing and formatting. Must provide a parse function (string to Date) and a format function (Date to string); defaults to ISO-8601. parse is called on every keystroke in handleInputChange, and format is used in render() for display text.

```ts
@Prop() dateAdapter: DuetDateAdapter = isoAdapter
```

--------------------------------

### React wrapper component for Duet Date Picker

Source: https://github.com/duetds/date-picker/blob/master/README.md

A thin React wrapper that listens for duet events (duetChange, duetFocus, etc.) and syncs localization and dateAdapter properties. Use it to integrate the web component with React's event system.

```js
import React, { useEffect, useRef } from "react";

function useListener(ref, eventName, handler) {
  useEffect(() => {
    if (ref.current) {
      const element = ref.current;
      element.addEventListener(eventName, handler)
      return () => element.removeEventListener(eventName, handler)
    }
  }, [eventName, handler, ref])
}

export function DatePicker({
  onChange,
  onFocus,
  onBlur,
  onOpen,
  onClose,
  dateAdapter,
  localization,
  ...props
}) {
  const ref = useRef(null)

  useListener(ref, "duetChange", onChange)
  useListener(ref, "duetFocus", onFocus)
  useListener(ref, "duetBlur", onBlur)
  useListener(ref, "duetOpen", onOpen)
  useListener(ref, "duetClose", onClose)

  useEffect(() => {
    ref.current.localization = localization
    ref.current.dateAdapter = dateAdapter
  }, [localization, dateAdapter])

  return <duet-date-picker ref={ref} {...props}></duet-date-picker>
}
```

--------------------------------

### Finnish date adapter and localization

Source: https://github.com/duetds/date-picker/blob/master/hydrate/tests/fixtures/kitchen-sink.html

Configures the date picker for Finnish locale with a custom date adapter for dd.mm.yyyy format and Finnish localization strings.

```javascript
var pickerFinnish = document.querySelector(".picker-fi")
var DATE_FORMAT = /^(\d{1,2})\.(\d{1,2})\.(\d{4})$/

pickerFinnish.dateAdapter = {
  parse: function parse() {
    var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : ""
    var createDate = arguments.length > 1 ? arguments[1] : undefined
    var matches = value.match(DATE_FORMAT)
    if (matches) {
      return createDate(matches[3], matches[2], matches[1])
    }
  },
  format: function format(date) {
    return ""
      .concat(date.getDate(), ".")
      .concat(date.getMonth() + 1, ".")
      .concat(date.getFullYear())
  },
}

pickerFinnish.localization = {
  buttonLabel: "Valitse päivämäärä",
  placeholder: "pp.kk.vvvv",
  selectedDateMessage: "Valittu päivämäärä on",
  prevMonthLabel: "Edellinen kuukausi",
  nextMonthLabel: "Seuraava kuukausi",
  monthSelectLabel: "Kuukausi",
  yearSelectLabel: "Vuosi",
  closeLabel: "Sulje ikkuna",
  keyboardInstruction: "Voit navigoida päivämääriä nuolinäppäimillä",
  calendarHeading: "Valitse päivämäärä",
  dayNames: ["Sunnuntai", "Maanantai", "Tiistai", "Keskiviikko", "Torstai", "Perjantai", "Lauantai"],
  monthNames: [
    "Tammikuu",
    "Helmikuu",
    "Maaliskuu",
    "Huhtikuu",
    "Toukokuu",
    "Kesäkuu",
    "Heinäkuu",
    "Elokuu",
    "Syyskuu",
    "Lokakuu",
    "Marraskuu",
    "Joulukuu",
  ],
  monthNamesShort: [
    "Tammi",
    "Helmi",
    "Maalis",
    "Huhti",
    "Touko",
    "Kesä",
    "Heinä",
    "Elo",
    "Syys",
    "Loka",
    "Marras",
    "Joulu",
  ],
}
```

--------------------------------

### Import DuetDatePicker from custom-element bundle

Source: https://github.com/duetds/date-picker/blob/master/README.md

Use this import to load the single file bundle without polyfills. The custom element is not automatically defined, so you must call customElements.define yourself.

```jsx
import { DuetDatePicker } from "@duetds/date-picker/custom-element";

customElements.define("duet-date-picker", DuetDatePicker);
```