daily pastebin goal
61%
SHARE
TWEET

react-native

a guest Sep 23rd, 2018 70 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, {
  2.     Component
  3. } from 'react';
  4. import {
  5.     Text,
  6.     TouchableOpacity,
  7.     View,
  8.     Picker,
  9.     AsyncStorage,
  10.     StyleSheet,
  11.     ActivityIndicator,
  12.     FlatList,
  13.     SectionList
  14. } from 'react-native';
  15. import DateTimePicker from 'react-native-modal-datetime-picker';
  16. import {
  17.     Dropdown
  18. } from 'react-native-material-dropdown';
  19. import {
  20.     Constants
  21. } from 'expo';
  22. import firebase from 'firebase'; // 4.8.0
  23. import _ from 'lodash'; // 4.17.4
  24.  
  25. import {
  26.     ScrollView
  27. } from 'react-native';
  28.  
  29. import {
  30.     Calendar
  31. } from 'react-native-calendars';
  32. import {
  33.     db
  34. } from './db';
  35.  
  36. export default class DateTimePickerTester extends Component {
  37.  
  38.     constructor(props) {
  39.         super(props);
  40.         this.state = {};
  41.         this.onDayPress = this.onDayPress.bind(this);
  42.     }
  43.  
  44.     state = {
  45.         isDateTimePickerVisible: false,
  46.         mode: "time",
  47.         minuteInterval: 30,
  48.         selectedDate: {},
  49.         isLoading: true,
  50.  
  51.         syllabus: [{
  52.             value: 'Banana',
  53.         }, ],
  54.         users: [{
  55.             value: 'Banana',
  56.             app_id: 'apple',
  57.         }, ],
  58.  
  59.         slots: [{
  60.             name: 'test',
  61.             time: '123',
  62.             user_id:'373737'
  63.         },]
  64.     };
  65.  
  66.  
  67.     user = "nasir";
  68.     userID = "12344";
  69.  
  70.  
  71.     _handleDatePicked = (day) => {
  72.  
  73.         console.log('A date has been picked: ', this.state.selectedDate);
  74.  
  75.         var hr = this.state.selectedDate.getHours();
  76.         var min = this.state.selectedDate.getMinutes();
  77.         if (min < 10) {
  78.             min = "0" + min;
  79.         }
  80.         var ampm = "am";
  81.         if (hr > 12) {
  82.             hr -= 12;
  83.             ampm = "pm";
  84.         }
  85.  
  86.         var today = this.state.selectedDate;
  87.         var dd = today.getDate();
  88.         var mm = today.getMonth() + 1; //January is 0!
  89.  
  90.         var yyyy = today.getFullYear();
  91.         if (dd < 10) {
  92.             dd = '0' + dd;
  93.         }
  94.         if (mm < 10) {
  95.             mm = '0' + mm;
  96.         }
  97.         var today = dd + '-' + mm + '-' + yyyy;
  98.  
  99.         console.log('A time been picked: ' + hr + "-" + min + " " + ampm);
  100.         console.log("A time been picked:" + today);
  101.  
  102.  
  103.     };
  104.  
  105.     curday = function(sp) {
  106.         today = new Date();
  107.         var dd = today.getDate();
  108.         var mm = today.getMonth() + 1; //As January is 0.
  109.         var yyyy = today.getFullYear();
  110.  
  111.         if (dd < 10) dd = '0' + dd;
  112.         if (mm < 10) mm = '0' + mm;
  113.  
  114.         return (yyyy + sp + mm + sp + dd);
  115.  
  116.     };
  117.  
  118.  
  119.     gotData(data) {
  120.         var dataVal = data.val();
  121.         // Grab the keys to iterate over the object
  122.         var keys = Object.keys(dataVal);
  123.  
  124.         for (var i = 0; i < keys.length; i++) {
  125.             var key = keys[i];
  126.             var dateValues = dataVal[key];
  127.  
  128.             console.log(key + " " + dateValues['timeSlots'].name);
  129.  
  130.         }
  131.  
  132.  
  133.     }
  134.  
  135.     lapsList() {
  136.  
  137.         return this.state.timeSlots.map((data) => {
  138.             return ( <
  139.                 View > < Text > {
  140.                     data.time
  141.                 } < /Text></View >
  142.             )
  143.         })
  144.     }
  145.  
  146.     renderItem({
  147.         item
  148.     }) {
  149.         return ( <
  150.             Text > {
  151.                 "this.state.timeSlots[0].name"
  152.             } < /Text>
  153.         )
  154.     }
  155.  
  156.     render() {
  157.  
  158.  
  159.         return ( <
  160.             View style = {
  161.                 {
  162.                     flex: 1
  163.                 }
  164.             } >
  165.  
  166.             <
  167.             Calendar onDayPress = {
  168.                 this.onDayPress
  169.             }
  170.             style = {
  171.                 styles.calendar
  172.             }
  173.             hideExtraDays showWeekNumbers date = {
  174.                 this.state.selected
  175.             }
  176.             markedDates = {
  177.                 {
  178.                     [this.state.selected]: {
  179.                         selected: true
  180.                     }
  181.                 }
  182.             }
  183.             />
  184.  
  185.             <
  186.             SectionList renderItem = {
  187.                 ({
  188.                     item,
  189.                     index,
  190.                     section
  191.                 }) => < Text key = {
  192.                     index
  193.                 } > {
  194.                     item
  195.                 } < /Text>}
  196.                 renderSectionHeader = {
  197.                     ({
  198.                         section: {
  199.                             title
  200.                         }
  201.                     }) => ( <
  202.                         Text style = {
  203.                             {
  204.                                 fontWeight: 'bold'
  205.                             }
  206.                         } > {
  207.                             title
  208.                         } < /Text>
  209.                     )
  210.                 }
  211.                 sections = {
  212.                     [{
  213.                             title: this.state.timeSlots,
  214.                             data: ['item1', 'item2']
  215.                         },
  216.                         {
  217.                             title: 'Title2',
  218.                             data: ['item3', 'item4']
  219.                         },
  220.                         {
  221.                             title: 'Title3',
  222.                             data: ['item5', 'item6']
  223.                         },
  224.                     ]
  225.                 }
  226.                 keyExtractor = {
  227.                     (item, index) => item + index
  228.                 }
  229.                 /> <
  230.                 /View>
  231.  
  232.  
  233.             );
  234.         }
  235.         onDayPress(day) {
  236.  
  237.             console.log("day press " + day.dateString);
  238.             this.testStore();
  239.             var st = day.dateString;
  240.             var dt = new Date(st);
  241.  
  242.             var today = dt;
  243.             var dd = today.getDate();
  244.             var mm = today.getMonth() + 1; //January is 0!
  245.  
  246.             var yyyy = today.getFullYear();
  247.             if (dd < 10) {
  248.                 dd = '0' + dd;
  249.             }
  250.             if (mm < 10) {
  251.                 mm = '0' + mm;
  252.             }
  253.             var today = dd + '-' + mm + '-' + yyyy;
  254.  
  255.             console.log("date is " + today);
  256.  
  257.             this.setState({
  258.                 selectedDate: today
  259.             });
  260.  
  261.         }
  262.  
  263.         testStore() {
  264.             let returnArr = [];
  265.  
  266.             db.ref('bookings/' + this.user).child("22-09-2018").once('value').then(function(snapshot) {
  267.                 let data = snapshot.val();
  268.                 let timeSlot = Object.values(data);
  269.  
  270.                  console.log("testStore: " + timeSlot[0].name);
  271.  
  272.                 dt = timeSlot;
  273.  
  274.                 // this.setState({
  275.                 //     timeSlots: dt
  276.                 // }, () => {
  277.                 //     console.log(this.state.timeSlots)
  278.                 // });
  279.  
  280.             }.bind(this));
  281.             this.testState();
  282.         }
  283.  
  284.         testState() {
  285.             console.log("test state " + Object.values(this.state.slots));
  286.         }
  287.  
  288.  
  289.     }
  290.  
  291.  
  292.     const styles = StyleSheet.create({
  293.         calendar: {
  294.             borderTopWidth: 1,
  295.             paddingTop: 5,
  296.             borderBottomWidth: 1,
  297.             borderColor: '#eee',
  298.             height: 350
  299.         },
  300.         text: {
  301.             textAlign: 'center',
  302.             borderColor: '#bbb',
  303.             padding: 10,
  304.             backgroundColor: '#eee'
  305.         },
  306.         container: {
  307.             flex: 1,
  308.             alignItems: 'center',
  309.             justifyContent: 'center',
  310.             paddingTop: Constants.statusBarHeight,
  311.             backgroundColor: '#ecf0f1',
  312.         }
  313.     });
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top