(this["webpackJsonpmaterial-app"]=this["webpackJsonpmaterial-app"]||[]).push([[18],{3814:function(e,t,a){"use strict";a.r(t);var n=a(5),c=a(1),r=a.n(c),i=a(11),s=a(15),o=a(3710),j=a(2636),l=a(3689),b=a(227),d=a(3711),h=a(179),p=a(180),u=a(3715),x=a(3691),m=a(4063),O=a(3815),g=a(4064),v=a(3816),k=a(4065),y=a(3817),B=a(48),f=a(0);const S=Object(n.e)(o.a)(B.c),T=Object(n.e)(j.a)(B.c),w=Object(n.e)(l.a)(B.c),I=Object(n.e)(b.a)(B.c);function C(){const[e,t]=r.a.useState(null);return Object(f.jsx)(S,{mb:6,children:Object(f.jsxs)(d.a,{children:[Object(f.jsx)(h.a,{variant:"h6",gutterBottom:!0,children:"Date picker"}),Object(f.jsx)(h.a,{variant:"body2",gutterBottom:!0,children:"The date picker is rendered as a modal dialog on mobile, and a textbox with a popup on desktop."}),Object(f.jsx)(I,{mt:3,children:Object(f.jsx)(m.a,{label:"Basic example",value:e,onChange:e=>{t(e)},renderInput:e=>Object(f.jsx)(p.a,{...e})})})]})})}function D(){const[e,t]=r.a.useState(null);return Object(f.jsx)(S,{mb:6,children:Object(f.jsxs)(d.a,{children:[Object(f.jsx)(h.a,{variant:"h6",gutterBottom:!0,children:"Date picker | Static mode"}),Object(f.jsx)(h.a,{variant:"body2",gutterBottom:!0,children:"It's possible to render any date picker without the modal/popover and text field. This can be helpful when building custom popover/modal containers."}),Object(f.jsx)(I,{mt:3,children:Object(f.jsx)(O.a,{displayStaticWrapperAs:"desktop",openTo:"year",value:e,onChange:e=>{t(e)},renderInput:e=>Object(f.jsx)(p.a,{...e})})})]})})}function P(){const[e,t]=r.a.useState(null);return Object(f.jsx)(S,{mb:6,children:Object(f.jsxs)(d.a,{children:[Object(f.jsx)(h.a,{variant:"h6",gutterBottom:!0,children:"Date time picker"}),Object(f.jsx)(h.a,{variant:"body2",gutterBottom:!0,children:"It's possible to render any date picker without the modal/popover and text field. This can be helpful when building custom popover/modal containers."}),Object(f.jsx)(I,{mt:3,children:Object(f.jsx)(g.a,{renderInput:e=>Object(f.jsx)(p.a,{...e}),label:"DateTimePicker",value:e,onChange:e=>{t(e)}})})]})})}function A(){const[e,t]=r.a.useState(null);return Object(f.jsx)(S,{mb:6,children:Object(f.jsxs)(d.a,{children:[Object(f.jsx)(h.a,{variant:"h6",gutterBottom:!0,children:"Date time picker | Static mode"}),Object(f.jsx)(h.a,{variant:"body2",gutterBottom:!0,children:"It's possible to render any date & time picker inline. This will enable building custom popover/modal containers."}),Object(f.jsx)(I,{mt:3,children:Object(f.jsx)(v.a,{displayStaticWrapperAs:"desktop",openTo:"year",value:e,onChange:e=>{t(e)},renderInput:e=>Object(f.jsx)(p.a,{...e})})})]})})}function W(){const[e,t]=r.a.useState(null);return Object(f.jsx)(S,{mb:6,children:Object(f.jsxs)(d.a,{children:[Object(f.jsx)(h.a,{variant:"h6",gutterBottom:!0,children:"Time picker"}),Object(f.jsx)(h.a,{variant:"body2",gutterBottom:!0,children:"The date picker is rendered as a modal dialog on mobile, and a textbox with a popup on desktop."}),Object(f.jsx)(I,{mt:3,children:Object(f.jsx)(k.a,{label:"Basic example",value:e,onChange:e=>{t(e)},renderInput:e=>Object(f.jsx)(p.a,{...e})})})]})})}function F(){const[e,t]=r.a.useState(null);return Object(f.jsx)(S,{mb:6,children:Object(f.jsxs)(d.a,{children:[Object(f.jsx)(h.a,{variant:"h6",gutterBottom:!0,children:"Time picker | Static mode"}),Object(f.jsx)(h.a,{variant:"body2",gutterBottom:!0,children:"It's possible to render any time picker inline. This will enable building custom popover/modal containers."}),Object(f.jsx)(I,{mt:3,children:Object(f.jsx)(y.a,{displayStaticWrapperAs:"mobile",value:e,onChange:e=>{t(e)},renderInput:e=>Object(f.jsx)(p.a,{...e})})})]})})}t.default=function(){return Object(f.jsxs)(r.a.Fragment,{children:[Object(f.jsx)(s.a,{title:"Pickers"}),Object(f.jsx)(h.a,{variant:"h3",gutterBottom:!0,display:"inline",children:"Pickers"}),Object(f.jsxs)(w,{"aria-label":"Breadcrumb",mt:2,children:[Object(f.jsx)(u.a,{component:i.c,to:"/",children:"Dashboard"}),Object(f.jsx)(u.a,{component:i.c,to:"/",children:"Forms"}),Object(f.jsx)(h.a,{children:"Pickers"})]}),Object(f.jsx)(T,{my:6}),Object(f.jsxs)(x.a,{container:!0,spacing:6,children:[Object(f.jsxs)(x.a,{item:!0,xs:12,md:6,children:[Object(f.jsx)(C,{}),Object(f.jsx)(P,{}),Object(f.jsx)(W,{})]}),Object(f.jsxs)(x.a,{item:!0,xs:12,md:6,children:[Object(f.jsx)(D,{}),Object(f.jsx)(A,{}),Object(f.jsx)(F,{})]})]})]})}}}]);
//# sourceMappingURL=18.49612b6c.chunk.js.map