\n
\n
dispatch('incrementMonth', -1)}>\n \n
\n
\n {monthDict[month].name} {year}\n
\n
dispatch('incrementMonth', 1)}>\n \n
\n
\n
\n {#each availableMonths as monthDefinition, index}\n
monthSelected(e, index)}\n >\n {monthDefinition.abbrev}\n
\n {/each}\n
\n
\r\n {#each days as day}\r\n
\r\n \r\n
\r\n {/each}\r\n
\n
\n
dispatch('incrementMonth', -1)}>\n \n
\n
\n {monthDict[month].name} {year}\n
\n
dispatch('incrementMonth', 1)}>\n \n
\n
\n
\n {#each availableMonths as monthDefinition, index}\n
monthSelected(e, index)}\n >\n {monthDefinition.abbrev}\n
\n {/each}\n
\n
\n\t
A lightweight date picker written with Svelte. Here is an example:
\n\n\t
\n\t\n\n\t
This component can be used with or without the Svelte compiler.
\n\t
\n\t\t- Lightweight (~8KB)
\n\t\t- IE11+ Compatible
\n\t\t- Usable as a Svelte component
\n\t\t- Usable with Vanilla JS / <Your Framework Here>
\n\t\t- Can be compiled to a native web component / custom element
\n\t\t- Mobile/thumb friendly
\n\t\t- Keyboard navigation (arrows, pgup/pgdown, tab, esc)
\n\t
\n\n\t
Above you can see the default styling of this component. This will be created for you by default when using the component but you can also pass in your own calendar 'trigger' either as a slot (custom element or svelte) or as a DOM node reference (use as vanilla JS). Here are some examples:
\n\n\t
With Svelte:
\n\t
\n<Datepicker format={dateFormat} bind:formattedSelected bind:dateChosen>\n <button class='custom-button'>\n {#if dateChosen} Chosen: {formattedSelected} {:else} Pick a date {/if}\n </button>\n</Datepicker>\n\t
\n\n\t
\n\t\t\n\t\t\t\n\t\t\n\t
\n\n\t
Without Svelte HTML:
\n\t
\n<div class='button-container'>\n <button id='test'>My Custom Button</button>\n</div>\n\t
\n\n\t
Without Svelte JS:
\n\t
\nvar trigger = document.getElementById('test');\nvar cal = new SvelteCalendar({ \n target: document.querySelector('.button-container'),\n anchor: trigger, \n props: {\n trigger: trigger\n }\n});\n\t
\n\n\t
\n\t\t\n\t\t\t\n\t\t\n\t
\n\n\t
You can confine the date selection range with start and end:
\n\n\t
\n\t\t\n\t
\n\n\t
Note: The calendar will only generate dates up until the end date, so it is recommended to set this value to whatever is useful for you.
\n\n\t
You can also provide a `selectableCallback` prop which can be used to mark individual days between `start` and `end` as selectable. This callback should accept a single date as an argument and return true (if selectable) or false (if unavailable).
\n\n\t
\n\t\t\n\t
\n\n\t
You can bind to the `dateSelected` event, which has a data property `date`:
\n\t\n\t
\n\t\t logChoice(e.detail.date)} />\n\t
\n
\n
\n
dispatch('incrementMonth', -1)}>\n \n
\n
\n {monthDict[month].name} {year}\n
\n
dispatch('incrementMonth', 1)}>\n \n
\n
\n
\n {#each availableMonths as monthDefinition, index}\n
monthSelected(e, index)}\n >\n {monthDefinition.abbrev}\n
\n {/each}\n
\n
\r\n {#each days as day}\r\n
\r\n \r\n
\r\n {/each}\r\n