Date Picker React Native
Đây là Date Picker cho React Native với các tính năng chính sau đây:
📱 Hỗ trợ iOS, Android và Expo
🕑 3 chế độ khác nhau: Thời gian, Ngày, Ngày và thời gian
🌍 Nhiều ngôn ngữ
🎨 Có thể tùy chỉnh
🖼 Modal hoặc Inlined
Modal
Tùy chọn đầu tiên là sử dụng modal tích hợp sẵn. Xem mã nguồn.
 |
 |
|---|---|
| iOS | Android |
InlinedModal
Tùy chọn đầu tiên là sử dụng modal tích hợp sẵn. See code.
 |
 |
|---|---|
| iOS | Android |
Inlined
Tùy chọn thứ hai là sử dụng picker tích hợp. Đặt nó trong một View hoặc modal tự tạo. See code.
 |
 |
|---|---|
| iOS | Android |
Yêu cầu
- Xcode >= 11.6
- React Native >= 0.57.
- Nếu sử dụng React Native 0.64, phải sử dụng phiên bản 0.64.2 hoặc mới hơn.
- Nếu sử dụng Expo, phải sử dụng SDK 42 hoặc mới hơn. Nếu sử dụng Expo SDK 44, phải sử dụng phiên bản 44.0.4 hoặc mới hơn.
Expo
- ✅ Bạn có thể sử dụng thư viện này với Development Builds. Không cần cài đặt thêm plugin.
- ❌ Thư viện này không thể sử dụng trong ứng dụng “Expo Go” vì nó requires custom native code.
Cài đặt
. Tải gói với npm hoặc yarn
npm install react-native-date-picker
yarn add react-native-date-picker
. Cài đặt pods
cd ios && pod install
. Rebuild dự án
npx react-native run-android
npx react-native run-ios
Nếu bạn gặp khó khăn sau khi làm theo các bước này, có thể có một linking issue.
Ví dụ 1: Modal
import React, { useState } from 'react'
import { Button } from 'react-native'
import DatePicker from 'react-native-date-picker'
export default () => {
const [date, setDate] = useState(new Date())
const [open, setOpen] = useState(false)
return (
<>
<Button title="Open" onPress={() => setOpen(true)} />
<DatePicker
modal
open={open}
date={date}
onConfirm={(date) => {
setOpen(false)
setDate(date)
}}
onCancel={() => {
setOpen(false)
}}
/>
)
}
Ví dụ 2: Inlined
import React, { useState } from 'react'
import DatePicker from 'react-native-date-picker'
export default () => {
const [date, setDate] = useState(new Date())
return <DatePicker date={date} onDateChange={setDate} />
}
Thuộc tính
| Thuộc tính | Mô tả | Ảnh chụp màn hình iOS | Ảnh chụp màn hình Android |
|---|---|---|---|
date |
Ngày hiện tại được chọn. | ||
onDateChange |
Xử lý sự thay đổi ngày (chỉ cho chế độ Inline ) | ||
fadeToColor |
Màu nền Android picker đang dần chuyển sang. {màu sắc, ‘không’} | ||
maximumDate |
Ngày tối đa có thể chọn. | ||
Ví dụ: new Date("2021-12-31") |
|||
minimumDate |
Ngày tối thiểu có thể chọn. | ||
Ví dụ: new Date("2021-01-01") |
|||
androidVariant |
Chọn từ 2 biến thể kiểu Android. "iosClone", "nativeAndroid" |
  |
|
minuteInterval |
Khoảng thời gian mà có thể chọn đến từng phút. |  |
 |
mode |
Chế độ Date Picker. "datetime", "date", "time" |
   |
  |
locale |
Ngôn ngữ cho Date Picker. Thay đổi ngôn ngữ, thứ tự ngày và ưa thích am/pm. Giá trị cần là Locale ID. |  |
 |
