The JavaScript’s inbuilt function Date().getDate() gives us the facility to retrieve Get Current Date With Month And Year in both android and iOS applications on button click. So in this tutorial we would going to get current date using Date().getDate() function, retrieve current month using Date().getMonth() function and current year using Date().getFullYear() function and display inside react native app using Alert dialog.
Contents in this project Get Current Date With Month And Year in React Native App:
1. Import StyleSheet, View, Alert and Button component in your project.
|
1 2 3 |
import React, { Component } from 'react'; import { StyleSheet, View, Alert, Button } from 'react-native'; |
2. Create a function named as ShowCurrentDate(). Now we would get current date, month and year using Date() function and store each value into separate Var variable. Finally we would show all values on application screen with – (Dash) into Alert dialog.
Note : We need to +1 to month to show the correct month because by default in react native January starts from 0(Zero).
|
1 2 3 4 5 6 7 8 9 |
ShowCurrentDate=()=>{ var date = new Date().getDate(); var month = new Date().getMonth() + 1; var year = new Date().getFullYear(); Alert.alert(date + '-' + month + '-' + year); } |
3. Create a Parent View in render’s return block and add a Button component inside it. Now we would set onPress event on button and call the ShowCurrentDate() function on button onPress.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
render() { return ( <View style={styles.MainContainer}> <Button title="Show Current Date" onPress={this.ShowCurrentDate} /> </View> ); } |
4. Create Style for View.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
const styles = StyleSheet.create( { MainContainer: { justifyContent: 'center', flex: 1, backgroundColor: '#F5FCFF', margin: 10 } }); |
5. Complete source code for App.js File :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
import React, { Component } from 'react'; import { StyleSheet, View, Alert, Button } from 'react-native'; export default class MyProject extends Component { ShowCurrentDate=()=>{ var date = new Date().getDate(); var month = new Date().getMonth() + 1; var year = new Date().getFullYear(); Alert.alert(date + '-' + month + '-' + year); } render() { return ( <View style={styles.MainContainer}> <Button title="Show Current Date" onPress={this.ShowCurrentDate} /> </View> ); } } const styles = StyleSheet.create( { MainContainer: { justifyContent: 'center', flex: 1, backgroundColor: '#F5FCFF', margin: 10 } }); |
Screenshot in Android device :
Screenshot in iOS Application :
how to show current date like this – Wed , May 2
Swati you need to use the function Date().getDay(); it will return you day in number now here 1 stands for Monday and 2 stands for Tuesday like that so 1 to 7 is day code, Now using the if condition you need to convert number into day, and the same part as months starts from 0 to 12 so you also need to convert month.
Thanks for this sir. Can you confirm what datatype is the day/month etc returned as? Because I’m not able to use it in a function like this:
var month; month = today.getMonth();
var monthName = {month}==”0″?’January’:
{month}==”1″?’February’:
{month}==”2″?’March’:
{month}==”3″?’April’:
{month}==”4″?’May’:
{month}==”5″?’June’:
{month}==”6″?’July’:
{month}==”7″?’August’:
{month}==”8″?’September’:
{month}==”9″?’October’:
{month}==”10″?’November’:’December’
;
//(above doesn’t work)
You should use without double quotes .
??
Thank you sir
But this process is lengthy and it will slow other functions like I am using time function and after that I click button to move next page it take lot of time to move.
No swati it will not slow other functions, or you could just call this function in constructor().
exit(“Nice tutorial again~”);
how to get the next month date from today date..
e.g : i want to show the next month date in Text tag, and my date will be exact date from today date…
like today is 2019-06-26
i want to display the date 2019-07-26 in text tag without any function..
Adnana to make this functionality you need to check the year and month and date. First check the month is always less than 12 and and if yes then increase month to +1. Now if month successfully updated then check if month is less than 12 then the year is same and if the month is grater then also increase the month and finally according to month check the date is still present on same month if not then you can set any date.
var todayDate = new Date;
var actualDate = new Date(todayDate); // convert to actual date means today’s date
//FOR NEXT MONTH date
var expDate = new Date(actualDate.getFullYear(), actualDate.getMonth() + 1, actualDate.getDate()).toDateString();
{this.expDate} —> in between Text tag
when i put this.expDate in text tag it doesn’t show anything.. but when if i do on “console.log(expDate )” it will give me exact one month date like ‘Jul 26 2019 ‘
Thanks for asking this Adnan. I will run the code and notify you soon.