DateTime display on button

jabao · Nov 18, 2017 · 57f204b · 57f204b
1 parent 6b5dbab
commit 57f204b
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 19 deletions.
diff --git a/Datepick.js b/Datepick.js
@@ -3,18 +3,24 @@ import { Text, TouchableOpacity, View } from 'react-native';
 import DateTimePicker from 'react-native-modal-datetime-picker';
 
 export default class DateTimePickerTester extends Component {
-  state = {
-    isDateTimePickerVisible: false,
-    date: ''
-  };
+  constructor(props) {
+    super(props);
+    this.state = {
+      isDateTimePickerVisible: false,
+      date: ''
+    };    
+  }
+
 
   _showDateTimePicker = () => this.setState({ isDateTimePickerVisible: true });
 
   _hideDateTimePicker = () => this.setState({ isDateTimePickerVisible: false });
 
   _handleDatePicked = (date) => {
-    console.log('A date has been picked: ', date);
+    date = date.toString();
+    date = date.substring(0, date.length-18);
     this.setState({date: {date}})
+    this.props.onChange(date);
     this._hideDateTimePicker();
   };
 

diff --git a/Popup.js b/Popup.js
@@ -6,24 +6,22 @@ class Popup extends React.Component{
   state = {
     name: '',
     details: '',
-    lat: 0.0,
-    long: 0.0,
+    eventStartDate: 'Choose Event Start Time',
+    eventEndDate: 'Choose Event End Time',
   }
-  show(lat, long) {
+  show(long, lat) {
     this.popupDialog.show();
-    this.setState({lat: {lat}})
-    this.setState({long: {long}})
   }
   sendInformation() {
     console.log('hi')
     console.log(this.state.name)
     console.log(this.state.details)
     console.log(this._startDateTimePicker.state.date)
-    console.log(this._endDateTimePicker.state.date)
-    console.log(this.state.long)
-    console.log(this.state.lat)
-    this.popupDialog.close()
   }
+
+  setStartDate = (date) => this.setState({eventStartDate: date});
+  setEndDate = (date) => this.setState({eventEndDate: date});
+
   render() {
     return (
       <PopupDialog
@@ -36,16 +34,19 @@ class Popup extends React.Component{
           onChangeText={(name) => this.setState({name})}
           ref = {(textInput) => {this.textInput = textInput; }}
         />
-        <DateTimePicker ref={(startDateTimePicker) => {this._startDateTimePicker = startDateTimePicker;}}/>
+        <DateTimePicker 
+          ref={(startDateTimePicker) => {this._startDateTimePicker = startDateTimePicker;}}
+          onChange={this.setStartDate}/>
         <Button
-          title="Choose Event Start Time"
+          title={this.state.eventStartDate.substring()}
           color="#4B0082"
           onPress={() => this._startDateTimePicker._showDateTimePicker()}
         />
-
-        <DateTimePicker ref={(endDateTimePicker) => {this._endDateTimePicker = endDateTimePicker;}}/>
+        <DateTimePicker 
+          ref={(endDateTimePicker) => {this._endDateTimePicker = endDateTimePicker;}}
+          onChange={this.setEndDate}/>
         <Button
-          title="Choose Event End Time"
+          title={this.state.eventEndDate.toString()}
           color="#4B0082"
           onPress={() => this._endDateTimePicker._showDateTimePicker()}
                   // this.setState({textValue:{this._endDateTimePicker.date}})}