textColor |
Thay đổi màu văn bản. ⚠ Các màu khác ngoài đen (#000000) hoặc trắng (#ffffff) sẽ thay thế chuỗi “Hôm nay” bằng một ngày trên iOS 13 hoặc cao hơn. |  |
 |
timeZoneOffsetInMinutes |
Độ lệch múi giờ trong phút (mặc định: múi giờ của thiết bị) | ||
dividerHeight |
Thay đổi chiều cao của đường chia (chỉ hỗ trợ cho iosClone) | ||
is24hourSource |
Thay đổi cách 24 giờ (am/pm) nên được xác định, thông qua cài đặt thiết bị hoặc thông qua ngôn ngữ. {‘locale’, ‘device’} (chỉ Android, mặc định: ‘device’) | ||
modal |
Boolean chỉ định liệu modal có nên sử dụng hay không. Mặc định: "false". Khi bật, các thuộc tính modal khác cần phải được sử dụng. See example. |
||
open |
Chỉ modal: Boolean chỉ định liệu modal có nên mở hay không. | ||
onConfirm |
Chỉ modal: Callback ngày khi người dùng nhấn nút xác nhận | ||
onCancel |
Chỉ modal: Callback khi người dùng nhấn nút hủy hoặc đóng modal bằng cách nhấn bên ngoài nó. | ||
title |
Chỉ modal: Văn bản tiêu đề. Có thể đặt là null để loại bỏ văn bản. | ||
confirmText |
Chỉ modal: Văn bản nút xác nhận. | ||
cancelText |
Chỉ modal: Văn bản nút hủy. | ||
theme |
Chỉ modal: Chủ đề của modal. "light", "dark", "auto". Mặc định là "auto". |
Tùy chỉnh kiểu Android bổ sung
Có một số cơ hội tùy chỉnh kiểu cho biến thể picker “androidNative”.
Màu đường chia
Để thay đổi màu đường chia, mở tệp styles.xml và đặt mã này ngay trên dòng </resources>.
<style name="DatePickerTheme" parent="DatePickerBaseTheme">
<item name="android:colorControlNormal">#dd00ff</item>
</style>
Màu nút
Để thay đổi màu của nút xác nhận và nút hủy. Mở tệp styles.xml và đặt mã này trong chủ đề của bạn.
<item name="colorAccent">#dd00ff</item>
Cỡ chữ
Để thay đổi cỡ chữ trên biến thể nativeAndroid của Android. Mở tệp styles.xml và đặt mã này ngay trên dòng </resources>. Cỡ chữ không thể thay đổi trên iOS mặc định, nhưng có một số iOS workarounds.
<style name="DatePickerTheme" parent="DatePickerBaseTheme">
<item name="android:textSize">25sp</item>
</style>
Liên kết
Gói này hỗ trợ liên kết tự động. Thông thường, bạn chỉ cần cài đặt gói, các phụ thuộc cocoapods (như đã mô tả ở trên). Sau đó, rebuild dự án bằng cách chạy react-native run-ios, react-native run-android hoặc bắt đầu quá trình xây dựng từ trong Xcode/Android Studio. Nếu bạn đang chạy một phiên bản React Native dưới 0.60 hoặc cài đặt của bạn gặp vấn đề với việc liên kết tự động, bạn có thể chạy npx react-native link react-native-date-picker và rebuild. Trong một số trường hợp, bạn có thể phải liên kết gói thủ công. Hướng dẫn trong this issue.
Câu hỏi thường gặp
Làm thế nào để thay đổi thứ tự ngày? (Sang YYYY-MM-DD vv)
Thứ tự được xác định bằng thuộc tính locale. Đặt ví dụ locale='fr' để có ưa thích tiếng Pháp.
Làm thế nào để thay đổi định dạng 12/24 giờ hoặc AM/PM?
Trên iOS, ưu tiên 12/24 giờ được xác định bởi thuộc tính locale. Đặt ví dụ locale='fr' để có ưu tiên tiếng Pháp. Trên Android, định dạng 12/24 giờ được xác định bởi cài đặt thiết bị mặc định. Thêm is24hourSource="locale" để cho phép ngôn ngữ xác định cài đặt thiết bị trên Android. Khi sử dụng chế độ 12 giờ, phần AM/PM của picker sẽ được hiển thị. Không được khuyến nghị ép buộc bất kỳ định dạng 12/24 giờ cụ thể nào, nhưng điều này có thể được thực hiện bằng cách chọn một ngôn ngữ có ưu tiên 24 giờ mong muốn và thêm is24hourSource="locale".
Có thể hiển thị chỉ tháng và năm không?
Điều này, tiếc thay, không thể thực hiện được do giới hạn trong DatePickerIOS. Bạn nên có khả năng tạo picker tháng-năm riêng của mình ví dụ như https://github.com/TronNatthakorn/react-native-wheel-pick.
Tại sao ứng dụng Android bị crash trong chế độ sản xuất?
Nếu bạn đã bật Proguard cho Android, có thể bạn cần bỏ qua một số lớp để đảm bảo rằng picker hoạt động đúng cách trong chế độ sản xuất/release của Android. Thêm các dòng sau vào tệp proguard của bạn (thường được gọi là proguard-rules.pro):
-keep public class net.time4j.android.ApplicationStarter
-keep public class net.time4j.PrettyTime
Cần gì để nâng cấp lên v4 (4.0.0)?
Không có sự thay đổi gây lỗi trong v4, vì vậy chỉ cần tăng số phiên bản trong package json của bạn.
Hai biến thể Android khác nhau
Trên Android, có hai biến thể thiết kế để chọn:
| Sao chép iOS | Native Android |
|---|---|
 |
 |
| Gọi là “Sao chép iOS” có vẻ và hoạt động tương tự phiên bản iOS. Thường hiển thị 5 dòng ngày. Mặc định đã bật. | Phiên bản “Native Android” trông giống với một ứng dụng Android bình thường. |
androidVariant = ‘iosClone’
|
androidVariant = ‘nativeAndroid’
Ba chế độ khác nhau
Dưới đây là một số thông tin về ba chế độ picker khác nhau mà bạn có thể sử dụng.
Picker ngày giờ
Sử dụng chế độ datetime sẽ cung cấp cho bạn một picker ngày giờ của React Native, nơi cả ngày và giờ có thể được chọn cùng một lúc. Ngày hôm nay sẽ được thay thế bằng chuỗi “Hôm nay” được dịch sang ngôn ngữ mong muốn. Đây là chế độ mặc định và trông như thế này.
| iOS | Android |
|---|---|
|
|
Thêm thuộc tính chế độ datetime tùy chọn để sử dụng chế độ này. Vì datetime là mặc định, nó cũng có thể được loại trừ.
<DatePicker
...
mode="datetime"
/>
Picker ngày tháng
Chế độ ngày hiển thị một picker ngày của React Native với năm, tháng và ngày, trong đó thứ tự năm-tháng-ngày sẽ được điều chỉnh theo ngôn ngữ địa phương. Nó sẽ trông giống như thế này:
| iOS | Android |
|---|---|
|
|
Chỉ cần thêm giá trị date vào thuộc tính chế độ:
Picker thời gian
Chế độ thời gian có thể được sử dụng khi chỉ có thời gian quan trọng. AM/PM sẽ được thêm vào tùy thuộc vào ngôn ngữ địa phương và cài đặt người dùng. Có thể hữu ích để thêm timeInterval để chỉ hiển thị thời gian với khoảng cách, ví dụ như 15 phút. Picker thời gian của React Native trông như thế này:
| iOS | Android |
|---|---|
|
|
Đặt thuộc tính chế độ thành time để hiển thị picker thời gian:
<DatePicker
...
mode="time"
/>
Về
React Native Date Picker là một thành phần đa nền tảng cho iOS và Android. Nó sử dụng mã nguồn native từ nền tảng tương ứng để có giao diện và trải nghiệm người dùng thực sự mà người dùng mong đợi. Một động lực mạnh mẽ để tạo ra picker này là chế độ datetime trên Android. Điều này khá độc đáo đối với nền tảng và tránh được hai cửa sổ pop-up picker khác nhau, điều mà thường cần thiết. Thay vào đó, chế độ datetime này đòi hỏi ít hành động của người dùng hơn và tạo điều kiện trải nghiệm tốt cho người dùng.
Ủng hộ gói này!
Nếu bạn thích gói này, hãy xem xét đánh giá nó trên Github ⭐
Ngoài ra, các PR (pull request) cũng được hoan nghênh!
Chi tiết tải xuống:
Tác giả: henninghall
Nguồn: https://github.com/henninghall/react-native-date-picker
Giấy phép: MIT license
