var Component=(()=>{var y=Object.create;var a=Object.defineProperty;var A=Object.getOwnPropertyDescriptor;var D=Object.getOwnPropertyNames;var B=Object.getPrototypeOf,C=Object.prototype.hasOwnProperty;var F=(n,l)=>()=>(l||n((l={exports:{}}).exports,l),l.exports),m=(n,l)=>{for(var r in l)a(n,r,{get:l[r],enumerable:!0})},i=(n,l,r,s)=>{if(l&&typeof l=="object"||typeof l=="function")for(let c of D(l))!C.call(n,c)&&c!==r&&a(n,c,{get:()=>l[c],enumerable:!(s=A(l,c))||s.enumerable});return n};var u=(n,l,r)=>(r=n!=null?y(B(n)):{},i(l||!n||!n.__esModule?a(r,"default",{value:n,enumerable:!0}):r,n)),g=n=>i(a({},"__esModule",{value:!0}),n);var p=F((w,d)=>{d.exports=_jsx_runtime});var b={};m(b,{default:()=>x,frontmatter:()=>f});var e=u(p()),f={title:"DatePicker",description:"Pick a date",component:!0,type:"Doc",package:{name:"ui",path:"date-picker.tsx"}};function h(n){let l=Object.assign({figure:"figure",pre:"pre",code:"code",span:"span",h2:"h2",a:"a",p:"p",h3:"h3"},n.components),{ComponentExample:r,DatePickerDemo:s,DateRangePickerExample:c,DatePickerWithInputExample:t}=l;return r||o("ComponentExample",!0),s||o("DatePickerDemo",!0),t||o("DatePickerWithInputExample",!0),c||o("DateRangePickerExample",!0),(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)(r,{src:"/src/components/examples/date-picker/demo.tsx",children:[(0,e.jsx)(s,{}),(0,e.jsx)(l.figure,{__src__:"/src/components/examples/date-picker/demo.tsx","data-rehype-pretty-code-figure":"",children:(0,e.jsx)(l.pre,{style:{backgroundColor:"#22272e"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark-dimmed",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"github-dark-dimmed",style:{display:"grid"},children:[(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:"'use client'"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" { DatePicker } "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:"'@nerdfish/ui'"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" { addYears } "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:"'date-fns'"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#DCBDFB"},children:"DatePickerDemo"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"() {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#8DDB8C"},children:"DatePicker"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"presets"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"["})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" {"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" value: "}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:"'0'"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:","})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" label: "}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:"'Today'"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:","})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" },"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" {"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" value: "}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:"'1'"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:","})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" label: "}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:"'Tomorrow'"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:","})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" },"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" {"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" value: "}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:"'7'"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:","})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" label: "}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:"'Next week'"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:","})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" },"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" ]"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"onSelect"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#F69D50"},children:"date"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" console."}),(0,e.jsx)(l.span,{style:{color:"#DCBDFB"},children:"info"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"(date)"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"fromYear"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#DCBDFB"},children:"addYears"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"new"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#DCBDFB"},children:"Date"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"(), "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"-"}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"3"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:")."}),(0,e.jsx)(l.span,{style:{color:"#DCBDFB"},children:"getFullYear"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"()"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"toYear"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#DCBDFB"},children:"addYears"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"new"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#DCBDFB"},children:"Date"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"(), "}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"3"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:")."}),(0,e.jsx)(l.span,{style:{color:"#DCBDFB"},children:"getFullYear"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"()"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" />"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" )"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"}"})})]})})})]}),` `,(0,e.jsxs)(l.h2,{id:"usage",children:[(0,e.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#usage",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"Usage"]}),` `,(0,e.jsxs)(l.p,{children:["DatePicker extends the ",(0,e.jsx)(l.a,{href:"/calendar",children:"Calendar"}),` component. All props from Calendar are available.`]}),` `,(0,e.jsxs)(l.p,{children:["To show the dropdowns to pick a month and year, set the ",(0,e.jsx)(l.code,{children:"toYear"})," and ",(0,e.jsx)(l.code,{children:"fromYear"}),` props.`]}),` `,(0,e.jsx)(l.figure,{"data-rehype-pretty-code-figure":"",children:(0,e.jsx)(l.pre,{style:{backgroundColor:"#22272e"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark-dimmed",children:(0,e.jsx)(l.code,{"data-language":"tsx","data-theme":"github-dark-dimmed",style:{display:"grid"},children:(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#8DDB8C"},children:"DatePicker"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"fromYear"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"2010"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"toYear"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"2020"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" />"})]})})})}),` `,(0,e.jsxs)(l.h3,{id:"datepicker",children:[(0,e.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#datepicker",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"DatePicker"]}),` `,(0,e.jsxs)(l.h3,{id:"daterangepicker",children:[(0,e.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#daterangepicker",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"DateRangePicker"]}),` `,(0,e.jsxs)(r,{src:"/src/components/examples/date-picker/date-range-picker.tsx",children:[(0,e.jsx)(c,{}),(0,e.jsx)(l.figure,{__src__:"/src/components/examples/date-picker/date-range-picker.tsx","data-rehype-pretty-code-figure":"",children:(0,e.jsx)(l.pre,{style:{backgroundColor:"#22272e"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark-dimmed",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"github-dark-dimmed",style:{display:"grid"},children:[(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:"'use client'"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" { DateRangePicker, "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"type"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" DateRange } "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:"'@nerdfish/ui'"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" { addDays, addYears } "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:"'date-fns'"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"*"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"as"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" React "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:"'react'"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#DCBDFB"},children:"DateRangePickerExample"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"() {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"date"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"setDate"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"] "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" React."}),(0,e.jsx)(l.span,{style:{color:"#DCBDFB"},children:"useState"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#F69D50"},children:"DateRange"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"|"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"undefined"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:">({"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" from: "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"new"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#DCBDFB"},children:"Date"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"2022"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"0"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"20"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"),"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" to: "}),(0,e.jsx)(l.span,{style:{color:"#DCBDFB"},children:"addDays"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"new"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#DCBDFB"},children:"Date"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"2022"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"0"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"20"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"), "}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"20"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"),"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" })"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#8DDB8C"},children:"DateRangePicker"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:'"p-3"'})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"selected"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"date"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"onSelect"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"setDate"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"fromYear"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#DCBDFB"},children:"addYears"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"new"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#DCBDFB"},children:"Date"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"(), "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"-"}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"3"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:")."}),(0,e.jsx)(l.span,{style:{color:"#DCBDFB"},children:"getFullYear"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"()"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"toYear"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#DCBDFB"},children:"addYears"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"new"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#DCBDFB"},children:"Date"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"(), "}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"3"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:")."}),(0,e.jsx)(l.span,{style:{color:"#DCBDFB"},children:"getFullYear"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"()"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" />"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" )"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"}"})})]})})})]}),` `,(0,e.jsxs)(l.h3,{id:"with-input",children:[(0,e.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#with-input",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"With input"]}),` `,(0,e.jsxs)(r,{src:"/src/components/examples/date-picker/with-input.tsx",children:[(0,e.jsx)(t,{}),(0,e.jsx)(l.figure,{__src__:"/src/components/examples/date-picker/with-input.tsx","data-rehype-pretty-code-figure":"",children:(0,e.jsx)(l.pre,{style:{backgroundColor:"#22272e"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark-dimmed",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"github-dark-dimmed",style:{display:"grid"},children:[(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:"'use client'"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" { DatePicker, Input } "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:"'@nerdfish/ui'"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" { addYears, format } "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:"'date-fns'"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" { Calendar } "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:"'lucide-react'"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"*"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"as"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" React "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:"'react'"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#DCBDFB"},children:"DatePickerWithInputExample"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"() {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"date"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"setDate"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"] "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" React."}),(0,e.jsx)(l.span,{style:{color:"#DCBDFB"},children:"useState"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#F69D50"},children:"Date"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"|"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"undefined"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:">("}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"new"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#DCBDFB"},children:"Date"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"())"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#8DDB8C"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:'"flex w-full gap-2"'}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#8DDB8C"},children:"DatePicker"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:'"p-3"'})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"selected"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"date"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"onSelect"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"setDate"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"fromYear"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#DCBDFB"},children:"addYears"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"new"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#DCBDFB"},children:"Date"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"(), "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"-"}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"120"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:")."}),(0,e.jsx)(l.span,{style:{color:"#DCBDFB"},children:"getFullYear"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"()"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"toYear"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"={new"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#DCBDFB"},children:"Date"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"()."}),(0,e.jsx)(l.span,{style:{color:"#DCBDFB"},children:"getFullYear"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"()"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" >"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#8DDB8C"},children:"Input"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"name"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:'"date"'})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"label"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:'"Date"'})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"placeholder"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:'"Date"'})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"icon"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"Calendar"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"date "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"?"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#DCBDFB"},children:"format"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"(date, "}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:"'yyyy-MM-dd'"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:"''"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"onChange"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#F69D50"},children:"e"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#DCBDFB"},children:"setDate"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"new"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#DCBDFB"},children:"Date"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"(e.target.value))"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"description"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:'"Your date of birth"'})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" />"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" )"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"}"})})]})})})]})]})}function k(n={}){let{wrapper:l}=n.components||{};return l?(0,e.jsx)(l,Object.assign({},n,{children:(0,e.jsx)(h,n)})):h(n)}var x=k;function o(n,l){throw new Error("Expected "+(l?"component":"object")+" `"+n+"` to be defined: you likely forgot to import, pass, or provide it.")}return g(b);})(); ;return Component;