Customize Time and Datepicker modals

[wasifkarigar]

Issue

Its working as expected. Just want to know how can i customize modals? How can i add more field to date and time modal ? How can i add text inside that timepicker modal ? And change button text of time picker from "OK' and "Cancel" to whatever i want?

[mauriciord]

I'm trying to do this exactly now, because of iOS Dark Mode and maybe there isn't this option :[

[wasifkarigar]

I also want to do the the same and also want to add some additional fields with the datepicker too. Is there any option for that ?

[mauriciord]

@wasifkarigar There is the datePickerCon style property. It's the style for the Modal body :]

[wasifkarigar]

But thats not happening for me, I already tried that but its only changing button style not the date time picker modals.

Here is my code which I am using

renderDateTimePickerDialog = (event, text) => {

    return <View style={{ margin: 5 }}>
            <DatePicker date={this.state[event]}
                    showIcon={false}
                    placeholder={text}
                    mode="datetime" format="YYYY-MM-DD HH:mm"
                    style={{width: '100%', backgroundColor: 'red'}}
                    customStyles={{
                        dateInput: {
                            borderWidth: 0,
                            right: 30,
                        },
                        dateText: {
                            marginTop: 10,
                            color: theme.textColor,
                            fontSize: 16,
                            fontFamily: 'Forza_Book',
                        },
                        placeholderText: {
                            color: theme.textColor,
                            fontSize: 16,
                            width: '100%',
                            fontFamily: 'Forza_Book',
                            justifyContent: 'center',
                            flex: 1,
                            textAlign:"center",
                            flexDirection: "row",
                            marginTop: 9,
                            left: 20
                        }
                    }}

                    onDateChange={(date) => { this.setDateTime(event,date) }}
                    placeholderTextColor="white"
                    underlineColorAndroid={'rgba(0,0,0,0)'}
                    is24Hour={true}
                    androidMode='spinner'
                    style={{ height: 40, width: '100%', paddingLeft: 15, borderRadius: 4, backgroundColor: theme.hoverColor  }}>

        </DatePicker>
    </View>

And this is the code which I am using to call the datetime picker modal 

`<View>
                <Text  style={{fontSize: 14,fontFamily: 'Forza_Book',marginTop:10,marginBottom:15}}>End</Text>
                {this.renderDateTimePickerDialog('end', 'SET END TIME & DATE')}
            </View>`

Also I want to add a texrinput in the modal too how can i do that ? 

Thanks in advance.

[mauriciord]

@wasifkarigar Did you try to use this inside customStyles?

                    customStyles={{
                        // datePickerCon here ############
                        datePikcerCon: {
                            backgroundColor: 'red',
                         },        
                        // ###########################
                        dateInput: {
                            borderWidth: 0,
                            right: 30,
                        },
                        dateText: {
                            marginTop: 10,
                            color: theme.textColor,
                            fontSize: 16,
                            fontFamily: 'Forza_Book',
                        },
                        placeholderText: {
                            color: theme.textColor,
                            fontSize: 16,
                            width: '100%',
                            fontFamily: 'Forza_Book',
                            justifyContent: 'center',
                            flex: 1,
                            textAlign:"center",
                            flexDirection: "row",
                            marginTop: 9,
                            left: 20
                        }
                    }}

Maybe there isn't no way to add an InputText inside the modal using this lib :[

[wasifkarigar]

@mauriciord yes i tried that nothing happens to the timepicker modal design with customStyle

[ernesto-ca]

For that, use theming in the native sides (android and ios). Android: https://material.io/develop/android/theming/color IOS: https://material.io/develop/ios/components/theming/color

I aware that this issue is so old but I hope this will helpful for some one in the future!