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

huangapple go评论55阅读模式
英文:

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

问题

当我尝试在Svelte中使用Carbon Components的"Datepicker"时,我可以配置输出以德国本地化样式设置,但在发送表单后,日期选择器只显示"请匹配所请求的格式"。我漏掉了一些东西,但我真的不知道我漏掉了什么。

以下是我的代码:

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

错误消息的截图:
How can I create a single Datepicker in svelte with carbon-components 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>

我漏掉了什么?如何在使用德国本地化的情况下使用德国日期格式,而不会出现"请匹配所请求的格式"的错误?

英文:

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

&lt;script lang=&quot;ts&quot;&gt;
    import { DataTable, DatePicker, DatePickerInput, NumberInput, Grid, Row, Column, Button, FluidForm } from &quot;carbon-components-svelte&quot;;
    let datum: Date;
&lt;/script&gt;
&lt;Grid&gt;
    &lt;Row&gt;
        &lt;Column&gt;
            &lt;form&gt;
                &lt;DatePicker
                    format=&quot;de-CH&quot;
                    dateFormat=&quot;d.m.Y&quot;
                    locale=&quot;de&quot;
                    datePickerType=&quot;single&quot;
                    flatpickrProps={
                        { 
                            locale: 
                                {firstDayOfWeek: 1}, 
                                dateFormat: &quot;d.m.Y&quot;, 
                        }
                    }
                    on:change bind:value={datum}
                &gt;
                    &lt;DatePickerInput labelText=&quot;Datum&quot; placeholder=&quot;dd.mm.yyyy&quot; /&gt;
                &lt;/DatePicker&gt;
                &lt;Button size=&quot;small&quot; type=&quot;submit&quot;&gt;Submit&lt;/Button&gt;
            &lt;/form&gt;
        &lt;/Column&gt;
    &lt;/Row&gt;
  &lt;/Grid&gt;

Screenshot of the error message:
How can I create a single Datepicker in svelte with carbon-components with german locale

When I remove the formatting stuff, the form works and the date is getting send.
This is a example without formatting with german locale

&lt;script lang=&quot;ts&quot;&gt;
    import { DataTable, DatePicker, DatePickerInput, NumberInput, Grid, Row, Column, Button, FluidForm } from &quot;carbon-components-svelte&quot;;
    let datum: Date;
&lt;/script&gt;
&lt;Grid&gt;
    &lt;Row&gt;
        &lt;Column&gt;
            &lt;form&gt;
                &lt;DatePicker
                    datePickerType=&quot;single&quot;
                    flatpickrProps={
                        { 
                            locale: 
                                {firstDayOfWeek: 1}, 
                        }
                    }
                    on:change bind:value={datum}
                &gt;
                    &lt;DatePickerInput labelText=&quot;Datum&quot; placeholder=&quot;dd.mm.yyyy&quot; /&gt;
                &lt;/DatePicker&gt;
                &lt;Button size=&quot;small&quot; type=&quot;submit&quot;&gt;Submit&lt;/Button&gt;
            &lt;/form&gt;
        &lt;/Column&gt;
    &lt;/Row&gt;
  &lt;/Grid&gt;

What am I missing? How can I use german locale with a german date format without getting the Error "Please match the requested format."?

答案1

得分: 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 &#39;flatpickr/dist/l10n/de.js&#39;; // there also is an ESM dir
&lt;DatePicker locale={German} dateFormat=&quot;d.m.Y&quot; ...&gt;
  &lt;DatePickerInput pattern={&#39;\\d{2}\\.\\d{2}\\.\\d{4}&#39;} .../&gt;
&lt;/DatePicker&gt;

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

英文:

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 &#39;flatpickr/dist/l10n/de.js&#39;; // there also is an ESM dir
&lt;DatePicker locale={German} dateFormat=&quot;d.m.Y&quot; ...&gt;
  &lt;DatePickerInput pattern={&#39;\\d{2}\\.\\d{2}\\.\\d{4}&#39;} .../&gt;
&lt;/DatePicker&gt;

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

huangapple
  • 本文由 发表于 2023年2月16日 03:52:57
  • 转载请务必保留本文链接:https://go.coder-hub.com/75464824.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定