const [mydate, setDate] = useState(new Date());
const [displaymode, setMode] = useState('date');
const [isDisplayDate, setShow] = useState(false);
const changeSelectedDate = (event, selectedDate) => {
const currentDate = selectedDate || mydate;
setDate(currentDate);
};
const showMode = (currentMode) => {
setShow(true);
setMode(currentMode);
};
const displayDatepicker = () => {
showMode('date');
};
return (
<SafeAreaView style={styles.container}>
<View>
<Button onPress={displayDatepicker} title="Show date picker!" />
</View>
{isDisplayDate && (
<DateTimePicker
testID="dateTimePicker"
value={mydate}
mode={displaymode}
is24Hour={true}
display="default"
onChange={changeSelectedDate}
/>
)}
i have a button that opens a datepiker when i click ok on the date piker the date piker soes not close also i want the selected date to be console loged() when i click on ok
Add setShow(false) in function changeSelectedDate.
eg
const changeSelectedDate = (event, selectedDate) => {
const currentDate = selectedDate || mydate;
setDate(currentDate);
setShow(false)
};
Related
i am trying to make a date piker i am able to open the date picker and delect date but i am not able to dispaly the picked date in the input fild 1s a date is selected
const [text, setpicdate] = useState(); //date is slected here
const [mydate, setDate] = useState(new Date());
const [displaymode, setMode] = useState('date');
const [isDisplayDate, setShow] = useState(false);
const changeSelectedDate = (event, selectedDate) => {
setDate(selectedDate);
setpicdate(selectedDate);
setShow(false);
};
const showMode = currentMode => {
setShow(true);
setMode(currentMode);
};
const displayDatepicker = () => {
showMode('date');
};
<TextInput
style={styles.forminput}
label="Baby's Date of Birth"
defaultValue={text} // displaying date error
onPressIn={displayDatepicker}
// onclick={displayDatepicker}
/>
{isDisplayDate && (
<DateTimePicker
testID="dateTimePicker"
value={mydate}
mode={displaymode}
is24Hour={true}
display="default"
// onDateChange={text => {
// setTextname(text);
// }}
// // onChange={text => changeSelectedDate()}
onChange={changeSelectedDate}
/>
)}
Replace your TextInput by
<TouchableOpacity onPress={displayDatepicker}>
<Text>{moment(mydate).format('DD/MM/YYYY')}</Text>
</TouchableOpacity>
use moment js npm package for dates formatting and validation
https://www.npmjs.com/package/moment
Update Your code Like this, it will work.
import DateTimePicker from '#react-native-community/datetimepicker';
import React, {useState} from 'react';
import {SafeAreaView, StyleSheet, TextInput} from 'react-native';
export default function Test() {
const [mydate, setDate] = useState(new Date());
const [displaymode, setMode] = useState('time');
const [text, setpicdate] = useState(new Date());
const [isDisplayDate, setShow] = useState(false);
const changeSelectedDate = (event, selectedDate) => {
setpicdate(selectedDate);
setShow(false);
};
const showMode = currentMode => {
setShow(true);
setMode(currentMode);
};
const displayTimepicker = () => {
showMode('date');
};
return (
<SafeAreaView style={styles.container}>
<TextInput
onFocus={displayTimepicker}
defaultValue={mydate.toDateString()}
value={text.toDateString()}
style={{backgroundColor: 'lightgray', height: 50, width: '70%'}}
label="Baby's Date of Birth"
/>
{isDisplayDate && (
<DateTimePicker
testID="dateTimePicker"
value={mydate}
mode={displaymode}
is24Hour={true}
display="default"
onChange={changeSelectedDate}
/>
)}
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
});
I can't get the datetimepicker to only open on the selected time. It seems to render the 3 available inputs that are available. I'm unsure how to deal with the showStart section where the datetimepicker window appears.
I would like to allow it to only show the relevant datetimepicker for the time selected when time is picked.
This is the current result.
Here is my code.
const renderItem = ({ item }) => {
const onChangeStart = (event, selectedTime) => {
setStartTime1(selectedTime);
var time2 = moment(selectedTime, "HH:mm").format("HH:mm");
updateStartTime(time2, iD);
console.log("Update Start Time start",time2, iD);
if (Platform.OS === "android") {
setShowStart(false);
}
};
const showTimepickerStart = () => {
setId(item.id);
showModeStart("time");
};
const showModeStart = (currentMode) => {
setShowStart(true);
setMode(currentMode);
};
const updateStartTime = (startTime, iD) => {
console.log("Update Start Time",startTime, iD);
dispatch(updateSchedules1(scheduleData.params.data.id, startTime, iD));
};
const onChangeEnd = (event, selectedTime1) => {
setEndTime1(selectedTime1);
var endTime = format(selectedTime1, "HH:mm");
updateEndTime(endTime, iD);
//console.log(endTime);
if (Platform.OS === "android") {
setShowEnd(false);
}
};
const showTimepickerEnd = () => {
setId(item.id);`enter code here`
showModeEnd("time");
};
const showModeEnd = (currentMode) => {
setShowEnd(true);
setMode(currentMode);
};
const updateEndTime = (endTime, iD) => {
console.log(endTime, iD);
dispatch(updateSchedules(scheduleData.params.data.id, endTime, iD));
};
return (
<View style={styles.deviceList}>
<StatusBar barStyle="light-content" backgroundColor="#0E67B4" />
<TouchableOpacity>
<CircularProgress
style={styles.iconProgress}
value={item.tilt_angle}
radius={34}
duration={1000}
textColor={"#0E67B4"}
titleFontSize={12}
maxValue={90}
title={"Tilt ยบ"}
titleColor={"#0E67B4"}
titleStyle={{ fontWeight: "bold" }}
/>
</TouchableOpacity>
<TouchableOpacity onPress={showTimepickerStart}>
<Text style={styles.time}>{item.start}</Text>
</TouchableOpacity>
{showStart && (
<DateTimePickerAndroid
testID="dateTimePicker"
value={new Date(2018, 12, 31)}
mode={mode}
is24Hour={true}
display="spinner"
onChange={onChangeStart}
/>
)}
I used this timepicker my objective is to select a time from the picker and display it in my text inputs everything is working fine up until I select the time it won't show and gives me an error that text input value has to be a string can anyone tell me what I'm doing wrong here is my code so far
import React, { useState } from 'react';
import { View, TextInput, Text, Platform, Button } from 'react-native';
import DateTimePickerModal from 'react-native-modal-datetime-picker';
const AttendanceMain = () => {
const [showPicker, setShowPicker] = useState(false);
const [selectedTime, setSelectedTime] = useState('');
const showTimePicker = () => {
setShowPicker(true);
};
const hideTimePicker = () => {
setShowPicker(false);
};
const handleConfirm = (time) => {
setSelectedTime(time);
hideTimePicker();
};
return (
<View>
<Text>From:</Text>
<TextInput
placeholder="00:00"
keyboardType="numeric"
onFocus={showTimePicker}
value={selectedTime}
onChange={handleConfirm}
/>
<Text>To:</Text>
<TextInput
placeholder="00:00"
keyboardType="numeric"
onFocus={showTimePicker}
value={selectedTime}
onChange={handleConfirm}
/>
<DateTimePickerModal
isVisible={showPicker}
mode="time"
is24Hour={true}
onConfirm={handleConfirm}
onCancel={hideTimePicker}
/>
</View>
);
};
export default AttendanceMain;
Why don't you use react-native-datetimepicker/datetimepicker
Working Example
and Implement it like this
import React, { useState } from 'react';
import { View, Button, Platform, Text, TextInput } from 'react-native';
import DateTimePicker from '#react-native-community/datetimepicker';
const App = () => {
const [From, setFrom] = useState(new Date());
const [To, setTo] = useState(new Date());
const [mode, setMode] = useState('date');
const [show, setShow] = useState(false);
const [currentSetting, setcurrentSetting] = useState('from');
const onChange = (event, selectedDate) => {
if (currentSetting === 'from') {
const currentDate = selectedDate || From;
setShow(Platform.OS === 'ios');
setFrom(currentDate);
} else {
const currentDate = selectedDate || To;
setShow(Platform.OS === 'ios');
setTo(currentDate);
}
};
const showTimepicker = (current) => {
setShow(true);
setcurrentSetting(current);
};
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<View>
<Text>From:</Text>
<TextInput
placeholder="00:00"
keyboardType="numeric"
onFocus={() => showTimepicker('from')}
value={From.toLocaleTimeString()}
/>
<Text>To:</Text>
<TextInput
placeholder="00:00"
keyboardType="numeric"
onFocus={() => showTimepicker('to')}
value={To.toLocaleTimeString()}
/>
</View>
{show && (
<DateTimePicker
testID="dateTimePicker"
value={From}
mode={'time'}
is24Hour={true}
display="default"
onChange={onChange}
/>
)}
</View>
);
};
export default App;
Im very new to React native. Im using react-native-community/datetimepicker library and I find it very confusing. Below is my code, what should I add to make it functional and show selected date and time in screen? I would appreciate your help!
import React, {useState} from 'react';
import {View, Button, Platform} from 'react-native';
import DateTimePicker from '#react-native-community/datetimepicker';
export const App = () => {
const [date, setDate] = useState(new Date(1598051730000));
const [mode, setMode] = useState('date');
const [show, setShow] = useState(false);
const onChange = (event, selectedDate) => {
const currentDate = selectedDate || date;
setShow(Platform.OS === 'ios');
setDate(currentDate);
};
const showMode = (currentMode) => {
setShow(true);
setMode(currentMode);
};
const showDatepicker = () => {
showMode('date');
};
const showTimepicker = () => {
showMode('time');
};
return (
<View>
<View>
<Button onPress={showDatepicker} title="Show date picker!" />
</View>
<View>
<Button onPress={showTimepicker} title="Show time picker!" />
</View>
{show && (
<DateTimePicker
testID="dateTimePicker"
value={date}
mode={mode}
is24Hour={true}
display="default"
onChange={onChange}
/>
)}
</View>
);
};
You should try saving the selected date\time somewhere and then you can show it anywhere you want. Do something like this:
import React, { useState } from "react";
import { Button, Text, View, StyleSheet, TouchableOpacity } from "react-native";
import DateTimePickerModal from "react-native-modal-datetime-picker"; //install and import
import { SafeAreaView } from "react-native";
export const Picker = () => {
const [selectedDate, setselectedDate] = useState("");
const [selectedTime, setselectedTime] = useState("");
const [isDatePickerVisible, setDatePickerVisibility] = useState(false);
const [isTimePickerVisible, setTimePickerVisibility] = useState(false);
const showDatePicker = () => {
setDatePickerVisibility(true);
};
const hideDatePicker = () => {
setDatePickerVisibility(false);
};
const showTimePicker = () => {
setTimePickerVisibility(true);
};
const hideTimePicker = () => {
setTimePickerVisibility(false);
};
const handleDate = (date) => {
setselectedDate(date.toDateString());
hideDatePicker();
};
const handleTime = (time) => {
setselectedTime(time.toLocaleTimeString());
hideTimePicker();
};
return (
<SafeAreaView>
<View style={styles.container}>
<View>
<Button title="Show Date Picker" onPress={showDatePicker} />
<DateTimePickerModal
isVisible={isDatePickerVisible}
mode="date"
onConfirm={handleDate}
onCancel={hideDatePicker}
minimumDate={new Date()}
maximumDate={new Date()}
/>
</View>
<View>
<Button title="Show Time Picker" onPress={showTimePicker} />
<DateTimePickerModal
isVisible={isTimePickerVisible}
mode="time"
onConfirm={handleTime}
onCancel={hideTimePicker}
/>
</View>
<View>
<Text>{selectedDate}</Text>
<Text>{selectedTime}</Text>
</View>
</View>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
paddingTop: 300,
},
});
Currently I have a class component that contains functional component that show date picker from function component
but i want to get selected values in parent class component
My Code is that
Class component
export default class TransactionHistory extends React.Component {
constructor(props) {
super(props)
}
state = {
Participant :'' ,
DateFrom :'' }
render() {
return (
<View style={styles.PageContainer}>
<Test />
</View>
)}
}
functional Component
export default function date() {
const [date, setDate] = useState(new Date());
const [mode, setMode] = useState('date');
const [show, setShow] = useState(false);
const onChange = (event, selectedDate) => {
alert(selectedDate)
};
const showMode = currentMode => {
setShow(true);
setMode(currentMode);
};
const showDatepicker = () => {
showMode('date');
};
const showTimepicker = () => {
showMode('time');
};
return (
<View>
<View>
<Button onPress={showDatepicker} title="Show date picker!" />
</View>
<View>
<Button onPress={showTimepicker} title="Show time picker!" />
</View>
{show && (
<DateTimePicker
testID="dateTimePicker"
value={date}
mode={mode}
is24Hour={true}
display="default"
onChange={onChange}
/>
)}
</View>
);
};
please help me
class TransactionHistory extends React.Component {
constructor(props) {
super(props);
}
state = {
Participant: '',
DateFrom: '',
TestValue: '',
};
render() {
return (
<View style={styles.PageContainer}>
<Text>{this.state.TestValue} </Text>
<Test
callback={(someValue) =>
this.setState({ ...this.state, TestValue: someValue })
}
/>
</View>
);
}
}
const Test: React.FC = ({ callback }) => {
const [date, setDate] = useState(new Date());
const [mode, setMode] = useState('date');
const [show, setShow] = useState(false);
const onChange = (event, selectedDate) => {
callback(someValue);
};
const showMode = (currentMode) => {
setShow(true);
setMode(currentMode);
};
const showDatepicker = () => {
showMode('date');
};
const showTimepicker = () => {
showMode('time');
};
return (
<View>
<View>
<Button onPress={showDatepicker} title="Show date picker!" />
</View>
<View>
<Button onPress={showTimepicker} title="Show time picker!" />
</View>
{show && (
<DateTimePicker
testID="dateTimePicker"
value={date}
mode={mode}
is24Hour={true}
display="default"
onChange={onChange}
/>
)}
</View>
);
};