How to get date in the format of unix timestamp from date picker?

[Luckygirlllll]

Issue

I want to display to user time in the format "hh:mm a", but in database I want to save time in the format of unix tamstamp? Is it possible to get unix timestamp from DatePicker?

Expected Behavior

Code

This is what I have right now:

<DatePicker
        style={{ width: 130, marginLeft: -35 }}
        date={this.props.endAt}
        mode="time"
        placeholder="End time"
        format="hh:mm a"
        confirmBtnText="Confirm"
        cancelBtnText="Cancel"
        onDateChange={(date) => { this.props.onEndTimeClicked(this.props.id, date) }}
      />

Environment

1. react-native -v: 0.55.3
2. node -v: v6.11.3
3. npm -v: 5.6.0
4. yarn --version: 1.5.1
5. target platform: Android | iOS
6. operating system: MAC OS

[richardpatsch]

you could use moment.js to parse your "hh:mm a" and convert it to a unix time stamp with .unix(), but you need the date as well to create an epoch timestamp

[softhib]

I am in the same case. I want to display the date in a custom format (using date-fns library) and to catch the date of onDateChange in a getTime() format to store it in the DB.

getDateStr={date => {
      const newDate = format(date, "Do MMM YYYY [à] HH:mm", {
      locale: frLocale
   });
   return newDate;
}} // this way the date displayed is in the right format

onDateChange={Date => query(Date)}  
// but the date inserted to the DataBase is in the custom format. 
// usually the format in DB is not the same as the format displayed 
// so what is the solution provided by <DatePicker /> in this case ?

[softhib]

I finally proceed like this (which is partially convenient) :

const fromFrToEn = dateParsed => {
  let result = dateParsed.replace(/à/, "");
  result = result.replace(/le /, "");
  result = result.replace(/janv./, "Jan");
  result = result.replace(/fév./, "Feb");
  result = result.replace(/mars/, "Mar");
  result = result.replace(/avr/, "Apr");
  result = result.replace(/mai/, "May");
  result = result.replace(/juin/, "Jun");
  result = result.replace(/juill./, "Jul");
  result = result.replace(/août/, "Aug");
  result = result.replace(/sept./, "Sep");
  result = result.replace(/oct./, "Oct");
  result = result.replace(/nov./, "Nov");
  result = result.replace(/déc./, "Dec");

  return result;
};

 <DatePicker
   date={this.props.eventDate}
   mode="datetime"
   minDate={format(Date.now(), "le D MMM YYYY [à] HH:mm", {
       locale: frLocale
   })}
   getDateStr={date => {
        const newDate = format(date, "le D MMM YYYY [à] HH:mm", {
        locale: frLocale
      });
      return newDate;
   }}
   onDateChange={date => {
      this.props.onDateChange(
          Date.parse(fromFrToEn(date)  
          // here I have to convert to getTime() format /
          // which obliges me to create a function to translate eachj french month to english 😖
      ));
   }}
/>

[davidh99720]

We can achieve that by wrapping it in a component:

0. Wrap it with Controller component from useForm hook
1. Add a local state date with type Date
2. for selected, give the Date value
3. for value, give the displayed string with proper format
4. for output, use setValue of useForm hook
5. Update the local state date during onChange

[solyasa]

Above answer is right. But order is not good. so I am going to list again. We can achieve that by wrapping it in a component:

1. Wrap it with Controller component from useForm hook.
2. Add a local state date with type Date.
3. for selected, give the Date value.
4. for value, give the displayed string with proper format.
5. for output, use setValue of useForm hook.
6. Update the local state date during onChange.

May 11, 2018