xgfe / react-native-datepicker

react native datePicker component for both Android and IOS, useing DatePikcerAndroid, TimePickerAndroid and DatePickerIOS
MIT License
2.12k stars 726 forks source link

iconComponent and iconSource Can they be set at the same time ? #392

Open gaoEnglish opened 4 years ago

gaoEnglish commented 4 years ago

Issue

I want to have Icons on the left and right, what should I do?

Code

           <DatePicker
            style={{width: '100%'}}
            date={date}
            iconSource={require('../../../../assets/images/pages/calendar.png')} 
            showIcon={true}
            mode="datetime"
            placeholder="开始日期"
            format="YYYY-MM-DD HH:mm:ss "
            confirmBtnText="确定" // Specify the text of confirm btn in ios.
            cancelBtnText="取消"   // Specify the text of cancel btn in ios.
            customStyles={{
              dateIcon: {
                position: 'absolute',
                left: 100,
                top: 4,
                marginLeft: 0
              },
              dateInput: {
                //position: 'absolute',
                //right: 0,
                marginLeft: 36,
                borderWidth:0
              },
              dateText:{
                color:colors.primary
              }
              // ... You can check the source to find the other keys.
            }}
            iconComponent={// 设置之后 iconSource 失效 且 icon 不能改变位置
              <Icon
                name={ 'clock-o' }
                color={ colors.primary }
                size={ 20 }
                style={{ marginLeft: 10 }}
              />
            }
            onDateChange={(date) => {
                console.log(date)
                if(date){
                  setDateStamp(new Date(date).getTime());
                  setDate(date);
                }

              }
            }
          />