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);