How can I create a single Datepicker in svelte with carbon-components with german locale - datepicker

Question

When I try to use the "Datepicker" in svelte with carbon-components I can configure the output to be set in a german locale style but after sending the form, the datepicker only shows "Please match the requested format." I am missing something but I really don`t now what I am missing.
Here is my code
<script lang="ts">
import { DataTable, DatePicker, DatePickerInput, NumberInput, Grid, Row, Column, Button, FluidForm } from "carbon-components-svelte";
let datum: Date;
</script>
<Grid>
<Row>
<Column>
<form>
<DatePicker
format="de-CH"
dateFormat="d.m.Y"
locale="de"
datePickerType="single"
flatpickrProps={
{
locale:
{firstDayOfWeek: 1},
dateFormat: "d.m.Y",
}
}
on:change bind:value={datum}
>
<DatePickerInput labelText="Datum" placeholder="dd.mm.yyyy" />
</DatePicker>
<Button size="small" type="submit">Submit</Button>
</form>
</Column>
</Row>
</Grid>
Screenshot of the error message:
When I remove the formatting stuff, the form works and the date is getting send.
This is a example without formatting with german locale
<script lang="ts">
import { DataTable, DatePicker, DatePickerInput, NumberInput, Grid, Row, Column, Button, FluidForm } from "carbon-components-svelte";
let datum: Date;
</script>
<Grid>
<Row>
<Column>
<form>
<DatePicker
datePickerType="single"
flatpickrProps={
{
locale:
{firstDayOfWeek: 1},
}
}
on:change bind:value={datum}
>
<DatePickerInput labelText="Datum" placeholder="dd.mm.yyyy" />
</DatePicker>
<Button size="small" type="submit">Submit</Button>
</form>
</Column>
</Row>
</Grid>
What am I missing? How can I use german locale with a german date format without getting the Error "Please match the requested format."?

Answer 1

These locale settings consist of various direct props that should be set:
DatePicker: locale & dateFormat
DatePickerInput: pattern
The flatpickr package also provides a large set of locales, I would recommend passing the German one directly to get day and month names.
import { German } from 'flatpickr/dist/l10n/de.js'; // there also is an ESM dir
<DatePicker locale={German} dateFormat="d.m.Y" ...>
<DatePickerInput pattern={'\\d{2}\\.\\d{2}\\.\\d{4}'} .../>
</DatePicker>
REPL
The pattern determines the regular expression used to check the value, so that has to match the input/dateFormat. (Pattern is passed in a string because of the curly braces within, which would cause Svelte to interpolate the number literals otherwise.)