@uiw/react-month-picker
TypeScript icon, indicating that this package has built-in type declarations

4.22.3 • Public • Published

MonthPicker 月份选择器

Buy me a coffee Open in unpkg NPM Downloads npm version

模态对话框。

import { MonthPicker } from 'uiw';
// or
import MonthPicker from '@uiw/react-month-picker';

基础用法

import React from 'react';
import { MonthPicker, Row, Col } from 'uiw';

export default function Demo() {
  const [formatDate, setFormatDate] = React.useState('2019/04')
  function onChange(date, formatDate) {
    setFormatDate(formatDate)
  }
  return (
    <Row gutter={10}>
      <Col style={{ width: 200 }} fixed>
        <MonthPicker size="large" onChange={onChange} placeholder="Select month" />
      </Col>
      <Col style={{ width: 200 }} fixed>
        <MonthPicker disabled value={formatDate} placeholder="Select month" />
      </Col>
    </Row>
  )
}

在表单中使用

import React from 'react';
import { Form, MonthPicker, Notify, Row, Col, Button } from 'uiw';

export default function Demo() {
  return (
    <div>
      <Form
        onSubmit={({initial, current}) => {
          if(current.date) {
            Notify.success({
              title: '提交成功!',
              description: `表单提交时间成功,时间为:${current.date}`,
            });
          } else {
            Notify.error({
              title: '提交失败!',
              description: `表单提交时间成功,时间为:${current.date},将自动填充初始化值!`,
            });
          }
          console.log('-->>', initial, current);
        }}
        fields={{
          date: {
            labelClassName: 'fieldLabel',
            labelFor: 'date-inline',
            children: <MonthPicker id="date-inline" />
          },
        }}
      >
        {({ fields, state, canSubmit }) => {
          return (
            <Row gutter={10}>
              <Col style={{ width: 200 }} fixed>{fields.date}</Col>
              <Col>
                <Button disabled={!canSubmit()} type="primary" htmlType="submit">提交</Button>
              </Col>
            </Row>
          )
        }}
      </Form>
    </div>
  )
}

Props

参数 说明 类型 默认值
value 初始时间值 Date -
placeholder 输入框提示文字 String -
allowClear 是否显示清除按钮 Boolean true
format 格式化时间,规则查看 formatter 文档 String YYYY/MM/DD
onChange 选择一天时调用。 Function(Date, formatDate) -
popoverProps 将参数传递给内部 <Popover> 组件 Object -
pickerCaptionProps 将参数传递给内部 <DatePicker> PickerCaption 组件 PickerCaptionProps -
disabled 组件 <Input> 的属性,禁用日历 Boolean -

更多属性文档请参考 <Input>

Package Sidebar

Install

npm i @uiw/react-month-picker

Weekly Downloads

175

Version

4.22.3

License

MIT

Unpacked Size

22.6 kB

Total Files

12

Last publish

Collaborators

  • uiwjs
  • wcjiang