CronPicker

A cron expression picker component for scheduling tasks.

When to Use

Use when users need to configure cron expressions for scheduled or recurring tasks.

Basic Usage

Click the input to open the selection panel. Use presets for quick setup, or switch to "Custom" to scroll through values. Hold Ctrl while clicking to multi-select, generating comma-separated lists automatically. Next execution times are displayed below the input.

<TCronPicker v-model="cron" />

Dialects

Use the format prop to select the cron dialect:

Dialect	Fields	Description
linux	5: minute hour dom month dow	Standard Linux crontab (default)
webman	5/6: [second] minute hour dom month dow	Workerman/Webman format, auto-downgrades when second is *
quartz	7: second minute hour dom month dow year	Java Quartz format, supports ? wildcard

<TCronPicker format="webman" />

Quartz Mode

Java Quartz format: 7 fields second minute hour dom month dow year. Day and week are mutually exclusive; the system automatically manages the ? wildcard.

<TCronPicker format="quartz" />

Operators

Each field supports the following operators, selectable from the scrollable button list:

Operator	Meaning	Example
*	Any value	* every minute
,	List	1,3,5 1st/3rd/5th of month (Ctrl+click to multi-select)
-	Range	9-17 9 AM to 5 PM
/	Step	*/5 every 5 minutes
?	No specific value (Quartz only)	?

Presets

Preset	Linux Expression	Description
Every Minute	* * * * *	Run every minute
Hourly	0 * * * *	Run at the start of every hour
Daily	0 0 * * *	Run at midnight every day
Weekly	0 0 * * 0	Run at midnight every Sunday
Monthly	0 0 1 * *	Run at midnight on the 1st
Yearly	0 0 1 1 *	Run at midnight on Jan 1st

Next Run Times

Hover the clock icon next to the input to preview the next 5 execution times.

<TCronPicker />

Localization

Customize UI text via the locale prop. All fields are optional; missing fields fall back to Chinese defaults.

The full set of configurable keys is defined in the CronLocaleMessages type (importable from @gulcc/tabler-vue):

<TCronPicker
  format="quartz"
  :locale="{
    presetLabels: { everyMinute: 'Every Min', hourly: 'Hourly', daily: 'Daily', weekly: 'Weekly', monthly: 'Monthly', yearly: 'Yearly', custom: 'Custom' },
    fieldLabels: { second: 'Sec', minute: 'Min', hour: 'Hour', day: 'Day', month: 'Mon', week: 'Dow', year: 'Year' },
    confirm: 'OK',
    invalid: 'Invalid cron expression',
    nextRun: 'Next runs',
    everyPrefix: 'Every ',
    notSpecified: 'Not set (?)',
    multiSelectTitle: 'Multi-select',
    multiSelectHint: 'Hold Ctrl or Cmd to select multiple values',
    weekOptions: [
      { label: 'Every week', value: '*' },
      { label: 'Sun', value: '0' }, { label: 'Mon', value: '1' },
      { label: 'Tue', value: '2' }, { label: 'Wed', value: '3' },
      { label: 'Thu', value: '4' }, { label: 'Fri', value: '5' }, { label: 'Sat', value: '6' },
    ],
    weekOptionsQuartz: [
      { label: 'Every week', value: '*' }, { label: 'Not set (?)', value: '?' },
      { label: 'Sun', value: '1' }, { label: 'Mon', value: '2' },
      { label: 'Tue', value: '3' }, { label: 'Wed', value: '4' },
      { label: 'Thu', value: '5' }, { label: 'Fri', value: '6' }, { label: 'Sat', value: '7' },
    ],
    weekOptionsWebman: [
      { label: 'Every week', value: '*' },
      { label: 'Sun', value: '0' }, { label: 'Mon', value: '1' },
      { label: 'Tue', value: '2' }, { label: 'Wed', value: '3' },
      { label: 'Thu', value: '4' }, { label: 'Fri', value: '5' }, { label: 'Sat', value: '6' },
    ],
  }"
/>

Direct Input

Advanced users can type or paste cron expressions directly into the input. The expression is validated and synced to the panel on blur or Enter.

API

TCronPicker Props

Prop	Description	Type	Default
model-value	Cron expression (v-model)	string	'* * * * *'
format	Dialect: linux / webman / quartz	string	'linux'
disabled	Disabled	boolean	false
locale	Custom UI text	Partial<CronLocaleMessages>	{}

TCronPicker Events

Event	Description	Parameters
update:model-value	Expression changed	(value: string) => void
change	User confirmed selection	(value: string) => void