Fakultas Ilmu Komputer UI

index.tsx 1.41 KB
Newer Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import React, { FC, useState } from 'react';
import RNDateTimePicker from '@react-native-community/datetimepicker';
import { View, TouchableOpacity } from 'react-native';
import { Text, Icon } from 'react-native-elements';
import { typographyStyles } from 'styles';

import { styles } from './styles';
import { Props } from './types';
import FormLabel from '../FormLabel';
import { convertDate } from 'utils/format';

const Datepicker: FC<Props> = ({
  label,
  required,
  errorMessage,
  value,
  onChange,
}) => {
  const [show, setShow] = useState(false);

21
22
23
  const onPress = () => {
    setShow(true);
  };
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

  const handleChange = (_: any, date?: Date) => {
    setShow(false);
    onChange(date);
  };

  return (
    <View style={styles.spacing}>
      <FormLabel label={label} required={required} />
      <TouchableOpacity
        style={styles.container}
        onPress={onPress}
        testID="datepickertrigger">
        <Text style={typographyStyles.bodyMedium}>{convertDate(value)}</Text>
        <Icon name="calendar" type="material-community" />
      </TouchableOpacity>
      {errorMessage ? (
        <Text style={[typographyStyles.caption, styles.red]}>
          {errorMessage}
        </Text>
      ) : null}
      {show ? (
        <RNDateTimePicker
47
          value={new Date(value)}
48
49
50
51
52
53
54
55
56
          onChange={handleChange}
          locale="id-ID"
        />
      ) : null}
    </View>
  );
};

export default Datepicker;