React Native日期時(shí)間選擇組件的示例代碼
React Native日期時(shí)間選擇組件:react-native-datepicker,支持安卓和IOS雙平臺,支持單獨(dú)選擇日期、單獨(dú)選擇時(shí)間和選擇日期和時(shí)間,支持自定義日期格式。
效果圖
安裝方法
npm install react-native-datepicker --save
示例代碼
<Text style={styles.instructions}>time: {this.state.time}</Text> <DatePicker style={{width: 200}} date={this.state.datetime} mode="datetime" format="YYYY-MM-DD HH:mm" confirmBtnText="確定" cancelBtnText="取消" showIcon={false} onDateChange={(datetime) => {this.setState({datetime: datetime});}} /> <Text style={styles.instructions}>datetime: {this.state.datetime}</Text> <DatePicker style={{width: 200}} date={this.state.datetime1} mode="datetime" format="YYYY-MM-DD HH:mm" confirmBtnText="確定" cancelBtnText="取消" customStyles={{ dateIcon: { position: 'absolute', left: 0, top: 4, marginLeft: 0 }, dateInput: { marginLeft: 36 } }} minuteInterval={10} onDateChange={(datetime) => {this.setState({datetime1: datetime});}} /> <Text style={styles.instructions}>datetime: {this.state.datetime1}</Text>
主要參數(shù)說明
date:設(shè)置初始顯示的日期 mode:顯示的模式,date,datetime,time format:設(shè)置日期格式,默認(rèn)為'YYYY-MM-DD' confirmBtnText:確定按鈕的顯示名稱 cancelBtnText:取消按鈕的顯示名稱 minDate:顯示的最小日期 maxDate:顯示的最大日期 duration:時(shí)間間隔 onDateChange:日期變化時(shí)觸發(fā)的事件 placeholder:占位符
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
react?hooks?d3實(shí)現(xiàn)企查查股權(quán)穿透圖結(jié)構(gòu)圖效果詳解
這篇文章主要為大家介紹了react?hooks?d3實(shí)現(xiàn)企查查股權(quán)穿透圖結(jié)構(gòu)圖效果詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-01-01React 組件的狀態(tài)下移和內(nèi)容提升的操作方法
這篇文章主要介紹了React 組件的狀態(tài)下移和內(nèi)容提升,通過代碼講解了渲染性能的組件問題結(jié)合實(shí)例代碼給大家講解的非常詳細(xì),需要的朋友可以參考下2022-11-11React中useEffect與生命周期鉤子函數(shù)的對應(yīng)關(guān)系說明
這篇文章主要介紹了React中useEffect與生命周期鉤子函數(shù)的對應(yīng)關(guān)系說明,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09React實(shí)現(xiàn)單向數(shù)據(jù)流的方法
本文主要介紹了React實(shí)現(xiàn)單向數(shù)據(jù)流的方法2023-04-04React合成事件及Test Utilities在Facebook內(nèi)部進(jìn)行測試
這篇文章主要介紹了React合成事件及Test Utilities在Facebook內(nèi)部進(jìn)行測試,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-12-12react中使用ant組件庫的modal彈窗報(bào)錯(cuò)問題及解決
這篇文章主要介紹了react中使用ant組件庫的modal彈窗報(bào)錯(cuò)問題及解決方案,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-03-03react實(shí)現(xiàn)阻止父容器滾動(dòng)
這篇文章主要介紹了react實(shí)現(xiàn)阻止父容器滾動(dòng)方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11React生命周期方法之componentDidMount的使用
這篇文章主要介紹了React生命周期方法之componentDidMount的使用,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-06-06react中form.setFieldvalue數(shù)據(jù)回填時(shí) value和text不對應(yīng)的問題及解決方法
這篇文章主要介紹了react中form.setFieldvalue數(shù)據(jù)回填時(shí) value和text不對應(yīng)的問題及解決方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-07-07