[{"data":1,"prerenderedAt":462},["ShallowReactive",2],{"navigation_docs":3,"-essentials-typeable-input":170,"-essentials-typeable-input-surround":457},[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":76,"body":172,"description":450,"extension":451,"links":452,"meta":453,"navigation":454,"path":77,"seo":455,"stem":78,"__hash__":456},"docs\u002F2.essentials\u002F09.typeable-input.md",{"type":173,"value":174,"toc":438},"minimark",[175,191,246,261,266,316,320,333,336,340,372,376,383,387,394,398,401,405,412,416,419,423,434],[176,177,178,179,183,184,187,188,190],"p",{},"Set ",[180,181,182],"code",{},"isModal"," and ",[180,185,186],{},"isTypeable"," on a date picker or a range. Without ",[180,189,186],{}," the inputs are read-only and only show the selection.",[192,193,196],"calendar-demo",{":config":194,":height":195},"{\"isDateRange\":true,\"isModal\":true,\"isTypeable\":true,\"newCurrentDate\":\"2026-10-01\"}","420",[197,198,203],"pre",{"className":199,"code":200,"language":201,"meta":202,"style":202},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003CFunctionalCalendar v-model=\"value\" is-date-range is-modal is-typeable \u002F>\n","vue","",[180,204,205],{"__ignoreMap":202},[206,207,210,214,218,222,225,228,232,234,237,240,243],"span",{"class":208,"line":209},"line",1,[206,211,213],{"class":212},"sMK4o","\u003C",[206,215,217],{"class":216},"swJcz","FunctionalCalendar",[206,219,221],{"class":220},"spNyl"," v-model",[206,223,224],{"class":212},"=",[206,226,227],{"class":212},"\"",[206,229,231],{"class":230},"sTEyZ","value",[206,233,227],{"class":212},[206,235,236],{"class":220}," is-date-range",[206,238,239],{"class":220}," is-modal",[206,241,242],{"class":220}," is-typeable",[206,244,245],{"class":212}," \u002F>\n",[176,247,248,249,252,253,256,257,260],{},"Type ",[180,250,251],{},"5\u002F3\u002F2026"," or ",[180,254,255],{},"05\u002F03\u002F2026"," into an input, then try ",[180,258,259],{},"31\u002F02\u002F2026",".",[262,263,265],"h2",{"id":264},"what-the-input-accepts","What the input accepts",[267,268,269,273,292,300,310,313],"ul",{},[270,271,272],"li",{},"Day and month with one or two digits, and a four digit year.",[270,274,275,276,279,280,283,284,252,287,289,290,260],{},"The separator of ",[180,277,278],{},"dateFormat",", which is ",[180,281,282],{},"\u002F",", ",[180,285,286],{},"-",[180,288,260],{},". The default is ",[180,291,282],{},[270,293,294,295,297,298,260],{},"Padded and unpadded dates give the same value. ",[180,296,255],{}," is stored as ",[180,299,251],{},[270,301,302,303,283,305,283,307,309],{},"Typing any of ",[180,304,286],{},[180,306,260],{},[180,308,282],{}," or a space where a separator belongs inserts the format's separator.",[270,311,312],{},"Letters and extra digits are dropped as you type. A third digit in the day, or a fifth in the year, is not accepted.",[270,314,315],{},"A digit that overflows a full part moves into the next part when you type at the end.",[262,317,319],{"id":318},"when-the-value-commits","When the value commits",[176,321,322,323,183,325,328,329,332],{},"The calendar updates the value only when the text is a complete, real date: all parts present, a four digit year, and a day that exists in that month. ",[180,324,259],{},[180,326,327],{},"1\u002F1\u002F26"," change nothing, and ",[180,330,331],{},"29\u002F02\u002F2028"," is accepted.",[176,334,335],{},"In a range, each input commits on its own. Typing a start date does not need an end date.",[262,337,339],{"id":338},"paste-and-autofill","Paste and autofill",[176,341,342,343,283,345,283,347,349,350,352,353,356,357,360,361,364,365,367,368,371],{},"A pasted or autofilled date has its ",[180,344,286],{},[180,346,260],{},[180,348,282],{}," and space separators replaced with the separator of ",[180,351,278],{},", so ",[180,354,355],{},"5.10.2026"," becomes ",[180,358,359],{},"5\u002F10\u002F2026",". An ISO date such as ",[180,362,363],{},"2026-10-05"," is reordered to match ",[180,366,278],{},". Other text that is not a date, such as ",[180,369,370],{},"5 Oct 2026",", stays exactly as pasted and changes nothing.",[262,373,375],{"id":374},"ime-input","IME input",[176,377,378,379,382],{},"While an input method editor composes text, the input is left alone. When the composition ends, full-width digits and separators such as ",[180,380,381],{},"１５／０１／２０２７"," become ASCII and the date commits.",[262,384,386],{"id":385},"time","Time",[176,388,389,390,393],{},"With ",[180,391,392],{},"displayTimeInput",", the time stays in the input text while you edit the date part. Text typed after the date is left as typed. It does not change the selected time, so pick the hour and minute in the time picker.",[262,395,397],{"id":396},"undo","Undo",[176,399,400],{},"When the calendar reformats the text, for example by inserting a separator, the browser clears the input's undo history.",[262,402,404],{"id":403},"forms","Forms",[176,406,407,408,260],{},"Enter in these inputs is not intercepted, so a surrounding form submits. See ",[409,410,411],"a",{"href":72},"keyboard",[262,413,415],{"id":414},"tags-input","Tags input",[176,417,418],{},"The multiple date picker shows its dates as tags. Type a date and press Enter. The date is added if it is valid.",[262,420,422],{"id":421},"read-the-value","Read the value",[176,424,425,426,429,430,433],{},"The calendar writes typed dates into the object you bound, in place and without an ",[180,427,428],{},"update:modelValue"," event. An empty ",[180,431,432],{},"{}"," model also works: the calendar fills in the missing keys when it mounts.",[435,436,437],"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);}",{"title":202,"searchDepth":439,"depth":439,"links":440},2,[441,442,443,444,445,446,447,448,449],{"id":264,"depth":439,"text":265},{"id":318,"depth":439,"text":319},{"id":338,"depth":439,"text":339},{"id":374,"depth":439,"text":375},{"id":385,"depth":439,"text":386},{"id":396,"depth":439,"text":397},{"id":403,"depth":439,"text":404},{"id":414,"depth":439,"text":415},{"id":421,"depth":439,"text":422},"Let users type dates into the modal inputs.","md",null,{},{"icon":79},{"title":76,"description":450},"6I1oeeueb82p7NhFH2oCSRdNTKgZsql1cNjiuSReqUA",[458,460],{"title":71,"path":72,"stem":73,"description":459,"icon":74,"children":-1},"Every key the calendar handles.",{"title":81,"path":82,"stem":83,"description":461,"icon":84,"children":-1},"Derive names and week start from Intl, and translate every UI string.",1792736103432]