{"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":"32e86b43-4b12-5ac6-b781-0805e6421fb6","children":[],"parent":"7300605c-5d1d-5b25-b62e-5a18a90e7cd6","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":"b3ad1169ccea1194078786803b5da14e","counter":1500,"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/767b4790/src/pages/components/date-picker/code.mdx"}}}}