Components / Input controls

Cron Input

Component + manager

Provides a popover-based UI for setting a cron expression (minute, hour, day-of-month, month, and day-of-week).

Preview

Usage

API reference

Live preview

Interactive example

Loading example…

Usage

Import the component and its manager, then make it your own.

ComponentCronInput

Managercreate_cron_input_manager

svelte

<script>
  // Import the shared stylesheet once in your application's root layout.
  import "sveltekit-ui/style.css"
  import { CronInput, create_cron_input_manager } from "sveltekit-ui"

  const manager = create_cron_input_manager({
    label: "Run every weekday at 9 AM",
    val: "0 9 * * 1-5",
    is_nullable: false,
    is_popover: true,
  })
</script>

<CronInput {manager} />
<p>Cron expression: {manager.val}</p>

API reference

Configure the manager, call its methods, and read its reactive state.

11 entries in configuration

Property	Type	Default	Description
`val`	`string`	`null`	the raw cron expression
`label`	`string`	`null`	optional label displayed next to the cron input
`is_disabled`	`boolean`	`false`	disables the input if true
`is_nullable`	`boolean`	`true`	allows the cron to be null if true
`is_compressed`	`boolean`	`true`	if true, sets button styling to compressed
`is_popover`	`boolean`	`true`	if true, opens the cron input in a popover
`ml`	`number`	`0`	margin-left in rem
`mr`	`number`	`0`	margin-right in rem
`mt`	`number`	`0`	margin-top in rem
`mb`	`number`	`0`	margin-bottom in rem
`on_finish`	`function`	`null`	callback triggered when the user clicks 'finish', receives the validated cron