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

B 端物料组件库

---
title: DatePicker
order: 70
---

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

const App = () => {
  return (
    <SchemaForm
      components={{ DatePicker }}
      onChange={console.log}
      defaultValue={{
        readOnly: '2019-02-02',
      }}
    >
      <Field x-component="DatePicker" title="DatePicker 选择日期" name="DatePicker" />
      <Field
        x-component="DatePicker"
        title="DatePicker 选择日期和时间"
        name="DatePickerTime"
        x-component-props={{
          showTime: true,
        }}
      />
      <Field
        x-component="DatePicker"
        title="readOnly"
        name="readOnly"
        readOnly
        x-component-props={{
          format: 'YYYY-MM-DD',
        }}
      />
    </SchemaForm>
  );
};

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