Top
DateInput - Styling & Theming
DateInput
To style and customize the appearance of <DateInput />, you can use one of the following strategies:
  • Specify a style prop with the desired values.
  • Specify a DateInput className - note that this will not override the default class of zippy-react-toolkit-date-input, but rather will be appended to the classes the component already has.
See the Calendar component styling & theming for more details on the classNames already applied to the <Calendar />.
ClassNameDescription
zippy-react-toolkit-date-input
This is the block className for all date inputs. Always applied.
zippy-react-toolkit-date-input__input
Applied on main input.
zippy-react-toolkit-date-input__calendar-icon
Applied on calendar icon.
zippy-react-toolkit-date-input__calendar-icon-inner
Applied on inner part of calendar icon.
zippy-react-toolkit-date-input__clear-icon
Applied on clear icon.