CODEWITHSUNDEEP
androidreactjsreact-native
Vitali Skripka
Vitali Skripka

Reputation: 622

How can i get selected date from ReactNative-DatePickerAndroid every time i pick it?

Is there some method, which handles changing of data every time, i pick new day, month or year? I use react-native-modal-datetime-picker. Solution from here is not what i need Get selected date from ReactNative-DatePickerAndroid.

Upvotes: 1

Views: 1325

Answers (2)

Ruchi Tiwari
Ruchi Tiwari

Reputation: 261

react-native-modal-datetime-picker works both for Android and iOS and get the selected date each time

DatePickerModal

onConfirm - once the date is selected from picker, fetching the selected date and modifications to it can be done in this.

To close the calender hide the picker in onCancel

Selected date can be formatted using moment

setFormattedDate(moment(sdate).format('yyyy-MM-DDT13:00:00.000Z'))

const showDatePicker = () => {
setDatePickerVisibility(true);
  };

  const hideDatePicker = () => {
setDatePickerVisibility(false);
  };

  const handleConfirm = (date) => {
hideDatePicker();

var currentMonth = date.getMonth() + 1;
var currentDate = date.getDate();

if (currentMonth < 10) { currentMonth = '0' + currentMonth; }
if (currentDate < 10) { currentDate = '0' + currentDate; }

let sdate = date.getFullYear()+"-" +currentMonth + "-" + currentDate ;
setDate(sdate)

  };


   <DateTimePickerModal
    style={{ width: 300, alignSelf: "center" }}
    isVisible={isDatePickerVisible}
    mode="date"
    minimumDate={new Date()}
    onConfirm={handleConfirm}
    onCancel={hideDatePicker}
  />

For detailed description and complete code - https://github.com/ritzblogs/reactnative-datetimepicker

Upvotes: 1

digit
digit

Reputation: 4565

From ReactNative-DatePickerAndroid docs:

static open[options]

Returns a Promise which will be invoked an object containing action, year, month (0-11), day if the user picked a date

Since ReactNative-DatePickerAndroid return a promise after you select a date, you can use then. So,

DatePickerAndroid.open({...config})
          .then(function (date) {
            if (date.action !== DatePickerAndroid.dismissedAction) {
              var newDate = new Date(date.year, date.month, date.day);
              console.log('selected date is: ', newDate)
            }
          });

Upvotes: 1

Related Questions