A lightweight date picker written with Svelte. Here is an example:
\r\n\r\n\tThis component can be used with or without the Svelte compiler.
\r\n\tAbove 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:
\r\n\r\n\t\r\n<Datepicker format={dateFormat} bind:formattedSelected bind:dateChosen>\r\n <button class='custom-button'>\r\n {#if dateChosen} Chosen: {formattedSelected} {:else} Pick a date {/if}\r\n </button>\r\n</Datepicker>\r\n\t\r\n<div class='button-container'>\r\n <button id='test'>My Custom Button</button>\r\n</div>\r\n\t\r\nvar trigger = document.getElementById('test');\r\nvar cal = new SvelteCalendar({ \r\n target: document.querySelector('.button-container'),\r\n anchor: trigger, \r\n props: {\r\n trigger: trigger\r\n }\r\n});\r\n\tYou can confine the date selection range with start and end:
\r\n\r\n\tNote: 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.
\r\n\r\n\tYou 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).
\r\n\r\n\tYou can bind to the `dateSelected` event, which has a data property `date`:
\r\n\t\r\n\tYou can theme the datepicker:
\r\n\t\r\n<Datepicker \r\n format={dateFormat} \r\n buttonBackgroundColor='#e20074'\r\n buttonTextColor='white'\r\n highlightColor='#e20074'\r\n dayBackgroundColor='#efefef'\r\n dayTextColor='#333'\r\n dayHighlightedBackgroundColor='#e20074'\r\n dayHighlightedTextColor='#fff'\r\n/>\r\n\t\n\t\t\t<div class='button-container'>\n\t\t\t <button id='test'>My Custom Button</button>\n\t\t\t</div>\n\t\t\t\t",I=x(),(j=D("h4")).textContent="Without Svelte JS:",W=x(),(E=D("pre")).innerHTML="\n\t\t\tvar trigger = document.getElementById('test');\n\t\t\tvar cal = new SvelteCalendar({ \n\t\t\t target: document.querySelector('.button-container'),\n\t\t\t anchor: trigger, \n\t\t\t props: {\n\t\t\t trigger: trigger\n\t\t\t }\n\t\t\t});\n\t\t\t\t",A=x(),L=D("div"),Oe.$$.fragment.c(),q=x(),(R=D("p")).textContent="You can confine the date selection range with start and end:",z=x(),X=D("div"),Te.$$.fragment.c(),U=x(),(K=D("p")).textContent="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.",G=x(),(Q=D("p")).textContent="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).",Z=x(),ee=D("div"),Ye.$$.fragment.c(),te=x(),(ne=D("p")).textContent="You can bind to the `dateSelected` event, which has a data property `date`:",oe=x(),ie=D("div"),Fe.$$.fragment.c(),ce=x(),(ue=D("p")).textContent="You can theme the datepicker:",he=x(),fe=D("div"),Be.$$.fragment.c(),ge=x(),me=D("pre"),ve=D("code"),pe=M("A lightweight date picker written with Svelte. Here is an example:
\r\n\r\n\tThis component can be used with or without the Svelte compiler.
\r\n\tAbove 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:
\r\n\r\n\t\r\n<Datepicker format={dateFormat} bind:formattedSelected bind:dateChosen>\r\n <button class='custom-button'>\r\n {#if dateChosen} Chosen: {formattedSelected} {:else} Pick a date {/if}\r\n </button>\r\n</Datepicker>\r\n\t\r\n<div class='button-container'>\r\n <button id='test'>My Custom Button</button>\r\n</div>\r\n\t\r\nvar trigger = document.getElementById('test');\r\nvar cal = new SvelteCalendar({ \r\n target: document.querySelector('.button-container'),\r\n anchor: trigger, \r\n props: {\r\n trigger: trigger\r\n }\r\n});\r\n\tYou can confine the date selection range with start and end:
\r\n\r\n\tNote: 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.
\r\n\r\n\tYou 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).
\r\n\r\n\tYou can bind to the `dateSelected` event, which has a data property `date`:
\r\n\t\r\n\tYou can theme the datepicker:
\r\n\t\r\n<Datepicker \r\n format={dateFormat} \r\n buttonBackgroundColor='#e20074'\r\n buttonTextColor='white'\r\n highlightColor='#e20074'\r\n dayBackgroundColor='#efefef'\r\n dayTextColor='#333'\r\n dayHighlightedBackgroundColor='#e20074'\r\n dayHighlightedTextColor='#fff'\r\n/>\r\n\tA lightweight date picker written with Svelte. Here is an example:
@@ -92,9 +92,9 @@
var trigger = document.getElementById('test');
-var cal = new SvelteCalendar({
+var cal = new SvelteCalendar({
target: document.querySelector('.button-container'),
- anchor: trigger,
+ anchor: trigger,
props: {
trigger: trigger
}
@@ -124,15 +124,15 @@ var cal = new SvelteCalendar({
You can bind to the `dateSelected` event, which has a data property `date`:
- +You can theme the datepicker:
-<Datepicker
- format={dateFormat}
+<Datepicker
+ format={dateFormat}
buttonBackgroundColor='#e20074'
buttonTextColor='white'
highlightColor='#e20074'
@@ -157,14 +157,14 @@ var cal = new SvelteCalendar({