@aliretail/react-materials-components/demo/FormComponents/rangeDatePicker.md

B 端物料组件库

---
title: RangeDatePicker
order: 80
---

```jsx
import React from 'react';
import ReactDOM from 'react-dom';
import { FormComponents } from '@aliretail/react-materials-components';
const { SchemaForm, SchemaMarkupField: Field, createFormActions, RangeDatePicker } = FormComponents;

const App = () => {
  const valideForeverRange = (values = []) => {
    const [start, end, forever] = values;
    if (!forever) {
      if (!(start && end)) {
        return Promise.resolve('该字段是必填字段');
      }
    }
    return Promise.resolve();
  };
  return (
    <SchemaForm
      components={{ RangeDatePicker }}
      onChange={console.log}
      defaultValue={{
        readOnlyStart: '2019-02-02',
        readOnlyEnd: '2019-02-03',
        forever: true,
      }}
    >
      <Field
        x-component="RangeDatePicker"
        type="array"
        title="RangeDatePicker"
        name="[start,end]"
      />
      <Field
        x-component="RangeDatePicker"
        title="readOnly"
        readOnly
        name="[readOnlyStart,readOnlyEnd]"
      />
      <Field
        x-component="RangeDatePicker"
        readOnly
        x-component-props={{ canSetForever: true, foreverLebel: '长期' }}
        type="array"
        title="withForeverReadOnly"
        name="[start1,end1, forever]"
      />
      <Field
        x-component="RangeDatePicker"
        x-component-props={{ canSetForever: true }}
        type="array"
        title="withForever"
        name="[start2,end2, forever]"
        x-rules={valideForeverRange}
      />
    </SchemaForm>
  );
};

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