自製日期選擇器-1 (輸入介面規劃)

發表於 更新於

我決定要來做一個 for RN 的日期選擇器

原因是因為雖然之前有查到兩個套件，但都有點不合需求:

第一個是 react-native-modal-datetime-picker
是調用 android/ios 原生的日期選擇器
雖然用起來很順又好看 (畢竟是原生元件)
但唯一的缺點是不能選日期區間 QQ
而我們想要用的就是選時段的功能 r
像是設定旅行日期之類的

第二個是 react-native-daterange-picker
這看起來是 Naxulanth 這位網友自製的元件
畫面簡潔，也可以選擇日期區間
但是，使用上有很多限制
doc 也沒有寫的很完整，實際使用方式跟示範的 code 有點不同
還有不少 bug

正好我也想當練習
就來做一個屬於自己的日期判斷器吧
如果開發的不錯，就順便發布出去 讚

寫這篇文的現在其實還沒做好
所以可能會分成幾個章節吧

輸入介面規劃 Interface Design

我希望這個元件的畫面、以及使用方式都夠簡單
並沿用 react-native-modal 的使用介面做開發
暫定最簡短的介面如下:

1
2
3
4
5
6
<DatePicker
 // 是否顯示
 // 開啟時顯示的日期
 // 模式:單日還是期間
 // 按完成後回傳的日期
/>

這四個是 required attributes
後續可能可以再加一些 styling 的屬性進來
但目前還是先 focus 在這幾個上面就好

1. 是否顯示

名稱: isVisible
類型: Boolean
說明: 這應該沒什麼，就是開啟或關閉日期選擇器

2. 開啟時顯示的日期

名稱: displayDate
類型: Date物件
說明: 選填但是建議輸入，沒設定的話就預設為現在。當選擇器開啟時會顯示這個時間的月份，你可以利用這個屬性讓選擇器顯示使用者上次所選的日期的月份

3. 單日還是期間

名稱: mode
類型: string
輸入值: 'single' / 'range'
說明: 模式選擇: 要回傳單一日期就選 ‘single’；要回傳一段時間就選 ‘range’

4. 按完成後回傳的日期

名稱: onConfirm
類型: function
輸入值: (data)=>{ }
說明: 回傳一個物件。如果是單日模式物件的結構會是: 

1
2
3
4
5
data={
 date:Date(),
 startDate:null,
 endDate:null
}

反之如果是期間模式則是:

1
2
3
4
5
data={
 date:null,
 startDate:Date(),
 endDate:Date()
}

好啦 第一篇就先到這
這可能會是個大系列(會分很多篇的意思XD)