{"componentChunkName":"component---src-pages-components-date-picker-code-mdx","path":"/components/date-picker/code/","result":{"pageContext":{"frontmatter":{"title":"Date picker","description":"Date and time pickers allow users to select a single or a range of dates and times.","tabs":["Code","Usage","Style","Accessibility"]},"relativePagePath":"/components/date-picker/code.mdx","titleType":"prepend","MdxNode":{"id":"3372403e-4794-5e1d-a4e1-8ef15a5a37e3","children":[],"parent":"60d69985-0aa6-58e8-b19b-c8aedd30d816","internal":{"content":"---\ntitle: Date picker\ndescription: Date and time pickers allow users to select a single or a range of dates and times.\ntabs: ['Code', 'Usage', 'Style', 'Accessibility']\n---\n\n## Simple date picker\n\n<ComponentCode\n  name=\"Simple date picker\"\n  component=\"date-picker\"\n  variation=\"date-picker\"\n  hasLightVersion\n  hasReactVersion=\"datepicker--simple\"\n  hasVueVersion=\"datepicker--simple\"\n  hasAngularVersion=\"?path=/story/datepickerinput--simple\"\n  codepen=\"ZZQbVV\"></ComponentCode>\n\n## Single date picker\n\n<ComponentCode\n  name=\"Single date picker\"\n  component=\"date-picker\"\n  variation=\"date-picker--single\"\n  hasLightVersion\n  hasReactVersion=\"datepicker--single-with-calendar\"\n  hasVueVersion=\"datepicker--single\"\n  hasAngularVersion=\"?path=/story/date-picker--single\"\n  codepen=\"ZZQbPw\"></ComponentCode>\n\n## Range date picker\n\n<ComponentCode\n  name=\"Range date picker\"\n  component=\"date-picker\"\n  variation=\"date-picker--range\"\n  hasLightVersion\n  hasReactVersion=\"datepicker--range-with-calendar\"\n  hasVueVersion=\"datepicker--range-with-calendar\"\n  hasAngularVersion=\"?path=/story/date-picker--range\"\n  codepen=\"yreYrQ\"></ComponentCode>\n\n## Single no label date picker\n\n<ComponentCode\n  name=\"Single no label date picker\"\n  component=\"date-picker\"\n  variation=\"date-picker--single-no-label\"\n  hasLightVersion\n  hasReactVersion=\"datepicker--single-with-calendar\"\n  codepen=\"OGMMGr\"></ComponentCode>\n\n## Time picker\n\n<ComponentCode\n  name=\"Time picker\"\n  component=\"time-picker\"\n  variation=\"time-picker\"\n  hasLightVersion\n  hasReactVersion=\"timepicker--default\"\n  hasVueVersion=\"timepicker--default\"\n  codepen=\"jRWqNO\"></ComponentCode>\n\n## Documentation\n\n<ComponentDocs component=\"date-picker\"></ComponentDocs>\n","type":"Mdx","contentDigest":"696e36327c12b36b7a9d805deb104359","counter":1504,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Date picker","description":"Date and time pickers allow users to select a single or a range of dates and times.","tabs":["Code","Usage","Style","Accessibility"]},"exports":{},"rawBody":"---\ntitle: Date picker\ndescription: Date and time pickers allow users to select a single or a range of dates and times.\ntabs: ['Code', 'Usage', 'Style', 'Accessibility']\n---\n\n## Simple date picker\n\n<ComponentCode\n  name=\"Simple date picker\"\n  component=\"date-picker\"\n  variation=\"date-picker\"\n  hasLightVersion\n  hasReactVersion=\"datepicker--simple\"\n  hasVueVersion=\"datepicker--simple\"\n  hasAngularVersion=\"?path=/story/datepickerinput--simple\"\n  codepen=\"ZZQbVV\"></ComponentCode>\n\n## Single date picker\n\n<ComponentCode\n  name=\"Single date picker\"\n  component=\"date-picker\"\n  variation=\"date-picker--single\"\n  hasLightVersion\n  hasReactVersion=\"datepicker--single-with-calendar\"\n  hasVueVersion=\"datepicker--single\"\n  hasAngularVersion=\"?path=/story/date-picker--single\"\n  codepen=\"ZZQbPw\"></ComponentCode>\n\n## Range date picker\n\n<ComponentCode\n  name=\"Range date picker\"\n  component=\"date-picker\"\n  variation=\"date-picker--range\"\n  hasLightVersion\n  hasReactVersion=\"datepicker--range-with-calendar\"\n  hasVueVersion=\"datepicker--range-with-calendar\"\n  hasAngularVersion=\"?path=/story/date-picker--range\"\n  codepen=\"yreYrQ\"></ComponentCode>\n\n## Single no label date picker\n\n<ComponentCode\n  name=\"Single no label date picker\"\n  component=\"date-picker\"\n  variation=\"date-picker--single-no-label\"\n  hasLightVersion\n  hasReactVersion=\"datepicker--single-with-calendar\"\n  codepen=\"OGMMGr\"></ComponentCode>\n\n## Time picker\n\n<ComponentCode\n  name=\"Time picker\"\n  component=\"time-picker\"\n  variation=\"time-picker\"\n  hasLightVersion\n  hasReactVersion=\"timepicker--default\"\n  hasVueVersion=\"timepicker--default\"\n  codepen=\"jRWqNO\"></ComponentCode>\n\n## Documentation\n\n<ComponentDocs component=\"date-picker\"></ComponentDocs>\n","fileAbsolutePath":"/zeit/1dde86ed/src/pages/components/date-picker/code.mdx"}}}}