[{"data":1,"prerenderedAt":611},["ShallowReactive",2],{"navigation_docs":3,"-examples-modal-and-inputs":170,"-examples-modal-and-inputs-surround":606},[4,30,110,150,155],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":6},"Getting Started",false,"\u002Fgetting-started","1.getting-started",[10,15,20,25],{"title":11,"path":12,"stem":13,"icon":14},"Introduction","\u002Fgetting-started\u002Fintroduction","1.getting-started\u002F1.introduction","i-lucide-book-open",{"title":16,"path":17,"stem":18,"icon":19},"Installation","\u002Fgetting-started\u002Finstallation","1.getting-started\u002F2.installation","i-lucide-download",{"title":21,"path":22,"stem":23,"icon":24},"Usage","\u002Fgetting-started\u002Fusage","1.getting-started\u002F3.usage","i-lucide-play",{"title":26,"path":27,"stem":28,"icon":29},"Migrate from 2.x","\u002Fgetting-started\u002Fmigration","1.getting-started\u002F4.migration","i-lucide-arrow-right-left",{"title":31,"path":32,"stem":33,"children":34,"page":6},"Essentials","\u002Fessentials","2.essentials",[35,40,45,50,55,60,65,70,75,80,85,90,95,100,105],{"title":36,"path":37,"stem":38,"icon":39},"Selection modes","\u002Fessentials\u002Fselection-modes","2.essentials\u002F01.selection-modes","i-lucide-mouse-pointer-click",{"title":41,"path":42,"stem":43,"icon":44},"Multiple calendars","\u002Fessentials\u002Fmultiple-calendars","2.essentials\u002F02.multiple-calendars","i-lucide-columns-2",{"title":46,"path":47,"stem":48,"icon":49},"Time picker","\u002Fessentials\u002Ftime-picker","2.essentials\u002F03.time-picker","i-lucide-clock",{"title":51,"path":52,"stem":53,"icon":54},"Limits and availability","\u002Fessentials\u002Flimits-and-availability","2.essentials\u002F04.limits-and-availability","i-lucide-ban",{"title":56,"path":57,"stem":58,"icon":59},"Marking","\u002Fessentials\u002Fmarking","2.essentials\u002F05.marking","i-lucide-bookmark",{"title":61,"path":62,"stem":63,"icon":64},"Layout and names","\u002Fessentials\u002Flayout-and-names","2.essentials\u002F06.layout-and-names","i-lucide-layout-template",{"title":66,"path":67,"stem":68,"icon":69},"Theming","\u002Fessentials\u002Ftheming","2.essentials\u002F07.theming","i-lucide-palette",{"title":71,"path":72,"stem":73,"icon":74},"Keyboard","\u002Fessentials\u002Fkeyboard","2.essentials\u002F08.keyboard","i-lucide-keyboard",{"title":76,"path":77,"stem":78,"icon":79},"Typeable input","\u002Fessentials\u002Ftypeable-input","2.essentials\u002F09.typeable-input","i-lucide-text-cursor-input",{"title":81,"path":82,"stem":83,"icon":84},"Locale and labels","\u002Fessentials\u002Flocale","2.essentials\u002F10.locale","i-lucide-languages",{"title":86,"path":87,"stem":88,"icon":89},"Presets","\u002Fessentials\u002Fpresets","2.essentials\u002F11.presets","i-lucide-zap",{"title":91,"path":92,"stem":93,"icon":94},"Accessibility","\u002Fessentials\u002Faccessibility","2.essentials\u002F12.accessibility","i-lucide-accessibility",{"title":96,"path":97,"stem":98,"icon":99},"Props","\u002Fessentials\u002Fprops","2.essentials\u002F13.props","i-lucide-list",{"title":101,"path":102,"stem":103,"icon":104},"Events","\u002Fessentials\u002Fevents","2.essentials\u002F14.events","i-lucide-radio",{"title":106,"path":107,"stem":108,"icon":109},"Slots","\u002Fessentials\u002Fslots","2.essentials\u002F15.slots","i-lucide-puzzle",{"title":111,"icon":112,"path":113,"stem":114,"children":115,"page":6},"Examples","i-lucide-layout-grid","\u002Fexamples","3.examples",[116,119,122,126,129,132,136,139,143,146],{"title":36,"path":117,"stem":118,"icon":39},"\u002Fexamples\u002Fselection-modes","3.examples\u002F01.selection-modes",{"title":41,"path":120,"stem":121,"icon":44},"\u002Fexamples\u002Fmultiple-calendars","3.examples\u002F02.multiple-calendars",{"title":123,"path":124,"stem":125,"icon":79},"Modal and typeable inputs","\u002Fexamples\u002Fmodal-and-inputs","3.examples\u002F03.modal-and-inputs",{"title":46,"path":127,"stem":128,"icon":49},"\u002Fexamples\u002Ftime-picker","3.examples\u002F04.time-picker",{"title":51,"path":130,"stem":131,"icon":54},"\u002Fexamples\u002Flimits-and-availability","3.examples\u002F05.limits-and-availability",{"title":133,"path":134,"stem":135,"icon":59},"Marking and layout","\u002Fexamples\u002Fmarking","3.examples\u002F06.marking",{"title":106,"path":137,"stem":138,"icon":109},"\u002Fexamples\u002Fslots","3.examples\u002F07.slots",{"title":140,"path":141,"stem":142,"icon":89},"Range presets","\u002Fexamples\u002Fpresets","3.examples\u002F08.presets",{"title":81,"path":144,"stem":145,"icon":84},"\u002Fexamples\u002Flocale","3.examples\u002F09.locale",{"title":147,"path":148,"stem":149,"icon":69},"Theming and dark mode","\u002Fexamples\u002Ftheming-and-dark-mode","3.examples\u002F10.theming-and-dark-mode",{"title":151,"path":152,"stem":153,"icon":154},"Playground","\u002Fplayground","4.playground","i-lucide-sliders-horizontal",{"title":156,"path":157,"stem":158,"children":159,"page":6},"Community","\u002Fcommunity","5.community",[160,165],{"title":161,"path":162,"stem":163,"icon":164},"Contributing","\u002Fcommunity\u002Fcontributing","5.community\u002F1.contributing","i-lucide-git-pull-request",{"title":166,"path":167,"stem":168,"icon":169},"Changelog","\u002Fcommunity\u002Fchangelog","5.community\u002F2.changelog","i-lucide-history",{"id":171,"title":123,"body":172,"description":599,"extension":600,"links":601,"meta":602,"navigation":603,"path":124,"seo":604,"stem":125,"__hash__":605},"docs\u002F3.examples\u002F03.modal-and-inputs.md",{"type":173,"value":174,"toc":591},"minimark",[175,184,189,196,251,255,274,307,311,314,384,388,391,422,426,451,520,524,535,587],[176,177,178,179,183],"p",{},"Set ",[180,181,182],"code",{},"isModal"," to render inputs that open the calendar on focus. The calendar closes when focus leaves it, and Escape closes it and returns focus to the input.",[185,186,188],"h2",{"id":187},"modal-date-picker","Modal date picker",[176,190,191,192,195],{},"Focus the input, or press ArrowDown on it. ",[180,193,194],{},"isAutoCloseable"," closes the calendar after a date is chosen.",[197,198,201],"calendar-demo",{":config":199,":height":200},"{\"isDatePicker\":true,\"isModal\":true,\"isAutoCloseable\":true}","420",[202,203,208],"pre",{"className":204,"code":205,"language":206,"meta":207,"style":207},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003CFunctionalCalendar v-model=\"value\" is-date-picker is-modal is-auto-closeable \u002F>\n","vue","",[180,209,210],{"__ignoreMap":207},[211,212,215,219,223,227,230,233,237,239,242,245,248],"span",{"class":213,"line":214},"line",1,[211,216,218],{"class":217},"sMK4o","\u003C",[211,220,222],{"class":221},"swJcz","FunctionalCalendar",[211,224,226],{"class":225},"spNyl"," v-model",[211,228,229],{"class":217},"=",[211,231,232],{"class":217},"\"",[211,234,236],{"class":235},"sTEyZ","value",[211,238,232],{"class":217},[211,240,241],{"class":225}," is-date-picker",[211,243,244],{"class":225}," is-modal",[211,246,247],{"class":225}," is-auto-closeable",[211,249,250],{"class":217}," \u002F>\n",[185,252,254],{"id":253},"typeable-single-input","Typeable single input",[176,256,257,258,261,262,265,266,269,270,273],{},"Add ",[180,259,260],{},"isTypeable"," and type a date such as ",[180,263,264],{},"5\u002F3\u002F2026"," or ",[180,267,268],{},"05\u002F03\u002F2026",". The value commits when the date is complete and valid. Typing ",[180,271,272],{},"31\u002F02\u002F2026"," changes nothing.",[197,275,277],{":config":276,":height":200},"{\"isDatePicker\":true,\"isModal\":true,\"isTypeable\":true,\"newCurrentDate\":\"2026-10-01\"}",[202,278,280],{"className":204,"code":279,"language":206,"meta":207,"style":207},"\u003CFunctionalCalendar v-model=\"value\" is-date-picker is-modal is-typeable \u002F>\n",[180,281,282],{"__ignoreMap":207},[211,283,284,286,288,290,292,294,296,298,300,302,305],{"class":213,"line":214},[211,285,218],{"class":217},[211,287,222],{"class":221},[211,289,226],{"class":225},[211,291,229],{"class":217},[211,293,232],{"class":217},[211,295,236],{"class":235},[211,297,232],{"class":217},[211,299,241],{"class":225},[211,301,244],{"class":225},[211,303,304],{"class":225}," is-typeable",[211,306,250],{"class":217},[185,308,310],{"id":309},"typeable-range","Typeable range",[176,312,313],{},"A range gets two inputs. Each one commits on its own, so you can type only the start.",[197,315,317],{":config":316,":height":200},"{\"isDateRange\":true,\"isModal\":true,\"isTypeable\":true,\"dateFormat\":\"yyyy-mm-dd\",\"newCurrentDate\":\"2026-10-01\"}",[202,318,320],{"className":204,"code":319,"language":206,"meta":207,"style":207},"\u003CFunctionalCalendar\n  v-model=\"value\"\n  is-date-range\n  is-modal\n  is-typeable\n  date-format=\"yyyy-mm-dd\"\n\u002F>\n",[180,321,322,329,344,350,356,362,378],{"__ignoreMap":207},[211,323,324,326],{"class":213,"line":214},[211,325,218],{"class":217},[211,327,328],{"class":221},"FunctionalCalendar\n",[211,330,332,335,337,339,341],{"class":213,"line":331},2,[211,333,334],{"class":225},"  v-model",[211,336,229],{"class":217},[211,338,232],{"class":217},[211,340,236],{"class":235},[211,342,343],{"class":217},"\"\n",[211,345,347],{"class":213,"line":346},3,[211,348,349],{"class":225},"  is-date-range\n",[211,351,353],{"class":213,"line":352},4,[211,354,355],{"class":225},"  is-modal\n",[211,357,359],{"class":213,"line":358},5,[211,360,361],{"class":225},"  is-typeable\n",[211,363,365,368,370,372,376],{"class":213,"line":364},6,[211,366,367],{"class":225},"  date-format",[211,369,229],{"class":217},[211,371,232],{"class":217},[211,373,375],{"class":374},"sfazB","yyyy-mm-dd",[211,377,343],{"class":217},[211,379,381],{"class":213,"line":380},7,[211,382,383],{"class":235},"\u002F>\n",[185,385,387],{"id":386},"multiple-dates-as-tags","Multiple dates as tags",[176,389,390],{},"In modal mode, a multiple date picker shows its dates as removable tags. Type a date and press Enter to add it.",[197,392,394],{":config":393,":height":200},"{\"isMultipleDatePicker\":true,\"isModal\":true}",[202,395,397],{"className":204,"code":396,"language":206,"meta":207,"style":207},"\u003CFunctionalCalendar v-model=\"value\" is-multiple-date-picker is-modal \u002F>\n",[180,398,399],{"__ignoreMap":207},[211,400,401,403,405,407,409,411,413,415,418,420],{"class":213,"line":214},[211,402,218],{"class":217},[211,404,222],{"class":221},[211,406,226],{"class":225},[211,408,229],{"class":217},[211,410,232],{"class":217},[211,412,236],{"class":235},[211,414,232],{"class":217},[211,416,417],{"class":225}," is-multiple-date-picker",[211,419,244],{"class":225},[211,421,250],{"class":217},[185,423,425],{"id":424},"your-own-range-inputs","Your own range inputs",[176,427,428,429,432,433,436,437,440,441,443,444,447,448,450],{},"The ",[180,430,431],{},"dateRangeInputs"," slot replaces both inputs. It receives ",[180,434,435],{},"startDate",", ",[180,438,439],{},"endDate"," and ",[180,442,260],{},". Keep the ",[180,445,446],{},"readonly"," state so the inputs follow ",[180,449,260],{},".",[452,453,455],"calendar-inputs-demo",{"kind":454},"range",[202,456,458],{"className":204,"code":457,"language":206,"meta":207,"style":207},"\u003CFunctionalCalendar v-model=\"value\" is-modal is-date-range is-typeable>\n  \u003Ctemplate #dateRangeInputs=\"{ startDate, endDate, isTypeable }\">\n    \u003Cinput :value=\"startDate\" :readonly=\"!isTypeable\" placeholder=\"Check in\" \u002F>\n    \u003Cspan aria-hidden=\"true\">→\u003C\u002Fspan>\n    \u003Cinput :value=\"endDate\" :readonly=\"!isTypeable\" placeholder=\"Check out\" \u002F>\n  \u003C\u002Ftemplate>\n\u003C\u002FFunctionalCalendar>\n",[180,459,460,486,491,496,501,506,511],{"__ignoreMap":207},[211,461,462,464,466,468,470,472,474,476,478,481,483],{"class":213,"line":214},[211,463,218],{"class":217},[211,465,222],{"class":221},[211,467,226],{"class":225},[211,469,229],{"class":217},[211,471,232],{"class":217},[211,473,236],{"class":235},[211,475,232],{"class":217},[211,477,244],{"class":225},[211,479,480],{"class":225}," is-date-range",[211,482,304],{"class":225},[211,484,485],{"class":217},">\n",[211,487,488],{"class":213,"line":331},[211,489,490],{"class":235},"  \u003Ctemplate #dateRangeInputs=\"{ startDate, endDate, isTypeable }\">\n",[211,492,493],{"class":213,"line":346},[211,494,495],{"class":235},"    \u003Cinput :value=\"startDate\" :readonly=\"!isTypeable\" placeholder=\"Check in\" \u002F>\n",[211,497,498],{"class":213,"line":352},[211,499,500],{"class":235},"    \u003Cspan aria-hidden=\"true\">→\u003C\u002Fspan>\n",[211,502,503],{"class":213,"line":358},[211,504,505],{"class":235},"    \u003Cinput :value=\"endDate\" :readonly=\"!isTypeable\" placeholder=\"Check out\" \u002F>\n",[211,507,508],{"class":213,"line":364},[211,509,510],{"class":235},"  \u003C\u002Ftemplate>\n",[211,512,513,516,518],{"class":213,"line":380},[211,514,515],{"class":217},"\u003C\u002F",[211,517,222],{"class":221},[211,519,485],{"class":217},[185,521,523],{"id":522},"your-own-date-input","Your own date input",[176,525,428,526,529,530,440,533,450],{},[180,527,528],{},"datePickerInput"," slot does the same for a single date and receives ",[180,531,532],{},"selectedDate",[180,534,260],{},[452,536,538],{"kind":537},"single",[202,539,541],{"className":204,"code":540,"language":206,"meta":207,"style":207},"\u003CFunctionalCalendar v-model=\"value\" is-modal is-date-picker>\n  \u003Ctemplate #datePickerInput=\"{ selectedDate, isTypeable }\">\n    \u003Cinput :value=\"selectedDate\" :readonly=\"!isTypeable\" placeholder=\"Birthday\" \u002F>\n  \u003C\u002Ftemplate>\n\u003C\u002FFunctionalCalendar>\n",[180,542,543,565,570,575,579],{"__ignoreMap":207},[211,544,545,547,549,551,553,555,557,559,561,563],{"class":213,"line":214},[211,546,218],{"class":217},[211,548,222],{"class":221},[211,550,226],{"class":225},[211,552,229],{"class":217},[211,554,232],{"class":217},[211,556,236],{"class":235},[211,558,232],{"class":217},[211,560,244],{"class":225},[211,562,241],{"class":225},[211,564,485],{"class":217},[211,566,567],{"class":213,"line":331},[211,568,569],{"class":235},"  \u003Ctemplate #datePickerInput=\"{ selectedDate, isTypeable }\">\n",[211,571,572],{"class":213,"line":346},[211,573,574],{"class":235},"    \u003Cinput :value=\"selectedDate\" :readonly=\"!isTypeable\" placeholder=\"Birthday\" \u002F>\n",[211,576,577],{"class":213,"line":352},[211,578,510],{"class":235},[211,580,581,583,585],{"class":213,"line":358},[211,582,515],{"class":217},[211,584,222],{"class":221},[211,586,485],{"class":217},[588,589,590],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}",{"title":207,"searchDepth":331,"depth":331,"links":592},[593,594,595,596,597,598],{"id":187,"depth":331,"text":188},{"id":253,"depth":331,"text":254},{"id":309,"depth":331,"text":310},{"id":386,"depth":331,"text":387},{"id":424,"depth":331,"text":425},{"id":522,"depth":331,"text":523},"Open the calendar from an input, type dates, or replace the inputs.","md",null,{},{"icon":79},{"title":123,"description":599},"gqLJEVX6UzR4V7I7B1OXyaRuAWYfMA3jg5J00Lt6ryg",[607,609],{"title":41,"path":120,"stem":121,"description":608,"icon":44,"children":-1},"Show two or three months side by side, linked or independent.",{"title":46,"path":127,"stem":128,"description":610,"icon":49,"children":-1},"Add hours and minutes to a date, a range or several dates.",1792736104303]