{"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"]},"relativePagePath":"/components/date-picker/code.mdx","titleType":"prepend","MdxNode":{"id":"7f508638-4a88-58ed-a9d4-4884784e494d","children":[],"parent":"dbb6da55-624f-5d90-9541-077a8f25b482","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']\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":"2d840e1efe2d15fb2640d3b7f2e8c508","counter":1327,"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"]},"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']\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/3ed0734e/src/pages/components/date-picker/code.mdx"}}}}