I am trying to create a drop down view to enable users to select their date of birth. I already finished building the component using dummy data, but How can i implement data module for years / month / days using date-fns ?
What I am done so far , i build the drop down and work very well what i struggle with how can i replace the dummy data with real date data?
dropdown component :
const days = [
{ num: '1', key: '1' },
{ num: '2', key: '2' },
{ num: '3 ', key: '3' },
{ num: '4', key: '4' },
{ num: '5 ', key: '5' },
];
const Dropdown = ({ label, data }) => {
const [selecteday, setSelecteday] = useState({ item: '' });
const DropdownButton = useRef();
const [visible, setVisible] = useState(false);
const toggleFunction = () => {
visible ? setVisible(false) : openDropdown();
};
const openDropdown = () => {
setVisible(true);
};
const onItemPress = item => {
setSelecteday(item);
console.log(item);
setVisible(false);
};
const renderItem = ({ item }) => (
<TouchableOpacity style={styles.item} onPress={() => onItemPress(item)}>
<Text style={styles.buttonText}>{item.num}</Text>
</TouchableOpacity>
);
const renderDropdown = () => {
return (
<SafeAreaView style={styles.dropdown}>
<FlatList
data={days}
renderItem={renderItem}
keyExtractor={(item, index) => index.toString()}
/>
</SafeAreaView>
);
};
return (
<>
<View style={{zIndex: 10}} >
<TouchableOpacity
onPress={() => toggleFunction()}
ref={DropdownButton}
style={styles.button}
>
<Text style={styles.buttonText}>
{' '}
{selecteday.item === '' ? label : selecteday.num}
</Text>
<MaterialCommunityIcons name="chevron-down" color={'#58abc8'} size={16} />
{visible == true ? renderDropdown() : null}
</TouchableOpacity>
</View>
{ visible ? <View
style={styles.modal}>
<TouchableOpacity
style ={styles.overlay}
onPress={toggleFunction}
></TouchableOpacity>
</View>: null}
</>
);
};
For getting Days, Months and Years you can create functions like this
const getDays = (month, year) => {
if (month <= 12 && month >= 1) {
const daysCount = new Date(year, month, 0).getDate();
console.log('daysCount--', daysCount);
const daysAr = Array(daysCount).fill('').map((element, index) => {
return {
key: index + 1 + '',
num: index + 1,
}
})
console.log(daysAr);
}
}
const getMonth = () => {
const monthCount = 12; //this is always 12 so can pass static
const monthsAr = Array(monthCount).fill('').map((element, index) => {
return {
key: index + 1 + '',
num: index + 1,
}
})
console.log(monthsAr);
}
const getYears = () => {
const yeasCount = 200;//you can pass more then 200
const yearsAr = Array(yeasCount).fill('').map((element, index) => {
return {
key: 1900 + index + '',
num: 1900 + index,
}
})
console.log(yearsAr);
}
useEffect(() => {
const selectedMonth = 5;
const selectedYear = 2022;
getMonth();
getYears();
getDays(selectedMonth, selectedYear); //first select year, month and pass selected month and year here.
}, [])
So you have to select year then month and then according of your selected month you will get days in month and convert into required array