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

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

## 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"
        />
      &lt;/Form.Item&gt;
      <Button
        type="primary"
        style={{ marginTop: 32 }}
        onClick={() => {
          validate((errors, values) => {
            console.log(errors, values);
          });
        }}
      >
        validate
      &lt;/Button&gt;
    &lt;/Form&gt;
  );
};

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

export default Demo;
```