{"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":"ae452841-83e3-5c75-a953-b504c9b9cfc0","children":[],"parent":"c4aa2de0-3500-52d1-81cb-f6acdb6363c2","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":"f5b7da509ed9a2a765cb93dd055e5d65","counter":1509,"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/3f757860/src/pages/components/date-picker/code.mdx"}}}}