{"componentChunkName":"component---src-pages-components-date-picker-code-mdx","path":"/components/date-picker/code/","result":{"pageContext":{"isCreatedByStatefulCreatePages":true,"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":"f67c3452-16a3-58a7-b7b5-a96bf469f03d","children":[],"parent":"91a46d40-2129-547d-b932-2fcb3d59c7ef","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":"2c1d6b0733bd2099b451159a4efed8bf","counter":1435,"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/4ebe1d4/src/pages/components/date-picker/code.mdx"}}}}