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

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

## 基本使用
```tsx preview
import React from "react";
import {CndTimeContainer} from "@ali/cnd";

const Demo = () => {
  return <CndTimeContainer onChange={console.log} style={{width: 400}} />;
};

export default Demo;
```
## Field 方式调用
```tsx preview
import React from "react";
import {CndTimeContainer} from "@ali/cnd";

import { Field } from "@alicloud/console-components";
import { useEffect } from "react";

export default () => {
  const field = Field.useField();
  const { init, getValue } = field;
  useEffect(() => {
    console.log(getValue("time"));
  }, [getValue("time")]);

  return <CndTimeContainer {...init("time")} />;
};
```
## 默认选中(string 类型)
```tsx preview
import React from "react";
import CndTimeContainer from "@ali/cnd-time-container";

import { Field } from "@alicloud/console-components";
export default () => {
  const field = Field.useField();
  const { init, getValue } = field;

  return (
    <CndTimeContainer
      {...init("time", { initValue: "last_5_minutes" })}
      onChange={console.log}
    />
  );
};
```
## 默认选中(时间戳和 moment 对象)
```tsx preview
import React from "react";
import {CndTimeContainer} from "@ali/cnd";

import { Field } from "@alicloud/console-components";
export default () => {
  const field = Field.useField();
  const { init, getValue } = field;

  return (
    <CndTimeContainer
      {...init("time", { initValue: [1597999568648, 1598001368648] })}
      onChange={console.log}
    />
  );
};
```
## mode 为 offline
```tsx preview
import React from "react";
import {CndTimeContainer} from "@ali/cnd";

const Demo = () => {
  return &lt;CndTimeContainer mode="offline" onChange={console.log} /&gt;;
};

export default Demo;
```
## showLoop
```tsx preview
import React from "react";
import {CndTimeContainer} from "@ali/cnd";
const Demo = () => {
  return &lt;CndTimeContainer showLoop={false} onChange={console.log} /&gt;;
};

export default Demo;
```
## 自定义快捷时间
```tsx preview
import React from "react";
import { CndTimeContainer, Field } from "@ali/cnd";

export default () => {
  const field = Field.useField();
  const { init } = field;
  const quickTimes = [
    { key: "minute", childs: ["last_5_minutes", "last_15_minutes"] },
    { key: "hour" },
    { key: "day" },
  ];
  return (
    <CndTimeContainer
      quickTimes={quickTimes}
      {...init("time")}
      onChange={console.log}
    />
  );
};
```