feat(date-picker): type flatpickrProps

This commit is contained in:
metonym 2021-09-07 08:39:46 -07:00
commit f2a445cb7e
3 changed files with 18 additions and 5 deletions

View file

@ -56,7 +56,11 @@
/** Set an id for the date picker element */ /** Set an id for the date picker element */
export let id = "ccs-" + Math.random().toString(36); export let id = "ccs-" + Math.random().toString(36);
/** Set to `true` to use in component Modal */ /**
* Override the options passed to the Flatpickr instance
* https://flatpickr.js.org/options
* @type {import("flatpickr/dist/types/options").Options}
*/
export let flatpickrProps = {}; export let flatpickrProps = {};
import { import {
@ -141,7 +145,7 @@
maxDate, maxDate,
minDate, minDate,
mode: $mode, mode: $mode,
...flatpickrProps ...flatpickrProps,
}, },
base: inputRef, base: inputRef,
input: inputRefTo, input: inputRefTo,

View file

@ -2,6 +2,14 @@
import { DatePicker, DatePickerSkeleton, DatePickerInput } from "../types"; import { DatePicker, DatePickerSkeleton, DatePickerInput } from "../types";
</script> </script>
<DatePicker
datePickerType="single"
flatpickrProps="{{ static: true }}"
on:change
>
<DatePickerInput labelText="Meeting date" placeholder="mm/dd/yyyy" />
</DatePicker>
<DatePicker <DatePicker
on:change="{(e) => { on:change="{(e) => {
console.log(e.detail); console.log(e.detail);

View file

@ -72,10 +72,11 @@ export interface DatePickerProps
id?: string; id?: string;
/** /**
* Set to true for correct using in Modal * Override the options passed to the Flatpickr instance
* @default false * https://flatpickr.js.org/options
* @default {}
*/ */
staticProp?: boolean; flatpickrProps?: import("flatpickr/dist/types/options").Options;
} }
export default class DatePicker extends SvelteComponentTyped< export default class DatePicker extends SvelteComponentTyped<