美文网首页
react-native 生日picker快速使用,复制即可

react-native 生日picker快速使用,复制即可

作者: 物联白菜 | 来源:发表于2021-07-21 16:45 被阅读0次

    1、安装

    yarn add react-native-picker

    yarn add moment

    react-native link react-native-picker

    2、页面使用

    import ModalPicker from 'react-native-picker';
    const moment = require('moment')
    
    
    <Text  style={{paddingHorizontal:30}}  onPress={()=>this._showPicker(1)}>生日</Text>
    
    
        //生日选择器
        _createDateData() {
            let date = [];
            let currentYear = Number(moment(new Date()).format('YYYY'))
            for(let i=1960;i<currentYear;i++){
                let month = [];
                for(let j = 1;j<13;j++){
                    let day = [];
                    if(j === 2){
                        for(let k=1;k<29;k++){
                            day.push(k+'日');
                        }
                        //Leap day for years that are divisible by 4, such as 2000, 2004
                        if(i%4 === 0){
                            day.push(29+'日');
                        }
                    }
                    else if(j in {1:1, 3:1, 5:1, 7:1, 8:1, 10:1, 12:1}){
                        for(let k=1;k<32;k++){
                            day.push(k+'日');
                        }
                    }
                    else{
                        for(let k=1;k<31;k++){
                            day.push(k+'日');
                        }
                    }
                    let _month = {};
                    _month[j+'月'] = day;
                    month.push(_month);
                }
                let _date = {};
                _date[i+'年'] = month;
                date.push(_date);
            }
            return date;
        }
    
    
        //显示选择器
        _showPicker(id) {
            switch (id) {
                case 1 :
                    ModalPicker.init({
                        pickerData: this._createDateData(),
                        pickerTitleText:'选择生日',
                        pickerCancelBtnText:'取消',
                        pickerConfirmBtnText:'完成',
                        // pickerConfirmBtnColor:[1, 186, 245, 1],
                        pickerCancelBtnColor:[0, 0, 0, 1],
                        pickerToolBarBg:[242, 242, 242, 1],
                        pickerBg:[242, 242, 242, 1],
                        pickerFontColor: [1, 186, 245, 1],
                        pickerRowHeight:26,
                        selectedValue:[],
                        onPickerConfirm: (pickedValue, pickedIndex) => {
                            let y = Number(pickedValue[0].slice(0,4))
                            let m = Number(pickedValue[1].slice(0,pickedValue[1].length-1))
                            let d = Number(pickedValue[2].slice(0,pickedValue[2].length-1))
                            let newM = m < 10 ? '0' + m : m
                            let newD = d < 10 ? '0' + d : d
                            let finalDay = `${y}-${newM}-${newD}`
                            console.log('生日Confirm', pickedValue,finalDay);
                            this.setState({
                                birthday:finalDay
                            })
                        },
                        onPickerCancel: (pickedValue, pickedIndex) => {
                            console.log('onPickerCancel', pickedValue, pickedIndex);
                        },
                        onPickerSelect: (pickedValue, pickedIndex) => {
                            console.log('onPickerSelect', pickedValue, pickedIndex);
                        }
                    });break;
                case 2 :this._showTimePicker();break;
    
            }
    
            ModalPicker.show();
        }
    
    
    
    
    3551626857070_.pic.jpg

    相关文章

      网友评论

          本文标题:react-native 生日picker快速使用,复制即可

          本文链接:https://www.haomeiwen.com/subject/ezvjmltx.html