mainam-react-native-date-picker

Thư viện chọn ngày/giờ dạng modal cho React Native, có giao diện riêng cho iOS và Android. Phiên bản hiện tại hướng tới React Native 0.80.3, React 19.1.0.

Cài đặt

npm install mainam-react-native-date-picker

Các dependency native cần được liên kết theo cơ chế autolinking của React Native:

• @react-native-community/datetimepicker
• react-native-wheel-picker-android
• react-native-modal

Cách dùng nhanh

import DatePicker from 'mainam-react-native-date-picker';

export default function Example() {
  return (
    <DatePicker
      isVisible
      mode="date"
      date={new Date()}
      titleIOS="Chọn ngày"
      confirmTextIOS="Đồng ý"
      cancelTextIOS="Hủy"
      onConfirm={(date) => console.log(date)}
      onCancel={() => console.log('Đã hủy')}
    />
  );
}

Props chính

| Prop | Kiểu | Mặc định | Mô tả | | --- | --- | --- | --- | | isVisible | boolean | false | Điều khiển trạng thái hiển thị modal. | | mode | 'date' \| 'time' \| 'datetime' \| 'month' | 'date' | Chế độ chọn ngày, giờ hoặc tháng. | | date | Date | new Date() | Ngày mặc định cho picker. | | time | Date | Không có | Giờ mặc định cho Android time picker. | | minimumDate | Date | Không có | Ngày/giờ nhỏ nhất được phép chọn. | | maximumDate | Date | Không có | Ngày/giờ lớn nhất được phép chọn. | | onConfirm | function | Bắt buộc | Callback nhận Date sau khi người dùng xác nhận. | | onCancel | function | Bắt buộc | Callback khi người dùng hủy modal. | | onHideAfterConfirm | function | () => {} | Callback sau khi modal iOS ẩn xong và đã confirm. | | titleIOS | string | 'Chọn ngày' | Tiêu đề modal chọn ngày. | | titleTime | string | 'Chọn giờ' | Tiêu đề modal Android khi mode="time". | | confirmTextIOS | string | 'Confirm' | Nội dung nút xác nhận. | | cancelTextIOS | string | 'Cancel' | Nội dung nút hủy. | | reactNativeModalPropsIOS | object | {} | Props truyền thêm cho react-native-modal. |

Cấu trúc mã nguồn

• index.js: chọn implementation theo Platform.OS.
• ios/index.js: modal dùng @react-native-community/datetimepicker.
• android/CustomDatePickerAndroid.js: modal Android dùng picker dạng wheel.
• android/DatePicker.js: wheel chọn tháng/ngày/năm.
• android/TimePicker.js: wheel chọn giờ/phút.
• scripts/check-syntax.js: kiểm tra cú pháp source bằng Babel parser.

Kiểm tra

npm test

Lệnh trên parse toàn bộ file source chính để phát hiện lỗi cú pháp JSX, Flow và class properties. Ngoài ra, repo còn kiểm tra hồi quy cho react-native-modal để chắc chắn dependency này không còn dùng BackHandler.removeEventListener(...), là nguyên nhân gây lỗi undefined is not a function khi đóng modal trên React Native mới.

Lưu ý môi trường

React Native 0.80.3 yêu cầu Node >=18. Nếu chạy npm install bằng Node thấp hơn, npm sẽ cảnh báo EBADENGINE.