cnd-components-mcp/componentData/components/CndCron.md

An MCP service for Cnd components query | 一个减少 Cnd 组件代码生成幻觉的 MCP 服务，包含系统提示词、组件文档、API 文档、代码示例和更新日志查询

---
group:
  title: 云原生业务组件
---
# CndCron cron表达式组件

## 代码库地址
https://code.alibaba-inc.com/cn-lowcode/cnd-cron

## basic

```tsx preview
import React, { useState } from "react";
import { CndCron, Radio } from "@ali/cnd";


const RadioGroup = Radio.Group;

const Demo = () => {
  const [val, setVal] = useState("");
  const [digit, setDigit] = useState('5');

  const onChange = (value) => {
    setDigit(value);
  };

 return (
    <div>
      <RadioGroup defaultValue={"5"} onChange={onChange} style={{ marginBottom: 10 }}>
        <Radio id="5" value="5" label="五位" />
        <Radio id="6" value="6" label="六位" />
      </RadioGroup>
      <CndCron value={val} onChange={setVal} digit={digit}/>
    </div>
  );
};

export default Demo;
```

## Field

```tsx preview
import React, { useState } from "react";
import { Field, Form, Button, CndCron, cronValidator, Radio } from "@ali/cnd";

const RadioGroup = Radio.Group;

const Demo = () => {
  const field = Field.useField();
  const { init, validate } = field;
  const [digit, setDigit] = useState('5');

  const onChange = (value) => {
    setDigit(value);
  };

  return (
    <Form field={field}>
      <Form.Item label="cron表达式">
        <RadioGroup defaultValue={"5"} onChange={onChange} style={{ marginBottom: 10 }}>
        <Radio id="5" value="5" label="五位" />
        <Radio id="6" value="6" label="六位" />
      </RadioGroup>
        <CndCron
          {...init("cron", {
            rules: [
              {
                validator: cronValidator,
                digit: digit,
              },
            ],
          })}
          digit={digit}
          renderTime="dialog"
        />
      </Form.Item>
      <Button
        type="primary"
        style={{ marginTop: 32 }}
        onClick={() => {
          validate((errors, values) => {
            console.log(errors, values);
          });
        }}
      >
        validate
      </Button>
    </Form>
  );
};

export default Demo;
```

## Field initValue

```tsx preview
import React, { useState } from "react";
import { Field, Form, Button, Radio, CndCron, cronValidator } from "@ali/cnd";

const RadioGroup = Radio.Group;

const Demo = () => {
  const field = Field.useField();
  const { init, validate } = field;
  const [digit, setDigit] = useState('5');

  const onChange = (value) => {
    setDigit(value);
  };

  return (
    <Form field={field}>
      <Form.Item label="cron表达式">
         <RadioGroup defaultValue={"5"} onChange={onChange} style={{ marginBottom: 10 }}>
          <Radio id="5" value="5" label="五位" />
          <Radio id="6" value="6" label="六位" />
        </RadioGroup>
        <CndCron
          digit={digit}
          {...init("cron", {
            initValue: "0 0 * * ?",
            rules: [
              {
                validator: cronValidator,
                digit: digit,
              },
            ],
          })}
        />
      </Form.Item>
      <Button
        type="primary"
        style={{ marginTop: 32 }}
        onClick={() => {
          validate((errors, values) => {
            console.log(errors, values);
          });
        }}
      >
        validate
      </Button>
    </Form>
  );
};

export default Demo;
```
## CronValidator 使用注意点
如果需要进行长度校验，需要在rules中手动传入digit位数（5或6），否则默认按照五位来校验。

## API

| 名称     | 类型                 | 说明                     | 默认值 |
| -------- | -------------------- | ------------------------ | ------ |
| digit    | string               | cron表达式位数（"5","6"）    | "5"      |
| renderTime | Enum["below", "dialog"] |  近五次执行时间预览方式。below为在“使用生成工具下直接显示，dialog为在使用生成工具旁存在按钮可触发弹出框预览   |  below     |
| value    | string               | 当前值                   | -      |
| onChange | (value:string)=>void | 发生改变的时候触发的回调 | -      |