0),(e.buttonBackgroundColor||e.buttonBorderColor||e.buttonTextColor||e.highlightColor||e.dayBackgroundColor||e.dayTextColor||e.dayHighlightedBackgroundColor||e.dayHighlightedTextColor||e.style)&&n("wrapperStyle",ne="\n --button-background-color: "+p+";\n --button-border-color: "+y+";\n --button-text-color: "+b+";\n --highlight-color: "+k+";\n --day-background-color: "+$+";\n --day-text-color: "+C+";\n --day-highlighted-background-color: "+w+";\n --day-highlighted-text-color: "+S+";\n "+v+"\n "),(e.format||e.selected)&&n("formattedSelected",I="function"==typeof i?i(d):Ke(d,i))},{popover:o,format:i,start:c,end:l,selected:d,dateChosen:s,trigger:u,selectableCallback:h,weekStart:f,daysOfWeek:g,monthsOfYear:m,style:v,buttonBackgroundColor:p,buttonBorderColor:y,buttonTextColor:b,highlightColor:k,dayBackgroundColor:$,dayTextColor:C,dayHighlightedBackgroundColor:w,dayHighlightedTextColor:S,sortedDaysOfWeek:x,highlighted:_,shouldShakeDate:O,month:T,year:Y,isOpen:F,isClosing:B,formattedSelected:I,changeMonth:j,incrementMonth:W,registerSelection:q,registerClose:z,registerOpen:function(){n("highlighted",_=new Date(d)),n("month",T=d.getMonth()),n("year",Y=d.getFullYear()),document.addEventListener("keydown",R),r("open")},visibleMonth:G,visibleMonthId:V,canIncrementMonth:ee,canDecrementMonth:te,wrapperStyle:ne,monthSelected_handler:function(e){return j(e.detail)},incrementMonth_handler:function(e){return W(e.detail)},dateSelected_handler:function(e){return q(e.detail)},popover_1_binding:function(e){N[e?"unshift":"push"](function(){n("popover",o=e)})},popover_1_open_binding:function(e){n("isOpen",F=e)},popover_1_shrink_binding:function(e){n("isClosing",B=e)},$$slots:U,$$scope:oe}}var lt=function(e){function t(t){e.call(this),ue(this,t,ct,it,d,["format","start","end","selected","dateChosen","trigger","selectableCallback","weekStart","daysOfWeek","monthsOfYear","style","buttonBackgroundColor","buttonBorderColor","buttonTextColor","highlightColor","dayBackgroundColor","dayTextColor","dayHighlightedBackgroundColor","dayHighlightedTextColor","formattedSelected"])}return e&&(t.__proto__=e),t.prototype=Object.create(e&&e.prototype),t.prototype.constructor=t,t}(he);function dt(e){var t;return{c:function(){t=M("Pick a date")},m:function(e,n){C(e,t,n)},p:n,d:function(e){e&&w(t)}}}function st(e){var t,n;return{c:function(){t=M("Chosen: "),n=M(e.formattedSelected)},m:function(e,o){C(e,t,o),C(e,n,o)},p:function(e,t){e.formattedSelected&&T(n,t.formattedSelected)},d:function(e){e&&(w(t),w(n))}}}function ut(e){var t;function n(e){return e.dateChosen?st:dt}var o=n(e),r=o(e);return{c:function(){t=D("button"),r.c(),O(t,"class","custom-button svelte-6e0kyu")},m:function(e,n){C(e,t,n),r.m(t,null)},p:function(e,a){o===(o=n(a))&&r?r.p(e,a):(r.d(1),(r=o(a))&&(r.c(),r.m(t,null)))},d:function(e){e&&w(t),r.d()}}}function ht(e){var t;return{c:function(){t=M("Custom Button")},m:function(e,n){C(e,t,n)},p:n,d:function(e){e&&w(t)}}}function ft(e){var t;return{c:function(){t=M(e.exampleFormatted)},m:function(e,n){C(e,t,n)},p:function(e,n){e.exampleFormatted&&T(t,n.exampleFormatted)},d:function(e){e&&w(t)}}}function gt(e){var t;function n(e){return e.exampleChosen?ft:ht}var o=n(e),r=o(e);return{c:function(){t=D("button"),r.c(),O(t,"id","test")},m:function(e,n){C(e,t,n),r.m(t,null)},p:function(e,a){o===(o=n(a))&&r?r.p(e,a):(r.d(1),(r=o(a))&&(r.c(),r.m(t,null)))},d:function(e){e&&w(t),r.d()}}}function mt(e){var t,n,o,r,a,i,c,l,d,s,u,h,f,g,m,v,p,y,b,k,S,_,T,Y,F,B,H,I,j,W,E,A,L,P,J,q,R,z,X,U,K,G,Q,Z,ee,te,ne,oe,ie,ce,ue,he,fe,ge,me,ve,pe,ye,be,ke,$e=new lt({props:{format:vt}});function Ce(t){e.datepicker1_formattedSelected_binding.call(null,t),_=!0,V(function(){return _=!1})}function we(t){e.datepicker1_dateChosen_binding.call(null,t),T=!0,V(function(){return T=!1})}var Se={format:vt,$$slots:{default:[ut]},$$scope:{ctx:e}};void 0!==e.formattedSelected&&(Se.formattedSelected=e.formattedSelected),void 0!==e.dateChosen&&(Se.dateChosen=e.dateChosen);var De=new lt({props:Se});function Me(t){e.datepicker2_formattedSelected_binding.call(null,t),P=!0,V(function(){return P=!1})}function xe(t){e.datepicker2_dateChosen_binding.call(null,t),J=!0,V(function(){return J=!1})}N.push(function(){return le(De,"formattedSelected",Ce)}),N.push(function(){return le(De,"dateChosen",we)});var _e={$$slots:{default:[gt]},$$scope:{ctx:e}};void 0!==e.exampleFormatted&&(_e.formattedSelected=e.exampleFormatted),void 0!==e.exampleChosen&&(_e.dateChosen=e.exampleChosen);var Oe=new lt({props:_e});N.push(function(){return le(Oe,"formattedSelected",Me)}),N.push(function(){return le(Oe,"dateChosen",xe)});var Te=new lt({props:{format:vt,start:e.threeDaysInPast,end:e.inThirtyDays,selectableCallback:e.noWeekendsSelectableCallback}}),Ye=new lt({props:{format:vt,start:e.tomorrow,end:e.inThirtyDays,selectableCallback:e.noWeekendsSelectableCallback}}),Fe=new lt({props:{format:vt}});Fe.$on("dateSelected",e.dateSelected_handler);var Be=new lt({props:{format:vt,buttonBackgroundColor:"#e20074",buttonTextColor:"white",highlightColor:"#e20074",dayBackgroundColor:"#efefef",dayTextColor:"#333",dayHighlightedBackgroundColor:"#e20074",dayHighlightedTextColor:"#fff"}});return{c:function(){(t=D("h1")).textContent="SvelteCalendar",n=x(),o=D("div"),(r=D("p")).textContent="A lightweight date picker written with Svelte. Here is an example:",a=x(),$e.$$.fragment.c(),i=x(),(c=D("p")).textContent="This component can be used with or without the Svelte compiler.",l=x(),(d=D("ul")).innerHTML="Lightweight (~8KB) IE11+ Compatible Usable as a Svelte component Usable with Vanilla JS / <Your Framework Here> Can be compiled to a native web component / custom element Mobile/thumb friendly Keyboard navigation (arrows, pgup/pgdown, tab, esc) ",s=x(),(u=D("p")).textContent="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:",h=x(),(f=D("h4")).textContent="With Svelte:",g=x(),m=D("pre"),v=D("code"),p=M("\r\n \r\n {#if dateChosen} Chosen: {formattedSelected} {:else} Pick a date {/if}\r\n \r\n "),k=x(),S=D("div"),De.$$.fragment.c(),Y=x(),(F=D("h4")).textContent="Without Svelte HTML:",B=x(),(H=D("pre")).innerHTML="\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("\r\n {#each days as day}\r\n
\r\n dispatch('dateSelected', day.date)}\r\n >\r\n {day.date.getDate()}\r\n \r\n
\r\n {/each}\r\n
\r\n {#each visibleMonth.weeks as week (week.id) }\r\n
\r\n\r\n\r\n","\r\n\r\n\r\n
\r\n
dispatch('incrementMonth', -1)}>\r\n
\r\n
\r\n {monthsOfYear[month][0]} {year}\r\n
\r\n
dispatch('incrementMonth', 1)}>\r\n
\r\n
\r\n
\r\n {#each availableMonths as monthDefinition, index}\r\n
monthSelected(e, { m: monthDefinition, i: index })}\r\n >\r\n {monthDefinition.abbrev} \r\n
\r\n {/each}\r\n
\r\n
\r\n
\r\n \r\n \r\n
\r\n
\r\n
\n
\n \n \n {#if !trigger}\n \n {formattedSelected}\n \n {/if}\n \n
\n \n
\n
changeMonth(e.detail)}\n on:incrementMonth={e => incrementMonth(e.detail)} \n />\n \n {#each sortedDaysOfWeek as day}\n {day[1]} \n {/each}\n
\n registerSelection(e.detail)} \n />\n \n
SvelteCalendar \r\n\r\n\t
A lightweight date picker written with Svelte. Here is an example:
\r\n\r\n\t
\r\n\t\r\n\r\n\t
This component can be used with or without the Svelte compiler.
\r\n\t
\r\n\t\tLightweight (~8KB) \r\n\t\tIE11+ Compatible \r\n\t\tUsable as a Svelte component \r\n\t\tUsable with Vanilla JS / <Your Framework Here> \r\n\t\tCan be compiled to a native web component / custom element \r\n\t\tMobile/thumb friendly \r\n\t\tKeyboard navigation (arrows, pgup/pgdown, tab, esc) \r\n\t \r\n\r\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:
\r\n\r\n\t
With Svelte: \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\r\n\t
\r\n\t\t\r\n\t\t\t\r\n\t\t\t\t{#if dateChosen} Chosen: {formattedSelected} {:else} Pick a date {/if}\r\n\t\t\t \r\n\t\t \r\n\t
\r\n\r\n\t
Without Svelte HTML: \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\n\r\n\t
Without Svelte JS: \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\t\r\n\r\n\t
\r\n\t\t\r\n\t\t\t\r\n\t\t\t\t{#if exampleChosen} {exampleFormatted} {:else} Custom Button {/if}\r\n\t\t\t \r\n\t\t \r\n\t
\r\n\r\n\t
You can confine the date selection range with start and end:
\r\n\r\n\t
\r\n\t\t
\r\n\r\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.
\r\n\r\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).
\r\n\r\n\t
\r\n\t\t
\r\n\r\n\t
You can bind to the `dateSelected` event, which has a data property `date`:
\r\n\t\r\n\t
\r\n\t\t logChoice(e.detail.date)} />\r\n\t
\r\n\r\n\t
You can theme the datepicker:
\r\n\t
\r\n\t\t
\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\r\n
\r\n {#each days as day}\r\n
\r\n dispatch('dateSelected', day.date)}\r\n >\r\n {day.date.getDate()}\r\n \r\n
\r\n {/each}\r\n
\r\n {#each visibleMonth.weeks as week (week.id) }\r\n
\r\n\r\n\r\n","\r\n\r\n\r\n
\r\n
dispatch('incrementMonth', -1)}>\r\n
\r\n
\r\n {monthsOfYear[month][0]} {year}\r\n
\r\n
dispatch('incrementMonth', 1)}>\r\n
\r\n
\r\n
\r\n {#each availableMonths as monthDefinition, index}\r\n
monthSelected(e, { m: monthDefinition, i: index })}\r\n >\r\n {monthDefinition.abbrev} \r\n
\r\n {/each}\r\n
\r\n
\r\n
\r\n \r\n \r\n
\r\n
\r\n
\r\n
\r\n \r\n \r\n {#if !trigger}\r\n \r\n {formattedSelected}\r\n \r\n {/if}\r\n \r\n
\r\n \r\n
\r\n
changeMonth(e.detail)}\r\n on:incrementMonth={e => incrementMonth(e.detail)} \r\n />\r\n \r\n {#each sortedDaysOfWeek as day}\r\n {day[1]} \r\n {/each}\r\n
\r\n registerSelection(e.detail)} \r\n />\r\n \r\n
SvelteCalendar \r\n\r\n\t
A lightweight date picker written with Svelte. Here is an example:
\r\n\r\n\t
\r\n\t\r\n\r\n\t
This component can be used with or without the Svelte compiler.
\r\n\t
\r\n\t\tLightweight (~8KB) \r\n\t\tIE11+ Compatible \r\n\t\tUsable as a Svelte component \r\n\t\tUsable with Vanilla JS / <Your Framework Here> \r\n\t\tCan be compiled to a native web component / custom element \r\n\t\tMobile/thumb friendly \r\n\t\tKeyboard navigation (arrows, pgup/pgdown, tab, esc) \r\n\t \r\n\r\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:
\r\n\r\n\t
With Svelte: \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\r\n\t
\r\n\t\t\r\n\t\t\t\r\n\t\t\t\t{#if dateChosen} Chosen: {formattedSelected} {:else} Pick a date {/if}\r\n\t\t\t \r\n\t\t \r\n\t
\r\n\r\n\t
Without Svelte HTML: \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\n\r\n\t
Without Svelte JS: \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\t\r\n\r\n\t
\r\n\t\t\r\n\t\t\t\r\n\t\t\t\t{#if exampleChosen} {exampleFormatted} {:else} Custom Button {/if}\r\n\t\t\t \r\n\t\t \r\n\t
\r\n\r\n\t
You can confine the date selection range with start and end:
\r\n\r\n\t
\r\n\t\t
\r\n\r\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.
\r\n\r\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).
\r\n\r\n\t
\r\n\t\t
\r\n\r\n\t
You can bind to the `dateSelected` event, which has a data property `date`:
\r\n\t\r\n\t
\r\n\t\t logChoice(e.detail.date)} />\r\n\t
\r\n\r\n\t
You can theme the datepicker:
\r\n\t
\r\n\t\t
\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\r\n
-
+
{#if !trigger}
{formattedSelected}