A Cron expression UI component based on Vue3 and Ant Design Vue.

Overview

vue3-cron

A Cron expression UI component based on Vue3 and Ant Design Vue.

English | 简体中文

Preview

Supported format

*    *    *    *    *    *    *
┬    ┬    ┬    ┬    ┬    ┬    ┬
│    │    │    │    │    |    └ year (currentYear - 2099)
│    │    │    │    │    └───── day of week (0 - 7) (0 or 7 is Sun)
│    │    │    │    └────────── month (1 - 12)
│    │    │    └─────────────── day of month (1 - 31)
│    │    └──────────────────── hour (0 - 23)
│    └───────────────────────── minute (0 - 59)
└────────────────────────────── second (0 - 59)
Field Required Value range Allowed wildcard
Second Yes 0-59 , - * /
Minute Yes 0-59 , - * /
Hour Yes 0-23 , - * /
Date Yes 1-31 , - * / L W
Month Yes 1-12 , - * /
Week Yes 0-7 or SUN-SAT , - * / L #
Year No currentYear-2099 , - * /

Installation

npm install vue3-cron-antd --save

Usage

Import

// Global import.
import { createApp } from 'vue';
import AntDesignVue from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
import Vue3Cron from 'vue3-cron-antd';

import App from './App.vue';

const app = createApp(App);

app.use(AntDesignVue);
app.use(Vue3Cron);

app.mount('#app');

or

<script>
import Vue3Cron from 'vue3-cron-antd';
// Single import.
export default {
    components: {
        Vue3Cron,
    },
}
</script>

Use

<template>
    <vue3-cron v-model="expression" :locale="locale" />
</template>

<script>
    export default {
        data() {
            return {
                expression: '* * * * * ?',
                locale: 'cn', // set 'cn' or 'en', default is 'cn'.
            };
        },
    }
</script>
You might also like...
An e-commerce system based on Spring Boot 2.6 and Vue3
An e-commerce system based on Spring Boot 2.6 and Vue3

Jake-mall is an e-commerce system based on Spring Boot 2.6 and Vue3 and related technology stack.

A small toy that shows records in the form of a heat map for bookkeeping based on Vue3, Vite2, Vuetify3-Beta and Lean Cloud
A small toy that shows records in the form of a heat map for bookkeeping based on Vue3, Vite2, Vuetify3-Beta and Lean Cloud

A small toy that shows records in the form of a heat map for bookkeeping. It is based on Vue3, Vite2, Vuetify3-Beta and Lean Cloud.

Desktop app for reading and downloading manga. With clean distraction-free design and no clutter

Tonbun Tonbun is a desktop app for reading and downloading manga. With clean distraction-free design and no clutter. Build with Rust, Tauri, Vue.js, a

The @obewds/vue-el modular design system component for Vue.js

The @obewds/vue-el modular design system component for Vue.js

FastCrud - an options-oriented crud development framework based on vue3
FastCrud - an options-oriented crud development framework based on vue3

FastCrud is an options-oriented crud development framework based on vue3. It can rapidly develop crud functions and can be used as the basic framework of a low code platform.

Cross-platform mobile App developed with Ionic, Capacitor and Vue3 to manage and share vegetarian meals, recipes and products, using device's internal storage, camera, geolocation, share and network functionalities.
Cross-platform mobile App developed with Ionic, Capacitor and Vue3 to manage and share vegetarian meals, recipes and products, using device's internal storage, camera, geolocation, share and network functionalities.

Cross-platform mobile App developed with Ionic, Capacitor and Vue3 to manage and share vegetarian meals, recipes and products, using device's internal storage, camera, geolocation, share and network functionalities.

Web Extension — A new tab page extension with material design and useful features :new: :tada:
Web Extension — A new tab page extension with material design and useful features :new: :tada:

Epiboard A new tab page adding a touch of wow and an interface following the lines of the material design. 🆕 🎉 . You can simply and quickly access t

Designing WhatsApp using Tailwindcss and Vuejs to replicate the chats part of WhatsApp design

whatsapp-clone Project setup npm install Compiles and hot-reloads for development npm run serve Compiles and minifies for production npm run build

Design and implement a web application like trello
Design and implement a web application like trello

collaborators Mohammad Zahmatkesh Ali Maher Mehdi Mortazavian Title: Advance Programming project(Vue js) description: Design and implement a web appli

Owner
MaxWu
MaxWu
一个 cron 表达式生成插件,基于 vue 与 element-ui 实现 demo

一个 cron 表达式生成插件,基于 vue 与 element-ui 实现 demo

Mennan Köse 7 Mar 16, 2021
Feather DS - a Vue 3 based design system built around simplicity, consistency, and accessibility

Feather Design System Introduction Feather Design System is a Vue-based design system for creating consistent web UIs that follow best practices for t

Feather Design System 18 Nov 3, 2022
A Web Design Language Based on the Vue version

A Web Design Language Based on the Vue version

codeages-design 2 May 9, 2018
Emoji Reaction is an emoji reaction component based on Leancloud and Vue3.

Emoji Reaction Emoji Reaction is an emoji reaction component based on Leancloud and Vue3. Demo Here is a demo. Before Everything A Vue3 project A Lean

Allen Tao 9 Oct 25, 2022
Desktop Rss reader, based on Vue3 and tauri-app, free and open source

Rss-Reader A DeskTop rss-Reader app base on tauri-app. Why tauri-app? ?? For developing desktop applications, there are a number of frameworks to choo

lsh 66 Nov 9, 2022
zhihu system written with vue3+ts, using most of the functions of vue3.0,composition Api.

zhihu system written with vue3+ts, using most of the functions of vue3.0,composition Api.

null 4 May 11, 2021
A Vue3 Todo Web Application with typescript, Vue3, Pinia, Tailwindcss

Vue3 Todo Web Application A Vue3 Todo Web Application with typescript, Vue3, Pinia, Tailwindcss How to run? npm install # or yarn yarn npm run dev #

Eggplantiny 51 Nov 6, 2022
A magical vue3 mobile using vue3(script-setup) + vite2 + uniapp

A magical vue3 mobile using vue3(script-setup) + vite2 + uniapp

kuanghua 21 Oct 21, 2022
This website is implemented with Nuxt.js as a server-side and PWA, and fully communicates with API, and Vuetify.js is used in the design.

Diamond book store This website is implemented with Nuxt.js as a server-side and PWA, and fully communicates with API, and Vuetify.js is used in the d

Mojtaba Afraz 8 Jul 31, 2022
A desktop app based electron and vue3

tasky-vue Project setup npm install Compiles and hot-reloads for development npm run serve Compiles and minifies for production npm run build Lints

Alaso 34 Oct 20, 2022