mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-14 18:01:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

fix(date-picker): type locale prop using flatpickr types (#906)

Browse source 
Fixes #855
This commit is contained in:
Eric Liu 2021-11-12 14:36:46 -08:00 • committed by GitHub
commit a308c89e42
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 25 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

28
COMPONENT_INDEX.md
View file

@ -1051,20 +1051,20 @@ None.
### Props ### Props
| Prop name | Kind | Reactive | Type | Default value | Description | | Prop name | Kind | Reactive | Type | Default value | Description |
| :------------- | :--------------- | :------- | :---------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------- | | :------------- | :--------------- | :------- | :--------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------- |
| valueTo | <code>let</code> | Yes | <code>string</code> | <code>""</code> | Specify the date picker end date value (to)<br />Only works with the "range" date picker type | | valueTo | <code>let</code> | Yes | <code>string</code> | <code>""</code> | Specify the date picker end date value (to)<br />Only works with the "range" date picker type |
| valueFrom | <code>let</code> | Yes | <code>string</code> | <code>""</code> | Specify the date picker start date value (from)<br />Only works with the "range" date picker type | | valueFrom | <code>let</code> | Yes | <code>string</code> | <code>""</code> | Specify the date picker start date value (from)<br />Only works with the "range" date picker type |
| value | <code>let</code> | Yes | <code>number &#124; string</code> | <code>""</code> | Specify the date picker input value | | value | <code>let</code> | Yes | <code>number &#124; string</code> | <code>""</code> | Specify the date picker input value |
| datePickerType | <code>let</code> | No | <code>"simple" &#124; "single" &#124; "range"</code> | <code>"simple"</code> | Specify the date picker type | | datePickerType | <code>let</code> | No | <code>"simple" &#124; "single" &#124; "range"</code> | <code>"simple"</code> | Specify the date picker type |
| dateFormat | <code>let</code> | No | <code>string</code> | <code>"m/d/Y"</code> | Specify the date format | | dateFormat | <code>let</code> | No | <code>string</code> | <code>"m/d/Y"</code> | Specify the date format |
| maxDate | <code>let</code> | No | <code>null &#124; string &#124; Date</code> | <code>null</code> | Specify the maximum date | | maxDate | <code>let</code> | No | <code>null &#124; string &#124; Date</code> | <code>null</code> | Specify the maximum date |
| minDate | <code>let</code> | No | <code>null &#124; string &#124; Date</code> | <code>null</code> | Specify the minimum date | | minDate | <code>let</code> | No | <code>null &#124; string &#124; Date</code> | <code>null</code> | Specify the minimum date |
| locale | <code>let</code> | No | <code>string</code> | <code>"en"</code> | Specify the locale | | locale | <code>let</code> | No | <code>import("flatpickr/dist/types/locale").CustomLocale &#124; import("flatpickr/dist/types/locale").key</code> | <code>"en"</code> | Specify the locale |
| short | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the short variant | | short | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the short variant |
| light | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant | | light | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the date picker element | | id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the date picker element |
| flatpickrProps | <code>let</code> | No | <code>import("flatpickr/dist/types/options").Options</code> | <code>{}</code> | Override the options passed to the Flatpickr instance<br />https://flatpickr.js.org/options | | flatpickrProps | <code>let</code> | No | <code>import("flatpickr/dist/types/options").Options</code> | <code>{}</code> | Override the options passed to the Flatpickr instance<br />https://flatpickr.js.org/options |
### Slots ### Slots

2
docs/src/COMPONENT_API.json
View file

@ -2659,7 +2659,7 @@
"name": "locale", "name": "locale",
"kind": "let", "kind": "let",
"description": "Specify the locale", "description": "Specify the locale",
"type": "string", "type": "import(\"flatpickr/dist/types/locale\").CustomLocale | import(\"flatpickr/dist/types/locale\").key",
"value": "\"en\"", "value": "\"en\"",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,

5
src/DatePicker/DatePicker.svelte
View file

@ -44,7 +44,10 @@
*/ */
export let minDate = null; export let minDate = null;
/** Specify the locale */ /**
* Specify the locale
* @type {import("flatpickr/dist/types/locale").CustomLocale | import("flatpickr/dist/types/locale").key}
*/
export let locale = "en"; export let locale = "en";
/** Set to `true` to use the short variant */ /** Set to `true` to use the short variant */

3
tests/DatePicker.test.svelte
View file

@ -1,8 +1,10 @@
<script lang="ts"> <script lang="ts">
import { DatePicker, DatePickerSkeleton, DatePickerInput } from "../types"; import { DatePicker, DatePickerSkeleton, DatePickerInput } from "../types";
import { Russian } from "flatpickr/dist/l10n/ru.js";
</script> </script>
<DatePicker <DatePicker
locale="{Russian}"
datePickerType="single" datePickerType="single"
flatpickrProps="{{ static: true }}" flatpickrProps="{{ static: true }}"
on:change on:change
@ -11,6 +13,7 @@
</DatePicker> </DatePicker>
<DatePicker <DatePicker
locale="az"
on:change="{(e) => { on:change="{(e) => {
console.log(e.detail); console.log(e.detail);
}}" }}"

4
types/DatePicker/DatePicker.svelte.d.ts vendored
View file

@ -51,7 +51,9 @@ export interface DatePickerProps
* Specify the locale * Specify the locale
* @default "en" * @default "en"
*/ */
locale?: string; locale?:
| import("flatpickr/dist/types/locale").CustomLocale
| import("flatpickr/dist/types/locale").key;
/** /**
* Set to `true` to use the short variant * Set to `true` to use the short variant