ESLint plugin

The essential plugin for use with the Atlassian Design System.

use-datetime-picker-calendar-button

The date picker and datetime picker should show the calendar button for users to ensure it is accessible for all users.

Examples

This rule will warn makers if the prop is not set to show the calendar button.

Incorrect

<DatePicker />
 ^^^^^^^^^^ `shouldShowCalendarButton` should be set to `true` to make date picker accessible.

<DatePicker shouldShowCalendarButton={false} />
            ^^^^^^^^^^^^^^^^^^^^^^^^ `shouldShowCalendarButton` should be set to `true` to make date picker accessible.

<DateTimePicker />
 ^^^^^^^^^^ `shouldShowCalendarButton` should be set to `true` to make date picker accessible.

<DateTimePicker
  datePickerProps={{
        shouldShowCalendarButton: false
        ^^^^^^^^^^^^^^^^^^^^^^^^ `shouldShowCalendarButton` should be set to `true` to make date picker accessible.
    }}
/>

Correct

<DatePicker shouldShowCalendarButton />

<DateTimePicker datePickerProps={{
    shouldShowCalendarButton: true
}} />
Was this page helpful?
We use this feedback to improve our documentation.
  • Design system
    • Get started
    • Foundations
    • Components
    • Rovo UI
    • Tools
    • Release phases
    • Contact us
© 2026 AtlassianTrademark, (opens new window)Privacy, (opens new window)License