---
title: 时间选择器快捷日期选择
order: 3

---


```jsx
import React, { useEffect, useState, useRef } from 'react';
import ReactDOM from 'react-dom';
import { YwFilter, YwButton } from '@ywfe/yw-design';
import 'antd/dist/antd.css';


const App = () => {
let form = null
const items = [
      {
        type: 'array',
        title: '选择日期',
        name: '[startDate1,endDate1]',
        component: 'DateRangePicker',
        defaultValue: ['2022-07-09', '2022-07-23'],
      },
      {
        component: 'DateRangeGroup',
        type: 'string',
        props:{
            inset:false,
        },
        componentProps:{
           ranges: ['本月', '上月', '本周'],
           onChange:(data)=>{
            form.setValuesIn('[startDate1,endDate1]',data);
           }
        },
      },
      {
        type: 'array',
        title: '自定义',
        name: '[startDate2,endDate2]',
        component: 'DateRangePicker',
      },
      {
        component: 'DateRangeGroup',
        type: 'string',
        props:{
            inset:false,
        },
        componentProps:{
           ranges: ['日期1', '日期2'],
           rangesValue:{
               '日期1':[moment().startOf('month'), moment()],
               '日期2':[moment().startOf('week'), moment()],
           },
           onChange:(data)=>{
            form.setValuesIn('[startDate2,endDate2]',data);
           }
        },
      }
];
    return (
      <div>
        <YwFilter labelInset items={items} onCreate= {(_form)=>{form = _form}}  onSubmit={(values)=>{console.log(values)}}/>
      </div>
    );
}

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