{"componentChunkName":"component---src-pages-components-date-picker-usage-mdx","path":"/components/date-picker/usage/","webpackCompilationHash":"aaa6c4cbb44f8ca938e9","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":"0ac848f1-5225-5555-b1d9-10e1cd577e81","children":[],"parent":"3a2214d0-9a7e-523c-a441-bc192884fa0b","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<AnchorLinks>\n\n<AnchorLink>Variations</AnchorLink>\n<AnchorLink>Content</AnchorLink>\n<AnchorLink>Interaction</AnchorLink>\n<AnchorLink>Time picker</AnchorLink>\n\n</AnchorLinks>\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<Row>\n<Column colLg={8}>\n\n![range, single, and simple date pickers](images/date-picker-usage-1.png)\n\n<Caption>Types of date pickers</Caption>\n\n</Column>\n</Row>\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).\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<Row>\n<Column colLg={8}>\n\n![example of date picker](images/date-picker-usage-animation-1.gif)\n\n<Caption>Selecting dates from the range date picker</Caption>\n\n</Column>\n</Row>\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).\n","type":"Mdx","contentDigest":"ff2249cb906f268575e13f2a815fc7f6","counter":1111,"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<AnchorLinks>\n\n<AnchorLink>Variations</AnchorLink>\n<AnchorLink>Content</AnchorLink>\n<AnchorLink>Interaction</AnchorLink>\n<AnchorLink>Time picker</AnchorLink>\n\n</AnchorLinks>\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<Row>\n<Column colLg={8}>\n\n![range, single, and simple date pickers](images/date-picker-usage-1.png)\n\n<Caption>Types of date pickers</Caption>\n\n</Column>\n</Row>\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).\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<Row>\n<Column colLg={8}>\n\n![example of date picker](images/date-picker-usage-animation-1.gif)\n\n<Caption>Selecting dates from the range date picker</Caption>\n\n</Column>\n</Row>\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).\n","fileAbsolutePath":"/tmp/42b44a0/src/pages/components/date-picker/usage.mdx"}}}}