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

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

## 示例
```tsx
import React from 'react';
import { DatePicker } from '@alicloud/console-components';
import moment from 'moment';

const titleStyle = {
  margin: '40px 0 4px',
  color: '#1D1D1F',
  height: 20,
};
const onChange = (val) => console.log(val);
const startValue = moment('2017-11-20', 'YYYY-MM-DD', true);

export default () => {
  return (
    <div>
      <div style={titleStyle}>默认</div>
      <DatePicker onChange={onChange} format="YYYY-MM-DD" />
      <div style={titleStyle}>完成选择</div>
      <DatePicker
        onChange={onChange}
        defaultValue={startValue}
        format="YYYY-MM-DD"
      />
      &lt;div style={titleStyle}&gt;禁用&lt;/div&gt;
      &lt;DatePicker onChange={onChange} disabled /&gt;
    &lt;/div&gt;
  );
};

export const meta = {
  title: '日期选择交互',
  describe:
    '可以通过 defaultValue 属性为日期选择器提供初值，所提供的初值必须为 moment 对象。',
};

```
```tsx
import React from 'react';
import { DatePicker } from '@alicloud/console-components';
import moment from 'moment';

const titleStyle = {
  margin: '40px 0 4px',
  color: '#1D1D1F',
  height: 20,
};
const onChange = (val) => console.log(val);
const startValue = moment('2017-11-20', 'YYYY-MM-DD', true);

export default () => {
  return (
    &lt;div&gt;
      &lt;div style={titleStyle}&gt;默认&lt;/div&gt;
      &lt;DatePicker onChange={onChange} format="YYYY-MM-DD" showTime /&gt;
      &lt;div style={titleStyle}&gt;完成选择&lt;/div&gt;
      <DatePicker
        onChange={onChange}
        defaultValue={startValue}
        format="YYYY-MM-DD"
        showTime
      />
      &lt;div style={titleStyle}&gt;禁用&lt;/div&gt;
      &lt;DatePicker onChange={onChange} disabled showTime /&gt;
    &lt;/div&gt;
  );
};

export const meta = {
  title: '日期与时间选择交互',
  describe:
    '如果需要同时选择时间，可以通过 showTime 属性开启，showTime 支持传入 TimePickerPanel 的属性，例如 format, defaultValue 等。',
};

```
```tsx
import React from 'react';
import { DatePicker } from '@alicloud/console-components';
import moment from 'moment';

const titleStyle = {
  margin: '4px 0 4px',
  color: '#1D1D1F',
  height: 20,
};

const contentStyle = {
  display: 'grid',
  gridTemplateColumns: 'repeat(2, 1fr)',
  gap: 36,
};

const startValue = moment('2020-07-25', 'YYYY-MM-DD', true);
export default () => {
  return (
    &lt;div style={contentStyle}&gt;
      &lt;div&gt;
        &lt;div style={titleStyle}&gt;简短&lt;/div&gt;
        月+日&nbsp;
        &lt;DatePicker defaultValue={startValue} format="MM-DD" /&gt;
        &lt;br /&gt;
        &lt;br /&gt;
        年+月&nbsp;
        &lt;DatePicker defaultValue={startValue} format="YYYY-MM" /&gt;
      &lt;/div&gt;
      &lt;div&gt;
        &lt;div style={titleStyle}&gt;标准&lt;/div&gt;
        年+月+日（中）&nbsp;
        &lt;DatePicker defaultValue={startValue} format="YYYY-MM-DD" /&gt;
        &lt;br /&gt;
        &lt;br /&gt;
        年+月+日（英）&nbsp;
        &lt;DatePicker defaultValue={startValue} /&gt;
      &lt;/div&gt;
      &lt;div&gt;
        &lt;div style={titleStyle}&gt;完整&lt;/div&gt;
        年+月+日（中）&nbsp;
        &lt;DatePicker defaultValue={startValue} format="YYYY年MM月DD日" /&gt;
        &lt;br /&gt;
        &lt;br /&gt;
        年+月+日（英）&nbsp;
        &lt;DatePicker defaultValue={startValue} /&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  );
};

export const meta = {
  title: '日期与时间选择交互',
  describe: '通过format属性控制日期格式。',
};

```