text: (window.webpackJsonp=window.webpackJsonp||[]).push([[51],{1033:function(e,t,a){"use strict";var n=a(2),r=a.n(n),i=a(1030),l=a(183);t.a=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return Object(i.a)(e,r()({defaultTheme:l.a},t))}},1067:function(e,t,a){"use strict";a.d(t,"a",function(){return i});var n=a(488),r=a(183);function i(){return Object(n.a)()||r.a}},1723:function(e,t,a){"use strict";a.r(t);var n=a(0),r=a.n(n),i=a(1033),l=a(1006),c=Object(i.a)(function(e){return{container:{display:"flex",flexWrap:"wrap"},textField:{marginLeft:e.spacing(1),marginRight:e.spacing(1),width:200}}});t.default=function(){var e=c();return r.a.createElement("form",{className:e.container,noValidate:!0},r.a.createElement(l.a,{id:"date",label:"Birthday",type:"date",defaultValue:"2017-05-24",className:e.textField,InputLabelProps:{shrink:!0}}))}},1724:function(e,t){e.exports="import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport TextField from '@material-ui/core/TextField';\n\nconst useStyles = makeStyles(theme => ({\n  container: {\n    display: 'flex',\n    flexWrap: 'wrap',\n  },\n  textField: {\n    marginLeft: theme.spacing(1),\n    marginRight: theme.spacing(1),\n    width: 200,\n  },\n}));\n\nfunction DatePickers() {\n  const classes = useStyles();\n\n  return (\n    <form className={classes.container} noValidate>\n      <TextField\n        id=\"date\"\n        label=\"Birthday\"\n        type=\"date\"\n        defaultValue=\"2017-05-24\"\n        className={classes.textField}\n        InputLabelProps={{\n          shrink: true,\n        }}\n      />\n    </form>\n  );\n}\n\nexport default DatePickers;\n"},1725:function(e,t,a){"use strict";a.r(t);var n=a(0),r=a.n(n),i=a(1033),l=a(1006),c=Object(i.a)(function(e){return{container:{display:"flex",flexWrap:"wrap"},textField:{marginLeft:e.spacing(1),marginRight:e.spacing(1),width:200}}});t.default=function(){var e=c();return r.a.createElement("form",{className:e.container,noValidate:!0},r.a.createElement(l.a,{id:"datetime-local",label:"Next appointment",type:"datetime-local",defaultValue:"2017-05-24T10:30",className:e.textField,InputLabelProps:{shrink:!0}}))}},1726:function(e,t){e.exports="import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport TextField from '@material-ui/core/TextField';\n\nconst useStyles = makeStyles(theme => ({\n  container: {\n    display: 'flex',\n    flexWrap: 'wrap',\n  },\n  textField: {\n    marginLeft: theme.spacing(1),\n    marginRight: theme.spacing(1),\n    width: 200,\n  },\n}));\n\nfunction DateAndTimePickers() {\n  const classes = useStyles();\n\n  return (\n    <form className={classes.container} noValidate>\n      <TextField\n        id=\"datetime-local\"\n        label=\"Next appointment\"\n        type=\"datetime-local\"\n        defaultValue=\"2017-05-24T10:30\"\n        className={classes.textField}\n        InputLabelProps={{\n          shrink: true,\n        }}\n      />\n    </form>\n  );\n}\n\nexport default DateAndTimePickers;\n"},1727:function(e,t,a){"use strict";a.r(t);var n=a(0),r=a.n(n),i=a(1033),l=a(1006),c=Object(i.a)(function(e){return{container:{display:"flex",flexWrap:"wrap"},textField:{marginLeft:e.spacing(1),marginRight:e.spacing(1),width:200}}});t.default=function(){var e=c();return r.a.createElement("form",{className:e.container,noValidate:!0},r.a.createElement(l.a,{id:"time",label:"Alarm clock",type:"time",defaultValue:"07:30",className:e.textField,InputLabelProps:{shrink:!0},inputProps:{step:300}}))}},1728:function(e,t){e.exports="import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport TextField from '@material-ui/core/TextField';\n\nconst useStyles = makeStyles(theme => ({\n  container: {\n    display: 'flex',\n    flexWrap: 'wrap',\n  },\n  textField: {\n    marginLeft: theme.spacing(1),\n    marginRight: theme.spacing(1),\n    width: 200,\n  },\n}));\n\nfunction TimePickers() {\n  const classes = useStyles();\n\n  return (\n    <form className={classes.container} noValidate>\n      <TextField\n        id=\"time\"\n        label=\"Alarm clock\"\n        type=\"time\"\n        defaultValue=\"07:30\"\n        className={classes.textField}\n        InputLabelProps={{\n          shrink: true,\n        }}\n        inputProps={{\n          step: 300, // 5 min\n        }}\n      />\n    </form>\n  );\n}\n\nexport default TimePickers;\n"},1729:function(e,t,a){"use strict";a.r(t);var n=a(15),r=a(0),i=a.n(r),l=a(1068),c=a(1033),s=a(1224),m=a(1225),o=Object(c.a)({grid:{width:"60%"}});t.default=function(){var e=i.a.useState(new Date("2014-08-18T21:11:54")),t=Object(n.a)(e,2),a=t[0],r=t[1],c=o();function d(e){r(e)}return i.a.createElement(m.MuiPickersUtilsProvider,{utils:s.default},i.a.createElement(l.a,{container:!0,className:c.grid,justify:"space-around"},i.a.createElement(m.KeyboardDatePicker,{margin:"normal",label:"Date picker",value:a,onChange:d}),i.a.createElement(m.KeyboardTimePicker,{margin:"normal",label:"Time picker",value:a,onChange:d})))}},1730:function(e,t){e.exports="import 'date-fns';\nimport React from 'react';\nimport Grid from '@material-ui/core/Grid';\nimport { makeStyles } from '@material-ui/core/styles';\nimport DateFnsUtils from '@date-io/date-fns';\nimport {\n  MuiPickersUtilsProvider,\n  KeyboardTimePicker,\n  KeyboardDatePicker,\n} from '@material-ui/pickers';\n\nconst useStyles = makeStyles({\n  grid: {\n    width: '60%',\n  },\n});\n\nfunction MaterialUIPickers() {\n  // The first commit of Material-UI\n  const [selectedDate, setSelectedDate] = React.useState(new Date('2014-08-18T21:11:54'));\n\n  const classes = useStyles();\n\n  function handleDateChange(date) {\n    setSelectedDate(date);\n  }\n\n  return (\n    <MuiPickersUtilsProvider utils={DateFnsUtils}>\n      <Grid container className={classes.grid} justify=\"space-around\">\n        <KeyboardDatePicker\n          margin=\"normal\"\n          label=\"Date picker\"\n          value={selectedDate}\n          onChange={handleDateChange}\n        />\n        <KeyboardTimePicker\n          margin=\"normal\"\n          label=\"Time picker\"\n          value={selectedDate}\n          onChange={handleDateChange}\n        />\n      </Grid>\n    </MuiPickersUtilsProvider>\n  );\n}\n\nexport default MaterialUIPickers;\n"},2176:function(e,t,a){"use strict";a.r(t);var n=a(0),r=a.n(n),i=a(12),l=a(992),c=a(124),s=a(1010),m=a(1030),o=Object(m.a)(function(e){return{layoutRoot:{"& .description":{marginBottom:16}}}});t.default=function(e){var t=o();return r.a.createElement(i.s,{classes:{root:t.layoutRoot},header:r.a.createElement("div",{className:"flex flex-1 items-center justify-between p-24"},r.a.createElement("div",{className:"flex flex-col"},r.a.createElement("div",{className:"flex items-center mb-16"},r.a.createElement(l.a,{className:"text-18",color:"action"},"home"),r.a.createElement(l.a,{className:"text-16",color:"action"},"chevron_right"),r.a.createElement(c.a,{color:"textSecondary"},"Documentation"),r.a.createElement(l.a,{className:"text-16",color:"action"},"chevron_right"),r.a.createElement(c.a,{color:"textSecondary"},"Material UI Components")),r.a.createElement(c.a,{variant:"h6"},"Pickers")),r.a.createElement(s.a,{className:"normal-case",variant:"contained",component:"a",href:"https://material-ui.com/components/pickers",target:"_blank"},r.a.createElement(l.a,{className:"mr-4"},"link"),"Reference")),content:r.a.createElement("div",{className:"p-24 max-w-2xl"},r.a.createElement(c.a,{className:"text-44 mt-32 mb-8",component:"h1"},"Pickers"),r.a.createElement(c.a,{className:"description"},"Pickers provide a simple way to select a single value from a pre-determined set."),r.a.createElement("ul",null,r.a.createElement("li",null,"On mobile, pickers are best suited for display in confirmation dialog."),r.a.createElement("li",null,"For inline display, such as on a form, consider using compact controls such as segmented dropdown buttons.")),r.a.createElement(c.a,{className:"text-32 mt-32 mb-8",component:"h2"},"Native pickers"),r.a.createElement(c.a,{className:"mb-16",component:"div"},"\u26a0\ufe0f Native input controls support by browsers ",r.a.createElement("a",{href:"https://caniuse.com/#feat=input-datetime"},"isn't perfect"),". Have a look at the ",r.a.createElement("a",{href:"#complementary-projects"},"complementary projects")," for a richer solution."),r.a.createElement(c.a,{className:"text-24 mt-32 mb-8",component:"h3"},"Date pickers"),r.a.createElement(c.a,{className:"mb-16",component:"div"},"A native date picker example with ",r.a.createElement("code",null,"type=&quot;date&quot;"),"."),r.a.createElement(c.a,{className:"mb-16",component:"div"},r.a.createElement(i.j,{className:"my-24",iframe:!1,component:a(1723).default,raw:a(1724)})),r.a.createElement(c.a,{className:"text-24 mt-32 mb-8",component:"h3"},"Date & Time pickers"),r.a.createElement(c.a,{className:"mb-16",component:"div"},"A native date & time picker example with ",r.a.createElement("code",null,"type=&quot;datetime-local&quot;"),"."),r.a.createElement(c.a,{className:"mb-16",component:"div"},r.a.createElement(i.j,{className:"my-24",iframe:!1,component:a(1725).default,raw:a(1726)})),r.a.createElement(c.a,{className:"text-24 mt-32 mb-8",component:"h3"},"Time pickers"),r.a.createElement(c.a,{className:"mb-16",component:"div"},"A native time picker example with ",r.a.createElement("code",null,"type=&quot;time&quot;"),"."),r.a.createElement(c.a,{className:"mb-16",component:"div"},r.a.createElement(i.j,{className:"my-24",iframe:!1,component:a(1727).default,raw:a(1728)})),r.a.createElement(c.a,{className:"text-32 mt-32 mb-8",component:"h2"},"Complementary projects"),r.a.createElement(c.a,{className:"mb-16",component:"div"},"For more advanced use cases you might be able to take advantage of."),r.a.createElement(c.a,{className:"text-24 mt-32 mb-8",component:"h3"},"@material-ui/pickers"),r.a.createElement(c.a,{className:"mb-16",component:"div"},' src="https://img.shields.io/github/stars/mui-org/material-ui-pickers.svg?style=social&label=Stars" alt="stars/> src="https://img.shields.io/npm/dm/@material-ui/pickers.svg" alt="npm downloads/>'),r.a.createElement(c.a,{className:"mb-16",component:"div"},r.a.createElement("a",{href:"https://material-ui-pickers.dev/"},"@material-ui/pickers")," provides date and time controls that follow the Material Design spec."),r.a.createElement(c.a,{className:"mb-16",component:"div"},r.a.createElement(i.j,{className:"my-24",iframe:!1,component:a(1729).default,raw:a(1730)})))})}}}]);