{"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":"d83e229a-0ad7-5983-b859-9b4fac781112","children":[],"parent":"daf35a2f-34be-5780-9c48-ebaa2c1cca01","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## Default\n\n<ComponentDemo\n  knobs={{\n    DatePicker: ['light'],\n  }}\n  links={{\n    React:\n      'https://react.carbondesignsystem.com/?path=/story/datepicker--simple',\n    Angular:\n      'https://angular.carbondesignsystem.com/?path=/story/components-date-picker--simple',\n    Vue:\n      'http://vue.carbondesignsystem.com/?path=/story/components-cvdatepicker--default',\n    Vanilla: 'https://the-carbon-components.netlify.com/?nav=date-picker',\n  }}>{`<DatePicker dateFormat=\"m/d/Y\" datePickerType=\"simple\">\n  <DatePickerInput\n    id=\"date-picker-default-id\"\n    placeholder=\"mm/dd/yyyy\"\n    labelText=\"Date Picker label\"\n    type=\"text\"\n  />\n</DatePicker>`}</ComponentDemo>\n\n## Single with calendar\n\n<ComponentDemo\n  knobs={{\n    DatePicker: ['light'],\n  }}\n  links={{\n    React:\n      'https://react.carbondesignsystem.com/?path=/story/datepicker--single-with-calendar',\n    Angular:\n      'https://angular.carbondesignsystem.com/?path=/story/components-date-picker--single',\n    Vue:\n      'http://vue.carbondesignsystem.com/?path=/story/components-cvdatepicker--single',\n    Vanilla: 'https://the-carbon-components.netlify.com/?nav=date-picker',\n  }}>{`<DatePicker dateFormat=\"m/d/Y\" datePickerType=\"single\">\n  <DatePickerInput\n    id=\"date-picker-calendar-id\"\n    placeholder=\"mm/dd/yyyy\"\n    labelText=\"Date Picker label\"\n    type=\"text\"\n  />\n</DatePicker>`}</ComponentDemo>\n\n## Range with calendar\n\n<ComponentDemo\n  knobs={{\n    DatePicker: ['light'],\n  }}\n  links={{\n    React:\n      'https://react.carbondesignsystem.com/?path=/story/datepicker--range-with-calendar',\n    Angular:\n      'https://angular.carbondesignsystem.com/?path=/story/components-date-picker--range',\n    Vue:\n      'http://vue.carbondesignsystem.com/?path=/story/components-cvdatepicker--range',\n    Vanilla: 'https://the-carbon-components.netlify.com/?nav=date-picker',\n  }}>{`<DatePicker dateFormat=\"m/d/Y\" datePickerType=\"range\">\n  <DatePickerInput\n    id=\"date-picker-range-start\"\n    placeholder=\"mm/dd/yyyy\"\n    labelText=\"Date Picker label\"\n    type=\"text\"\n  />\n  <DatePickerInput\n    id=\"date-picker-range-end\"\n    placeholder=\"mm/dd/yyyy\"\n    labelText=\"Date Picker label\"\n    type=\"text\"\n  />\n</DatePicker>`}</ComponentDemo>\n","type":"Mdx","contentDigest":"989efe6a4ac481ff5bb1048c0cc2748e","counter":1501,"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## Default\n\n<ComponentDemo\n  knobs={{\n    DatePicker: ['light'],\n  }}\n  links={{\n    React:\n      'https://react.carbondesignsystem.com/?path=/story/datepicker--simple',\n    Angular:\n      'https://angular.carbondesignsystem.com/?path=/story/components-date-picker--simple',\n    Vue:\n      'http://vue.carbondesignsystem.com/?path=/story/components-cvdatepicker--default',\n    Vanilla: 'https://the-carbon-components.netlify.com/?nav=date-picker',\n  }}>{`<DatePicker dateFormat=\"m/d/Y\" datePickerType=\"simple\">\n  <DatePickerInput\n    id=\"date-picker-default-id\"\n    placeholder=\"mm/dd/yyyy\"\n    labelText=\"Date Picker label\"\n    type=\"text\"\n  />\n</DatePicker>`}</ComponentDemo>\n\n## Single with calendar\n\n<ComponentDemo\n  knobs={{\n    DatePicker: ['light'],\n  }}\n  links={{\n    React:\n      'https://react.carbondesignsystem.com/?path=/story/datepicker--single-with-calendar',\n    Angular:\n      'https://angular.carbondesignsystem.com/?path=/story/components-date-picker--single',\n    Vue:\n      'http://vue.carbondesignsystem.com/?path=/story/components-cvdatepicker--single',\n    Vanilla: 'https://the-carbon-components.netlify.com/?nav=date-picker',\n  }}>{`<DatePicker dateFormat=\"m/d/Y\" datePickerType=\"single\">\n  <DatePickerInput\n    id=\"date-picker-calendar-id\"\n    placeholder=\"mm/dd/yyyy\"\n    labelText=\"Date Picker label\"\n    type=\"text\"\n  />\n</DatePicker>`}</ComponentDemo>\n\n## Range with calendar\n\n<ComponentDemo\n  knobs={{\n    DatePicker: ['light'],\n  }}\n  links={{\n    React:\n      'https://react.carbondesignsystem.com/?path=/story/datepicker--range-with-calendar',\n    Angular:\n      'https://angular.carbondesignsystem.com/?path=/story/components-date-picker--range',\n    Vue:\n      'http://vue.carbondesignsystem.com/?path=/story/components-cvdatepicker--range',\n    Vanilla: 'https://the-carbon-components.netlify.com/?nav=date-picker',\n  }}>{`<DatePicker dateFormat=\"m/d/Y\" datePickerType=\"range\">\n  <DatePickerInput\n    id=\"date-picker-range-start\"\n    placeholder=\"mm/dd/yyyy\"\n    labelText=\"Date Picker label\"\n    type=\"text\"\n  />\n  <DatePickerInput\n    id=\"date-picker-range-end\"\n    placeholder=\"mm/dd/yyyy\"\n    labelText=\"Date Picker label\"\n    type=\"text\"\n  />\n</DatePicker>`}</ComponentDemo>\n","fileAbsolutePath":"/zeit/45b021a8/src/pages/components/date-picker/code.mdx"}}}}