An Interest In:
Web News this Week
- March 20, 2024
- March 19, 2024
- March 18, 2024
- March 17, 2024
- March 16, 2024
- March 15, 2024
- March 14, 2024
Some of Our Sources
- BoingBoing
- Pearsonified
- Spoon Graphics
- Smashing Magazine
- Abduzeedo
- Inspiredology
- FanExtra - PSD
- CSS Tricks
- Android Dissected
- Dev To
Help Webnuz
Referal links:
React Native date picker
How to add Placeholder in Date Picker?
How to use react-native-date-picker as component?
Mostly, we should have to use every thing as child component.
- Install via npm or yarn
npm install react-native-date-pickeryarn add react-native-date-picker- Install pods
cd ios && pod install- Rebuild the project
npx react-native run-androidnpx react-native run-iosnow create a component folder in your project if you ha already that just open it and create Picker component name as Picker.js
copy the code given below and paste it in your file Picker.js
moment Library use for Date formatting
import React, {useState, useCallback} from 'react';import { StyleSheet, Text, TextInput, View, TouchableOpacity,} from 'react-native';import DatePicker from 'react-native-date-picker';import moment from 'moment';export const MydatePicker = ({ customstyles, dateFormat, placeholder, onSetDate,}) => { const [date, setDate] = useState(new Date()); const [open, setOpen] = useState(false); const [placeHolderText, setPlaceHolderText] = useState(true); return ( <View> <TouchableOpacity style={[styles.pickerStyle, customstyles]} onPress={() => setOpen(true)}> <Text style={styles.pickerText}> {placeHolderText ? placeholder : moment(date).format(dateFormat ? dateFormat : 'DD MMM YYYY')} </Text> </TouchableOpacity> <DatePicker modal mode="date" open={open} date={date} onDateChange={setDate} onConfirm={date => { const newDate = moment(date).format( dateFormat ? dateFormat : 'DD MMM YYYY', ); setOpen(false); setDate(date); onSetDate(newDate); setPlaceHolderText(false); }} onCancel={() => { setOpen(false); }} /> </View> );};const styles = StyleSheet.create({ pickerStyle: { alignSelf: 'center', justifyContent: 'center', width: 300, height: 50, padding: 5, margin: 10, borderWidth: 1, borderBottomColor: 'black', borderRadius: 5, color: 'black', backgroundColor: 'white', }, pickerText: { color: 'block', backgroundColor: 'white', },});now move to your Screen where you want to use date picker and import Picker component like import MydatePicker from './components/picker';
copy the code given below and paste it in your file Screen
<MydatePicker placeholder={'hello place holder'} onSetDate={date => { setSelectedValue(date); }} />
You also can change the picker style.
There are multiple modes of picker
date picker mode. "datetime", "date", "time",
More information about date-picker can be found in the
react-native-date-picker
Leave a comment if you have any questions or feedback.
Original Link: https://dev.to/msaadqureshi/react-native-date-picker-150d
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To