wix-style-react
Version:
90 lines (89 loc) • 4.3 kB
JavaScript
export default {
description: `Date picker allows you to select a specific date from the opened calendar. It shows the selected date in an input.
It’s a combination of \`<Input/>\`, \`<Calendar/>\` and \`<Popover/>\` components.`,
do: [
'Use it to select dates in the recent past or near future',
'Use it to with month and year selection dropdowns enabled to select dates in the distant past or far future (i.e. entering a birth date or expiration date)',
],
dont: [
'Don’t use it in forms that are filled using a keyboard, use <Input/> instead',
],
featureExamples: [
{
title: 'Size',
description: `Adjust the component size using \`size\` prop. It supports 3 sizes:<br/>
 - \`large\` - use it in onboarding flows, where input needs emphasis<br/>
 - \`medium\` (default) - use in all common cases<br/>
 - \`small\` - use in more dense and narrow layouts`,
example: '_size',
},
{
title: 'Status',
description: `Control component status using \`status\` prop. It supports 3 options:<br/>
 - \`error\` - use to highlight invalid date<br/>
 - \`warning\` - use to highlight dates that impact user business or can’t be validated<br/>
 - \`loading\` - use to show that the selected value is being uploaded to the server`,
example: '_status',
},
{
title: 'Status Message',
description: `Explain the status with \`statusMessage\` prop. The message is revealed when a user hovers over the status icon.`,
example: '_statusMessage',
},
{
title: 'Read-Only and Disabled',
description: `Control input interaction with:<br/>
 - \`readOnly\` - disables changing the selection, but allows you to copy the current value. Use it to display dates that cannot be overridden.<br/>
 - \`disabled\` - disables all interactions. Use it to highlight an unavailable selection.`,
example: '_readOnlyAndDisabled',
},
{
title: 'Clear Button',
description: `Enable a button that clears selected date by using \`clearButton\` prop. Use it to clear optional dates easily.`,
example: '_clearButton',
},
{
title: 'Locale and date style',
description: `Set appropriate formatting per country with \`locale\` and \`dateStyle\` props.<br/>
<br/>
Date style support 2 values:<br/>
 - \`short\` (default) - use for all common cases<br/>
 - \`medium\` - use where month needs more emphasis
`,
example: '_localeAndDateStyle',
},
{
title: 'First day of the week',
description: `Control the starting day of a week inside a calendar popover with \`firstDayOfWeek\` prop.
This component allows you to override default monday value (\`0\`) to any required day of the week.`,
example: '_firstDayOfTheWeek',
},
// show this when https://jira.wixpress.com/browse/DSM-1822 is fixed
// {
// title: 'Number of months',
// description: `Set the number of months to be shown in a calendar popover.
// Component allows to show either \`1 (default)\` or \`2\` months at once.`,
// example: '_numberOfMonths',
// },
{
title: 'Year and month selections',
description: `Enable users to select dates far into the past or future by providing month and year selection
dropdowns inside of a calendar with \`showMonthDropdown\` and \`showYearDropdown\` properties.`,
example: '_yearAndMonthSelections',
},
{
title: 'Excluding dates',
description: `Control date ranges that users can select from with following properties:<br/>
 - \`excludePastDates\` - use to restrict user from selecting any dates from the past<br/>
 - \`filterDate\` - use to restrict user from selecting any specific date, selection of dates or date ranges`,
example: '_excludingDates',
},
],
commonUseCaseExamples: [
{
title: 'Together with time input',
description: `Place a date picker together with time input under the same form field for scheduling use cases (i.e. scheduling an appointment or event)`,
example: '_togetherWithTimeInput',
},
],
};