Navigate back to the homepage

How to set current date in datepicker in react native?

Infinitbility
React Native
January 2nd, 2022 · 1 min read
How to set current date in datepicker in react native?

Hello Friends 👋,

Welcome to Infinitbility.

Many devs searching for set current date in datepicker i.e we have decided to make tutprial on this topic.

Today, we are using react-native-datepicker lib to set current date example but you are open to use any lib it will work.

React native datepicker lib provide date props to get value from state and Javascript provide current date when we write new Date(). So we only store new Date() in state.

1import React, { Component } from 'react'
2import { View } from 'react-native'
3import DatePicker from 'react-native-datepicker'
4
5export default class MyDatePicker extends Component {
6 constructor(props){
7 super(props)
8 this.state = {date: new Date()}
9 }
10
11 render(){
12 return (
13 <View style={{flex: 1, justifyContent: "center", alignItems: "center"}}>
14 <DatePicker
15 style={{width: 200}}
16 date={this.state.date}
17 mode="date"
18 placeholder="select date"
19 format="YYYY-MM-DD"
20 minDate="2016-05-01"
21 maxDate="2016-06-01"
22 confirmBtnText="Confirm"
23 cancelBtnText="Cancel"
24 customStyles={{
25 dateIcon: {
26 position: 'absolute',
27 left: 0,
28 top: 4,
29 marginLeft: 0
30 },
31 dateInput: {
32 marginLeft: 36
33 }
34 // ... You can check the source to find the other keys.
35 }}
36 onDateChange={(date) => {this.setState({date: date})}}
37 />
38 </View>
39 )
40 }
41}

Output

React native datepicker current date example
React native datepicker current date example

Conclusion

When we pass new Date() obeject in any datepicker it will show current date selected default.

Thanks for reading…

Follow me on Twitter

Join our email list and get notified about new content

No worries, I respect your privacy and I will never abuse your email.

Every week, on Tuesday, you will receive a list of free tutorials I made during the week (I write one every day) and news on other training products I create.

Looking For React Native Tutorial?

we are trying to create the best Tutorial for react native developers.

When you want a daily updates about React Native Tutorial or infinitbility update subscribe to our newsletter.

Read React Native Tutorial

Request New Tutorial or Article on mail [email protected]

Guide book

Guidebook: The Javascript Monorepo

Tutorials

Categories

More articles from Infinitbility

How to set button bottom of the screen in react native?

How to set button bottom of the screen in react native?

React Native, Set Button on bottom example.

January 1st, 2022 · 1 min read
How to show a component on button click in react native?

How to show a component on button click in react native?

React Native, show component on button click example.

December 31st, 2021 · 1 min read
© 2020–2022 Infinitbility
About
Link to $https://medium.com/infinitbilityLink to $https://www.facebook.com/InfinitbilityLink to $https://github.com/infinitbilityLink to $https://twitter.com/infinitbilityLink to $https://www.buymeacoffee.com/infinitbilityLink to $mailto:[email protected]