---
title: 时间选择器
order: 3
---

```jsx
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { YwJsonForm } from '@ywfe/yw-design';
import 'antd/dist/antd.css';

const disabledDateArray = (current) =>
  (current && current.year() < 2024) || (current.year() === 2024 && current.month() < 5);

const items = [
  {
    type: 'array',
    title: '日期范围',
    name: '[startDate1,endDate1]',
    component: 'DateRangePicker',
    required: true,
    // defaultValue: ['2022-07-12', '2022-07-23'],
    componentProps: {
      ranges: ['昨天', '今天', '7天', '30天'],
      isPermanent: true,
      maxDates: 31, // 最大可选日期范围
      disabledDateArray, // 禁用日期
    },
  },
  {
    type: 'array',
    title: '日期时间范围',
    name: '[startDate2,endDate2]',
    component: 'DateTimeRangePicker',
    componentProps: {
      maxDates: 0, // 最大可选日期
    },
  },
  {
    type: 'array',
    title: '周范围',
    name: '[startDate3,endDate3]',
    component: 'WeekRangePicker',
    defaultValue: ['2022-07-09', '2022-07-23'],
  },
  {
    type: 'array',
    title: '月范围',
    name: '[startDate4,endDate4]',
    component: 'MonthRangePicker',
    defaultValue: ['2022-07-09', '2022-08-23'],
  },
  {
    type: 'array', // string
    title: '日期',
    name: '[startDate5,endDate5]',
    component: 'DatePicker',
    defaultValue: ['2022-07-09', '2022-07-09'], //'2022-07-09'
  },
  // 精确时间 建议string类型
  {
    type: 'string',
    title: '日期时间',
    name: 'time',
    component: 'DateTimePicker',
    defaultValue: '2022-07-23 12:12:12',
    // defaultTime:['00:00:00','00:00:00']
  },
  {
    type: 'array', // string
    title: '月份',
    name: '[startDate6,endDate6]',
    component: 'MonthPicker',
    // defaultValue:['2022-07-09', '2022-07-09'], // '2022-07-09'
  },
  {
    type: 'array',
    title: '周',
    name: '[startDate7,endDate7]',
    component: 'WeekPicker',
    componentProps: {},
  },
];
const App = () => {
  return (
    <div>
      <YwJsonForm items={items} scrollIntoView />
    </div>
  );
};

ReactDOM.render(<App />, mountNode);
```