https://mattermost-proto-playground-elias.vercel.app/assets/date-range-picker.guideline-BiE8SApw.js

1import{cd as h,ce as e,d5 as s}from"./index-C84RuTgJ.js";function l(t){const n={a:"a",code:"code",h2:"h2",li:"li",p:"p",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...h(),...t.components},{AnatomyStage:a,Divider:r,Num:d}=n;return a||i("AnatomyStage"),r||i("Divider"),d||i("Num"),e.jsxs(e.Fragment,{children:[e.jsx(n.p,{children:`The Date and Range Picker lets people pick a single date or a start/end
2range from a calendar. The trigger is a compact field; the calendar is a
3popover anchored 4px below it.`}),`
4`,e.jsx(n.p,{children:`Use it in scheduling, filtering, and reporting flows — anywhere a precise
5calendar date matters more than typing a string. For relative ranges
6("last 7 days"), pair the picker with a Select of presets.`}),`
7`,e.jsx(r,{}),`
8`,e.jsx(n.h2,{id:"anatomy",children:e.jsx(n.a,{href:"#anatomy",children:"Anatomy"})}),`
9`,e.jsxs(n.ul,{children:[`
10`,e.jsxs(n.li,{children:[e.jsx(d,{children:"1"})," ",e.jsx(n.strong,{children:"Trigger"}),` — input-style field with a calendar icon, the
11current value (or `,e.jsx(n.code,{children:"mm/dd/yyyy"})," placeholder), and a chevron."]}),`
12`,e.jsxs(n.li,{children:[e.jsx(d,{children:"2"})," ",e.jsx(n.strong,{children:"Month header"}),` — the displayed month and year, plus
13previous/next navigation and a Today shortcut.`]}),`
14`,e.jsxs(n.li,{children:[e.jsx(d,{children:"3"})," ",e.jsx(n.strong,{children:"Day grid"})," — seven-column grid with weekday headers."]}),`
15`,e.jsxs(n.li,{children:[e.jsx(d,{children:"4"})," ",e.jsx(n.strong,{children:"Date cells"}),` — each day with hover, selected, in-range, and
16today states.`]}),`
17`]}),`
18`,e.jsx(a,{children:e.jsx("div",{style:{width:"100%",maxWidth:"320px"},children:e.jsx(s,{})})}),`
19`,e.jsx(r,{}),`
20`,e.jsx(n.h2,{id:"modes",children:e.jsx(n.a,{href:"#modes",children:"Modes"})}),`
21`,e.jsx(n.p,{children:"Two selection modes:"}),`
22`,e.jsxs(n.table,{children:[e.jsx(n.thead,{children:e.jsxs(n.tr,{children:[e.jsx(n.th,{children:"Mode"}),e.jsx(n.th,{children:"Use when"})]})}),e.jsxs(n.tbody,{children:[e.jsxs(n.tr,{children:[e.jsx(n.td,{children:e.jsx(n.code,{children:"date"})}),e.jsx(n.td,{children:"Single point in time — due date, scheduled send, birthday."})]}),e.jsxs(n.tr,{children:[e.jsx(n.td,{children:e.jsx(n.code,{children:"range"})}),e.jsx(n.td,{children:"A start-and-end window — report range, leave dates, event window."})]})]})]}),`
23`,e.jsx(n.p,{children:`In range mode the first click sets the start, the second sets the end. Days
24between the two are highlighted as in-range. A third click starts a new
25range from scratch.`}),`
26`,e.jsxs("div",{style:{display:"flex",gap:"1rem",flexWrap:"wrap"},children:[e.jsx("div",{style:{maxWidth:"320px",flex:"1 1 240px"},children:e.jsx(s,{mode:"date"})}),e.jsx("div",{style:{maxWidth:"320px",flex:"1 1 240px"},children:e.jsx(s,{mode:"range"})})]}),`
27`,e.jsx(r,{}),`
28`,e.jsx(n.h2,{id:"day-states",children:e.jsx(n.a,{href:"#day-states",children:"Day states"})}),`
29`,e.jsxs(n.table,{children:[e.jsx(n.thead,{children:e.jsxs(n.tr,{children:[e.jsx(n.th,{children:"State"}),e.jsx(n.th,{children:"Treatment"})]})}),e.jsxs(n.tbody,{children:[e.jsxs(n.tr,{children:[e.jsx(n.td,{children:"Available"}),e.jsx(n.td,{children:"Default day. Hover shows a soft background."})]}),e.jsxs(n.tr,{children:[e.jsx(n.td,{children:"Today"}),e.jsx(n.td,{children:"Carries a today indicator until selected."})]}),e.jsxs(n.tr,{children:[e.jsx(n.td,{children:"Selected"}),e.jsx(n.td,{children:"Filled day cell. End-cap shape in range mode."})]}),e.jsxs(n.tr,{children:[e.jsx(n.td,{children:"In range"}),e.jsx(n.td,{children:"Soft connector fill between the two range endpoints."})]}),e.jsxs(n.tr,{children:[e.jsx(n.td,{children:"Unavailable"}),e.jsx(n.td,{children:"Dimmed and non-interactive. Used for disabled dates."})]})]})]}),`
30`,e.jsx(r,{}),`
31`,e.jsx(n.h2,{id:"behavior",children:e.jsx(n.a,{href:"#behavior",children:"Behavior"})}),`
32`,e.jsxs(n.ul,{children:[`
33`,e.jsx(n.li,{children:`The popover opens 4px below the trigger and dismisses on outside click,
34Escape, or selection.`}),`
35`,e.jsx(n.li,{children:`The Today shortcut returns the calendar view to the current month and
36year — it doesn't select today.`}),`
37`,e.jsx(n.li,{children:`Keep the picker keyboard-operable: Enter or Space toggles the popover from
38the trigger; arrow keys move focus through the day grid.`}),`
39`]}),`
40`,e.jsx(r,{}),`
41`,e.jsx(n.h2,{id:"implementation",children:e.jsx(n.a,{href:"#implementation",children:"Implementation"})}),`
42`,e.jsxs(n.p,{children:[`For props, variants, and copy-ready examples, see the
43`,e.jsx(n.a,{href:"/components/date-range-picker/specimen",children:"Date Range Picker specimen page"}),"."]})]})}function o(t={}){const{wrapper:n}={...h(),...t.components};return n?e.jsx(n,{...t,children:e.jsx(l,{...t})}):l(t)}function i(t,n){throw new Error("Expected component `"+t+"` to be defined: you likely forgot to import, pass, or provide it.")}export{o as default};