How to use NativeBase DatePicker

Question

Given this DatePicker Api from NativeBase v2.5.1 how am I supposed to capture the change date event with the new selected date?

If I understand well the selected date is only available in the internal state of the component:

setDate(date) {
    this.setState({ chosenDate: new Date(date) });
}

I imagine I can use the react native ref api but it doesn't seem right since other similar components do offer the onDateChange event, eg: react-native-datepicker

Yes, that seems better! Why not doing it for Android as well? — user2457870, Jun 11 '18 at 10:04
Fixed with [v2.5.2](https://github.com/GeekyAnts/NativeBase/releases/tag/v2.5.2) — Supriya Kalghatgi, Jun 15 '18 at 05:38
The above should solve your requirement. just add the function dateChangedHandler() — sg28, Mar 06 '19 at 01:00
see this https://docs.nativebase.io/Components.html#date-picker-def-headref — Abhi, Feb 04 '20 at 10:44

Supriya Kalghatgi · Accepted Answer · 2018-06-15T05:38:45.613

2

Check docs for Date Picker https://docs.nativebase.io/Components.html#date-picker-def-headref

Sample example from NativeBase KitchenSink https://github.com/GeekyAnts/NativeBase-KitchenSink/blob/master/src/screens/datepicker/index.js

Fixed with v2.5.2

edited Jun 15 '18 at 05:38

answered Jun 11 '18 at 06:04

Supriya Kalghatgi

1,155
9
10

2

@Supriya Kalghatgi , While i am using Date Picker from Native base, when date picker shows up on ios, is shows with a white background instead of the UI in which date picker is called. native-base version : "2.7.2" , is there any solution or is it a bug? ,please check – Adarsh Aug 07 '18 at 13:57

score 2 · Answer 2 · edited Aug 06 '19 at 12:59

2

Fixed in native-base v2.6.1 onwards.

<DatePicker
formatChosenDate={date => {return moment(date).format('YYYY-MM-DD');}}
..... />

edited Aug 06 '19 at 12:59

A Jar of Clay

5,622
6
25
39

answered Aug 06 '19 at 11:55

Newana

71
1
5

I'm trying to manipulate the default date in code by e.g. adding 6 months to today's date, the value is updated in the state, but doesn't get updated within the component (https://stackoverflow.com/questions/62147922/react-native-native-base-datepicker-issue). Any ideas? – jmckie Jun 10 '20 at 13:16

score 0 · Answer 3 · answered Jun 25 '18 at 09:54

0

You can set,

onDateChange={(date) => this.setDate(date)}

and make sure you have updated the native-base version to to v2.6.1

Check out : v2.6.1

answered Jun 25 '18 at 09:54

Hasangi

280
7
17

score 0 · Answer 4 · answered Dec 11 '19 at 06:21

import {DatePicker} from 'native-base'

        this.state = {
            date : ''
        }
    render(){
        console.log('selected date',this.state.date)
        render(
            <View>
                <DatePicker
                    defaultDate={new Date(1994, 3, 23)}
                    // minimumDate={new Date()}
                    textStyle={'#000'}
                    placeHolderTextStyle={'#000'}
                    onDateChange={(date) => this.setState({ date })}
                 />
            </View>
        )
    }

How to use NativeBase DatePicker

4 Answers4