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

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