{"componentChunkName":"component---src-pages-components-date-picker-usage-mdx","path":"/components/date-picker/usage/","webpackCompilationHash":"9ffd1cb8ca3b610e9ad3","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/usage.mdx","titleType":"prepend","MdxNode":{"id":"6f2ee44f-f22b-5b64-ace2-7c02531c678d","children":[],"parent":"f8c7bbd0-6947-5572-9231-7e29fbd262f6","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### Date and time pickers allow users to select a single or a range of dates and times.\n\n\n\nVariations\nContent\nInteraction\nTime picker\n\n\n\n## Variations\n\n| Type | Purpose |\n| -------------------- | ------------------------------------------------------------------------------------------ |\n| _Range date picker_ | To select a range of dates, accompanied by a calendar widget. |\n| _Single date picker_ | When a user needs to select one date, accompanied by a calendar widget. |\n| _Simple date picker_ | When the date is known by the user and they don't need a calendar to anticipate the dates. |\n\n\n\n\n\n\nTypes of date pickers\n\n\n
\n\n## Content\n\n#### Labels\n\nBoth date and time pickers are accompanied by labels, and follow the same accessibility guidelines for all [forms](/components/form/code).\n\n#### Format\n\nFor date pickers, use placeholder text so users input the date in the correct format. It can be formatted in a variety of ways. See the date picker code [documentation](https://github.com/carbon-design-system/carbon/blob/master/packages/components/src/components/date-picker/README.md) for more info.\n\n## Interaction\n\n#### Calendar widget\n\nIt is recommended to use the date picker with a calendar widget when the user is browsing between a range of dates. Aid the user in making the proper choices by providing a visual reference of dates to choose from. The calendar widget appears once the user has interacted with the date input field (typically on `:focus`).\n\n\n\n\n\n\nSelecting dates from the range date picker\n\n\n
\n\n#### Simple date picker\n\nThe simple date picker provides the user with a text input in which they can input month/day/year. Simple date pickers are typically used when the date is known by the user, such as a birthday or credit card expiration.\n\n## Time picker\n\nTime pickers provide the user with a text input in which they can input hours/minutes. Additionally, they can be accompanied by an “AM/PM” selection and a time zone selection, which is styled as an [inline select](/components/select/code).\n","type":"Mdx","contentDigest":"79ed8ec3582735eadb422d853457682e","counter":1298,"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### Date and time pickers allow users to select a single or a range of dates and times.\n\n\n\nVariations\nContent\nInteraction\nTime picker\n\n\n\n## Variations\n\n| Type | Purpose |\n| -------------------- | ------------------------------------------------------------------------------------------ |\n| _Range date picker_ | To select a range of dates, accompanied by a calendar widget. |\n| _Single date picker_ | When a user needs to select one date, accompanied by a calendar widget. |\n| _Simple date picker_ | When the date is known by the user and they don't need a calendar to anticipate the dates. |\n\n\n\n\n\n\nTypes of date pickers\n\n\n
\n\n## Content\n\n#### Labels\n\nBoth date and time pickers are accompanied by labels, and follow the same accessibility guidelines for all [forms](/components/form/code).\n\n#### Format\n\nFor date pickers, use placeholder text so users input the date in the correct format. It can be formatted in a variety of ways. See the date picker code [documentation](https://github.com/carbon-design-system/carbon/blob/master/packages/components/src/components/date-picker/README.md) for more info.\n\n## Interaction\n\n#### Calendar widget\n\nIt is recommended to use the date picker with a calendar widget when the user is browsing between a range of dates. Aid the user in making the proper choices by providing a visual reference of dates to choose from. The calendar widget appears once the user has interacted with the date input field (typically on `:focus`).\n\n\n\n\n\n\nSelecting dates from the range date picker\n\n\n
\n\n#### Simple date picker\n\nThe simple date picker provides the user with a text input in which they can input month/day/year. Simple date pickers are typically used when the date is known by the user, such as a birthday or credit card expiration.\n\n## Time picker\n\nTime pickers provide the user with a text input in which they can input hours/minutes. Additionally, they can be accompanied by an “AM/PM” selection and a time zone selection, which is styled as an [inline select](/components/select/code).\n","fileAbsolutePath":"/fargate/7b444b50/src/pages/components/date-picker/usage.mdx"}}}}