ant-design/components/date-picker/demo/size.md
dingkang be2b0d8a6e
docs: replace class component with hooks (#35500)
* docs(badge): replace class component with hooks

* docs(button): replace class component with hooks

* docs(calendar): replace class component with hooks

* docs(card): replace class component with hooks

* docs(button): replace class component with hooks

* chore(deps): remove webpack devDependencies

* docs(cascader): replace class component with hooks

* docs(checkbox): replace class component with hooks

* docs(collapse): replace class component with hooks

* docs(comment): replace class component with hooks

* docs(descriptions): replace class component with hooks

* docs(config-provider): replace class component with hooks

* docs(date-picker): replace class component with hooks
2022-05-11 19:43:54 +08:00

972 B

order title
11
zh-CN en-US
三种大小 Three Sizes

zh-CN

三种大小的输入框,若不设置,则为 default

en-US

The input box comes in three sizes. default will be used if size is omitted.

import { DatePicker, Radio, Space } from 'antd';

const { RangePicker } = DatePicker;

export default () => {
  const [size, setSize] = React.useState('default');

  const handleSizeChange = e => {
    setSize(e.target.value);
  };

  return (
    <Space direction="vertical" size={12}>
      <Radio.Group value={size} onChange={handleSizeChange}>
        <Radio.Button value="large">Large</Radio.Button>
        <Radio.Button value="default">Default</Radio.Button>
        <Radio.Button value="small">Small</Radio.Button>
      </Radio.Group>
      <DatePicker size={size} />
      <DatePicker size={size} picker="month" />
      <RangePicker size={size} />
      <DatePicker size={size} picker="week" />
    </Space>
  );
};