React Native封装选择年月Picker组件

最新推荐文章于 2025-06-03 09:57:50 发布

原创

最新推荐文章于 2025-06-03 09:57:50 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#js #react native

需要安装库 @ant-design/react-native

// MonthPicker.js
import React, {memo} from 'react';
import {DatePicker} from '@ant-design/react-native';

const MonthPicker = ({value, onChange, visible, onCancel}) => {
  return (
    <DatePicker
      value={value}
      visible={visible}
      onDismiss={onCancel}
      mode="month"
      defaultDate={new Date()}
      minDate={new Date(2015, 1, 1)}
      // maxDate={new Date(2026, 11, 3)}
      onChange={onChange}
      format="YYYY-MM-DD"
    />
  );
};

export default memo(MonthPicker);

用法

// 设置初始值
const [time, setTime] = useState(new Date('2020-06-01'));
const onCancel = useCallback(() => {
  setVisible(false);
}, []);

const onChange = useCallback((time) => {
  setTime(time);
  setVisible(false);
}, []);  

// 时间显示，点击时间，选择年月组件显示