Closed thanachotw closed 2 years ago
{DateTime} install datetimepicker npm install @react-native-community/datetimepicker --save
import React, { useState } from "react"; import { Button, Text, useDisclose, View} from 'native-base'; import { Platform, StyleSheet } from "react-native"; import Feather from 'react-native-vector-icons/Feather'; import Fontisto from 'react-native-vector-icons/Fontisto'; import DateTimePicker from "@react-native-community/datetimepicker";
function DateTime() { const [date, setDate] = useState(new Date()); 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); }
return ( <>
<View style={style.containerTime}>
<View style = {style.boxTime}>
<Feather name="clock" size={26} color="white" />
</View>
<Text style={style.text}>Time</Text>
<Button title='Timepicker' onPress={()=> showMode('time')} style={style.btnTime}>
<Text>0 : 00</Text>
</Button>
{show && (
<DateTimePicker
value={date}
mode={mode}
is24Hour={true}
display='default'
onChange={onChange}/>
)}
</View>
</>
); }
const style = StyleSheet.create({ text: { fontSize: 15, marginRight : 90, marginLeft : 15,
}, btnTime: { backgroundColor: '#FFFFFF', borderRadius: 18, borderWidth: 3, borderColor: '#FD9340', width: 100, marginLeft : 30 },
boxTime: { height : 40, width : 40, backgroundColor : '#FD9340', borderRadius : 18, justifyContent : "center", alignItems : "center",
},
containerTime: { backgroundColor: '#FFFFFF', flexDirection: 'row', height:65, borderRadius: 16, width: '90%', justifyContent: 'center', alignItems : "center", marginTop : 12,
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 1,
},
shadowOpacity: 0.22,
shadowRadius: 2.22,
elevation: 3,
},
boxDate: { height : 40, width : 40, backgroundColor : '#634897', borderRadius : 18, justifyContent : "center", alignItems : "center",
},
btnDate: { backgroundColor: '#E4E3FA', borderRadius: 18, borderWidth: 3, borderColor: '#7D6DFF', width: 100, marginLeft : 30 },
containerDate: { backgroundColor: '#E4E3FA', flexDirection: 'row', height:65, borderRadius: 16, width: '90%', justifyContent: 'center', alignItems : "center",
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 1,
},
shadowOpacity: 0.22,
shadowRadius: 2.22,
elevation: 3,
} });
export default DateTime;
{EditTask} import React, { Component } from 'react' import { StyleSheet } from 'react-native'; import { Box, Text, Heading, VStack, FormControl, Input, Link, Button, HStack, Center, NativeBaseProvider, View ,Flex} from "native-base"; import { background } from 'native-base/lib/typescript/theme/styled-system'; import { Background } from '@react-navigation/elements'; import MCIcon from 'react-native-vector-icons/MaterialCommunityIcons'; import MIcons from 'react-native-vector-icons/MaterialIcons'; import DateTime from './DateTime'; import Repeat from './Repeat'; import Priority from './Priority';
class Edittask extends Component{ render(){ return ( <Box p="0" py="0" w="100%" maxW={400} paddingBottom={"10"} > <Box mr={"80%"} flexDirection={"row"}> <MCIcon.Button name="less-than" backgroundColor={"#FFF7ED"} color="#000000" size={10}>
</MCIcon.Button>
</Box>
<Center>
<Heading size="lg" fontWeight="600" paddingBottom={"0"}>
<Text>Edit Task</Text>
</Heading>
</Center>
<VStack space={8} mt="7" >
<Center bgColor={"#FFFF"} w="90%" alignSelf={"center"} borderRadius={"25"} padding={"4"}>
<FormControl>
<FormControl.Label mt="2" my="-2" >Title</FormControl.Label>
<Input mb={4} variant="underlined" defaultValue='TEST'/>
<FormControl.Label my="-2">Notes</FormControl.Label>
<Input mb={4} variant="underlined" defaultValue='TEST'/>
</FormControl>
</Center>
<Box alignItems={"center"}>
<DateTime/>
<Repeat/>
<Priority/>
</Box>
</VStack>
<Box alignItems={"center"} paddingTop={"10"}>
<Button
w="25%" h="10" rounded={"full"} bgColor={"#FD9340"}>
<Text color={"#FFFFFF"} fontSize={"15"} bold="true" >submit</Text>
</Button>
</Box>
</Box>
)} }
export default () => { return (
);
}