var Component=(()=>{var m=Object.create;var c=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var D=Object.getPrototypeOf,P=Object.prototype.hasOwnProperty;var g=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),f=(t,e)=>{for(var a in e)c(t,a,{get:e[a],enumerable:!0})},l=(t,e,a,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of p(e))!P.call(t,r)&&r!==a&&c(t,r,{get:()=>e[r],enumerable:!(i=k(e,r))||i.enumerable});return t};var C=(t,e,a)=>(a=t!=null?m(D(t)):{},l(e||!t||!t.__esModule?c(a,"default",{value:t,enumerable:!0}):a,t)),x=t=>l(c({},"__esModule",{value:!0}),t);var d=g((T,o)=>{o.exports=_jsx_runtime});var S={};f(S,{default:()=>u,frontmatter:()=>w});var n=C(d()),w={id:"date-picker-static",title:"DatePicker",description:"Allow users to select a Date and Time value."};function s(t){let e={a:"a",code:"code",h2:"h2",h3:"h3",li:"li",p:"p",pre:"pre",ul:"ul",...t.components},{ComponentLinks:a,Info:i}=e;return a||h("ComponentLinks",!0),i||h("Info",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(a,{github:{package:"saas-ui-date-picker"},npm:{package:"@saas-ui/date-picker"},theme:{componentName:"date-picker"},beta:!0}),` `,(0,n.jsx)(i,{children:(0,n.jsx)(e.p,{children:`The DatePicker is currently in beta, we'd love to hear your feedback while we finalize the API.`})}),` `,(0,n.jsx)(e.h2,{children:"Import"}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:"DatePickerStatic"}),": The container component that manages state and context."]}),` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:"DatePickerCalendar"}),": Calender showing available months and days."]}),` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:"DatePickerTimeField"}),": Time field to allow users enter a time."]}),` `]}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-ts",children:`import { DatePickerStatic, DatePickerCalendar, DatePickerTimeField, } from '@saas-ui/date-picker' `})}),` `,(0,n.jsx)(e.h2,{children:"Usage"}),` `,(0,n.jsx)(i,{children:(0,n.jsxs)(e.p,{children:[`The DatePicker uses `,(0,n.jsx)(e.a,{href:"https://react-spectrum.adobe.com/internationalized/date/",children:"@internationalized/date"}),` to represent and manipulate dates. `,(0,n.jsx)(e.a,{href:"https://react-spectrum.adobe.com/internationalized/date/",children:`Check out the documentation`}),` to learn how to work with Date objects.`]})}),` `,(0,n.jsx)(e.h3,{children:"Basic"}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",center:"true",children:` `})}),` `,(0,n.jsx)(e.h3,{children:"With time"}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",center:"true",children:` `})}),` `,(0,n.jsx)(e.h3,{children:"With 24 hour time"}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",center:"true",children:` `})}),` `,(0,n.jsx)(e.h3,{children:"Controlled"}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",center:"true",children:`function ControlledPicker() { const [value, setValue] = React.useState(today(getLocalTimeZone())) return ( ) } `})}),` `,(0,n.jsx)(e.h3,{children:"Controlled with zoned time"}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",center:"true",children:`function ControlledPicker() { const [value, setValue] = React.useState(now(getLocalTimeZone())) return ( ) } `})})]})}function u(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(s,{...t})}):s(t)}function h(t,e){throw new Error("Expected "+(e?"component":"object")+" `"+t+"` to be defined: you likely forgot to import, pass, or provide it.")}return x(S);})(); ;return Component;