var Component=(()=>{var s=Object.create;var i=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var D=Object.getPrototypeOf,k=Object.prototype.hasOwnProperty;var f=(a,e)=>()=>(e||a((e={exports:{}}).exports,e),e.exports),R=(a,e)=>{for(var t in e)i(a,t,{get:e[t],enumerable:!0})},l=(a,e,t,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of g(e))!k.call(a,o)&&o!==t&&i(a,o,{get:()=>e[o],enumerable:!(r=p(e,o))||r.enumerable});return a};var C=(a,e,t)=>(t=a!=null?s(D(a)):{},l(e||!a||!a.__esModule?i(t,"default",{value:a,enumerable:!0}):t,a)),F=a=>l(i({},"__esModule",{value:!0}),a);var u=f((I,c)=>{c.exports=_jsx_runtime});var P={};R(P,{default:()=>h,frontmatter:()=>x});var n=C(u()),x={id:"date-range-input",title:"DateRangeInput",description:"Allow users to enter or select a Date and Time range."};function d(a){let e={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",li:"li",p:"p",pre:"pre",ul:"ul",...a.components},{ComponentLinks:t,Info:r}=e;return t||m("ComponentLinks",!0),r||m("Info",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t,{github:{package:"saas-ui-date-picker"},npm:{package:"@saas-ui/date-picker"},theme:{componentName:"date-picker"},beta:!0}),` `,(0,n.jsx)(r,{children:(0,n.jsx)(e.p,{children:`The DateRangeInput 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:"DateRangePicker"}),": The container component that manages state and context."]}),` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:"DateRangePickerInput"}),": A date range form input."]}),` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:"DateRangePickerDialog"}),": A dialog that contains a calendar and time picker."]}),` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:"DateRangePickerCalendar"}),": A calendar that allows users to select a date range."]}),` `]}),` `,(0,n.jsx)(e.h1,{}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:"DateRangeInput"}),": A composite component that composes the above components."]}),` `]}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-ts",children:`import { DateRangePicker DateRangePickerInput, DateRangePickerDialog, DateRangePickerCalendar, DateRangeInput } from '@saas-ui/date-picker' `})}),` `,(0,n.jsx)(e.h2,{children:"Usage"}),` `,(0,n.jsx)(r,{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",height:"420px",children:`import { FormControl, FormLabel } from '@chakra-ui/react' import { DateRangeInput } from '@saas-ui/date-picker' export default function Basic() { return ( Dates ) } `})}),` `,(0,n.jsx)(e.h3,{children:"DateTime"}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",height:"420px",children:`import { FormControl, FormLabel } from '@chakra-ui/react' import { DateRangeInput } from '@saas-ui/date-picker' export default function DateTime() { return ( Dates ) } `})}),` `,(0,n.jsx)(e.h3,{children:"With 24 hour time"}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",height:"420px",children:`import { FormControl, FormLabel } from '@chakra-ui/react' import { DateRangeInput } from '@saas-ui/date-picker' export default function HourCycle() { return ( Dates and time ) } `})}),` `,(0,n.jsx)(e.h3,{children:"Controlled"}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",height:'"420px"',children:`import { FormControl, FormLabel } from '@chakra-ui/react' import { DateRangeInput } from '@saas-ui/date-picker' export default function ControlledPicker() { const [value, setValue] = React.useState({ start: today(getLocalTimeZone()), end: null, }) return } `})}),` `,(0,n.jsx)(e.h3,{children:"Time zone"}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",height:'"420px"',children:`import { FormControl, FormLabel } from '@chakra-ui/react' import { DateRangeInput } from '@saas-ui/date-picker' export default function ControlledPicker() { const [value, setValue] = React.useState({ start: now(getLocalTimeZone()), end: null, }) return ( ) } `})}),` `,(0,n.jsx)(e.h3,{children:"Hide time zone"}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",height:'"420px"',children:`import { FormControl, FormLabel } from '@chakra-ui/react' import { DateRangeInput } from '@saas-ui/date-picker' export default function ControlledPicker() { const [value, setValue] = React.useState({ start: now(getLocalTimeZone()), end: null, }) return ( ) } `})}),` `,(0,n.jsx)(e.h3,{children:"Composed"}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",height:'"420px"',children:`import { FormControl, FormLabel } from '@chakra-ui/react' import { DateRangePicker, DateRangeInput, DateRangePickerDialog, DateRangePickerCalendar, } from '@saas-ui/date-picker' export default function Composed() { return ( Dates ) } `})}),` `,(0,n.jsx)(e.h3,{children:"Portal"}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",height:'"420px"',children:`import { FormControl, FormLabel, Portal } from '@chakra-ui/react' import { DateRangePicker, DateRangeInput, DateRangePickerDialog, DateRangePickerCalendar, } from '@saas-ui/date-picker' export default function WithPortal() { return ( Dates ) } `})})]})}function h(a={}){let{wrapper:e}=a.components||{};return e?(0,n.jsx)(e,{...a,children:(0,n.jsx)(d,{...a})}):d(a)}function m(a,e){throw new Error("Expected "+(e?"component":"object")+" `"+a+"` to be defined: you likely forgot to import, pass, or provide it.")}return F(P);})(); ;return Component;