Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Unable to change placeholderText color

See original GitHub issue

Hi, I am running on iOS , rn: 0.36, react-native-datepicker: 1.4.3

I’ve tried adding this into

<DatePicker
              style={{width: 300}}
              date={this.props.state.startTime}
              mode="time"
              placeholder="Select start time"
              format="YYYY-MM-DD HH:mm"
              showIcon={false}
              is24Hour={false}
              
              onDateChange={(timeStart) => this._setStartTime(timeStart)}
              customStyles={{
                placeholderText: {
                  color: '#ffffff'
                }
              }}
            />

I expected the placeholder text to be white, what am I doing wrong? thanks

Issue Analytics

State:
Created 7 years ago
Reactions:5
Comments:5 (1 by maintainers)

Top GitHub Comments

24reactions

SeuZeRicardocommented, Jul 26, 2017

To change the placeholder color in IOS. You need to manipulate the dateText style

        <DatePicker
          showIcon={false} 
          style={{width: null}}
          date={this.state.date}
          mode="date"
          placeholder="Start Time"
          format="MM-DD-YYYY"
          confirmBtnText="Confirm"
          cancelBtnText="Cancel"
          customStyles={{
            dateInput:{
              borderWidth: 0,
              borderBottomWidth: 1,
              borderBottomColor: '#00c5fb',
            },
            dateText:{
              color: '#c7c8ca',
              justifyContent: 'flex-start'
            }
          }}
          onDateChange={(date) => {this.setState({date: date})}}
        />`

21reactions

spoeckcommented, May 8, 2017

You can change the fontSize if you manipulate the placeholderText Style:

Edit: Works fine on Android + RN 0.44

 <DatePicker
                style={{width: 200, height: 100}}
                date={this.state.date}
                mode="date"
                placeholder="Datum"
                format="DD.MM.YYYY"
                confirmBtnText="Ok"
                cancelBtnText="Abbrechen"
                customStyles={{
                  dateIcon: {
                    position: 'absolute',
                    left: 40,
                    top: 4,
                    marginLeft: 0
                  },
                  dateInput: {
                    borderColor: '#234456',
                    borderWidth: 1,
                    borderRadius: 4,
                    marginLeft: 36,
                    paddingLeft: 15,
                  },
        
                  placeholderText: {
                      fontSize: 18,
                      color: '#234456'
                  }
                }}
                onDateChange={(date) => {this.setState({date: date})}}
/>

Top Results From Across the Web

Changing an input's HTML5 placeholder color with CSS does ...

I tried to colorize my placeholder, but it still stay grey on Chrome 17.0.963.56 m. HTML <input type='text' name='test' placeholder= ...

Placeholder Text Color Override Not Working - HTML & CSS

Looking at this page, I've applied the following code which doesn't seem to be overriding the placeholder text color:

How To Change Input Placeholder Color - W3Schools

Step 2) Add CSS: In most browsers, the placeholder text is grey. To change this, style the placeholder with the non-standard ::placeholder selector....

Unable to change input placeholder color - WordPress.org

Am trying to change the color of the placeholder text in the Address input fields from white to black. Have Tried: form input[type="text"]::placeholder, ......

Placeholder text color not able to change #446 - GitHub

I am using this library for picker, but i am not able to change placeholder text color, i tried all ways placeholderTextColor =...