{"componentChunkName":"component---src-pages-components-date-picker-code-mdx","path":"/components/date-picker/code/","webpackCompilationHash":"9a5cb62a61994334ab3f","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":"3ecc4a1e-1bc8-564e-9745-658be28a7880","children":[],"parent":"3f6acbc1-c43c-5cb4-82b9-586201a86e7b","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":"783b4eb8be2413babdd030abf848941b","counter":1177,"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":"/tmp/35443907/src/pages/components/date-picker/code.mdx"}}}}