Usage & Demo

• Unix cron
• Form control
• Active tab
• Disabled state
• Years managing
• Tabs managing
• Tabs visibility
• How to translate the cron component?
• Styling
  • Highlight elements
  • Vertical tabs

Unix cron

There is ReUnixCron component to work with unix cron format.

Form control

The cron component works as a simple form control.

Active tab

Use activeTab prop to manually activate tab you want.
onTabChange prop allows you to listen tabs activation.
Unix cron supports next tabs: Tab.MINUTES, Tab.HOURS, Tab.MONTH, Tab.DAY.

Disabled state

Use disabled prop to control component's state.

Years managing

Use renderYearsFrom and renderYearsTo props to specify start and end years.
renderYearsFrom takes 2019 and renderYearsTo takes 2098 as values by default.

Unix cron doesn't support years.

Tabs managing

Use tabs prop to pass tabs you want to show.
The order of the tabs depends on the order of the tab list you specify.

Available quartz values:
Tab.SECONDS, Tab.MINUTES, Tab.HOURS, Tab.DAY, Tab.MONTH, Tab.YEAR

Available unix values:
Tab.MINUTES, Tab.HOURS, Tab.DAY, Tab.MONTH

How to translate the cron component?

Pass localization object to localization prop to have translated texts.
See this example of the translation of the "Seconds" tab into Ukrainian.

Tabs visibility

Use hideTabs prop to hide tab buttons.

Highlight elements

Let's highlight "Specific second" section and options "1" and "20"