React Native日期時間選擇組件的示例代碼
React Native日期時間選擇組件:react-native-datepicker,支持安卓和IOS雙平臺,支持單獨選擇日期、單獨選擇時間和選擇日期和時間,支持自定義日期格式。
效果圖
安裝方法
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è)置日期格式,默認為'YYYY-MM-DD' confirmBtnText:確定按鈕的顯示名稱 cancelBtnText:取消按鈕的顯示名稱 minDate:顯示的最小日期 maxDate:顯示的最大日期 duration:時間間隔 onDateChange:日期變化時觸發(fā)的事件 placeholder:占位符
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
react?hooks?d3實現(xiàn)企查查股權(quán)穿透圖結(jié)構(gòu)圖效果詳解
這篇文章主要為大家介紹了react?hooks?d3實現(xiàn)企查查股權(quán)穿透圖結(jié)構(gòu)圖效果詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-01-01React 組件的狀態(tài)下移和內(nèi)容提升的操作方法
這篇文章主要介紹了React 組件的狀態(tài)下移和內(nèi)容提升,通過代碼講解了渲染性能的組件問題結(jié)合實例代碼給大家講解的非常詳細,需要的朋友可以參考下2022-11-11React中useEffect與生命周期鉤子函數(shù)的對應(yīng)關(guān)系說明
這篇文章主要介紹了React中useEffect與生命周期鉤子函數(shù)的對應(yīng)關(guān)系說明,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-09-09React實現(xiàn)單向數(shù)據(jù)流的方法
本文主要介紹了React實現(xiàn)單向數(shù)據(jù)流的方法2023-04-04React合成事件及Test Utilities在Facebook內(nèi)部進行測試
這篇文章主要介紹了React合成事件及Test Utilities在Facebook內(nèi)部進行測試,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-12-12React生命周期方法之componentDidMount的使用
這篇文章主要介紹了React生命周期方法之componentDidMount的使用,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-06-06react中form.setFieldvalue數(shù)據(jù)回填時 value和text不對應(yīng)的問題及解決方法
這篇文章主要介紹了react中form.setFieldvalue數(shù)據(jù)回填時 value和text不對應(yīng)的問題及解決方法,本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-07-07