CODEWITHSUNDEEP
react-native
Evanss
Evanss

Reputation: 23553

Date format for React Native DateTimePicker?

I'm using React Native DateTimePicker: https://github.com/react-native-datetimepicker/datetimepicker

The onChange event has a timestamp but I don't understand what format it's in. Eg today (2nd november) it's returning 1604324457992. But when I look this up with https://www.unixtimestamp.com it says its 01/07/52809 @ 2:46am (UTC)

import React from 'react';
import DateTimePicker from '@react-native-community/datetimepicker';

const Test = () => {
  const [showPicker, setShowPicker] = useState(false);

  const handleChange = (e) => {
    console.log(e); // e.nativeEvent.timestamp = 1604324457992
  };

  return (
        <DateTimePicker
          timeZoneOffsetInMinutes={0}
          value={new Date()}
          mode="date"
          is24Hour
          display="default"
          onChange={handleChange}
        />
      )
};

https://snack.expo.io/@jamesweblondon/awkward-churros

Upvotes: 2

Views: 3600

Answers (2)

Sayan Dey
Sayan Dey

Reputation: 472

For class component datetimepicker

import DateTimePicker from "@react-native-community/datetimepicker";
class Productdetails extends Component {
                  constructor(props) {
                    super();
                this.state = {
            rentStartDate: new Date(),
                      startDate: "",
                      endDate: "",
                      mode: false,}
        this.onChangeStart = this.onChangeStart.bind(this);
        }
     onChangeStart(event, selectedDate) {
        let currentDate = selectedDate || this.state.rentStartDate;
        this.setState({ show: Platform.OS === "ios", rentStartDate: currentDate });
        let mydate = JSON.stringify(currentDate)
          .split("T")[0]
          .trim()
          .replace('"', "");
    
        this.setState({ startDate: mydate });
      }
     showMode(currentMode) {
        this.setState({
          show: true,
          mode: currentMode,
        });
      }
    render(){
    return(<View style={{ flex: 1}}>
                  <Text style={{ textAlign: "center" }}>Start Date</Text>
                  <View
                    style={{
                      flex: 1,
                      flexDirection: "row",
                      justifyContent: "space-between",
                      alignItems: "center",
                      marginBottom: 5,
                      height: 40,
                      borderRadius: 2,
                      color: "black",
                      borderColor: "rgba(38, 38, 38,0.8)",
                      borderWidth: 1,
                      backgroundColor: "white",
                      paddingEnd: 5,
                    }}
                  >
                    <Text
                      style={{
                        fontSize: 14,
                        paddingLeft: 5,
                        backgroundColor: "white",
                        color: "black",
                      }}
                    >
                      {this.state.startDate}
                    </Text>
                    <TouchableHighlight onPress={() => this.showMode("date")}>
                      <Image
                        source={require("../images/calender.png")}
                        style={{ height: 24, width: 24 }}
                      />
                    </TouchableHighlight>
                    <Overlay
                      isVisible={this.state.show}
                      onBackdropPress={() => {
                        this.setState({ show: false });
                      }}
                    >
                      <DateTimePicker
                        testID="dateTimePicker"
                        value={this.state.rentStartDate}
                        mode={this.state.mode} //The enum of date, datetime and time
                        placeholder="select date"
                        format="DD-MM-YYYY"
                        confirmBtnText="Confirm"
                        cancelBtnText="Cancel"
                        timeZoneOffsetInMinutes={undefined}
                        modalTransparent={false}
                        animationType={"fade"}
                        display="default"
                        onChange={this.onChangeStart}
                        style={{ width: 320, backgroundColor: "white" }}
                      />
                    </Overlay>
                  </View>
                  <View></View>
                </View>)}}
export default React.memo(Productdetails);

Upvotes: 0

Nooruddin Lakhani
Nooruddin Lakhani

Reputation: 6967

Try out this was

function formatDate(dateString, currentDateFormat, FormattedDateFormat) {
  return moment(dateString, currentDateFormat).format(FormattedDateFormat);
}


handleChange = (event, date) => {
  const format = "YYYY-MM-DD";
  const displayFormat = "DD MMM YYYY";

  const displayDate = formatDate(date, format, displayFormat); // display Date
};

<DateTimePicker
    timeZoneOffsetInMinutes={0}
    value={new Date()}
    mode="date"
    is24Hour
    display="default"
    onChange={handleChange}
    format={"YYYY-MM-DD"}
    displayFormat={"DD MMM YYYY"}
/>

Upvotes: 1

Related Questions