美文网首页
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