9 February 2020

Get Current Date With Month Year example in react native

  • Create Components folder under src folder
  • Add GetCurrentDateWithMonthYear.js file and add below Code
import React from "react";

import { StyleSheetViewButton } from "react-native";

const GetCurrentDateWithMonthYear = () => {
  const ShowCurrentDate = () => {
    var date = new Date();
    alert(date);
  };
  const ShowDate = () => {
    var date = new Date().getDate();
    alert(date);
  };
  const ShowMonth = () => {
    var month = new Date().getMonth() + 1;
    alert(month);
  };
  const ShowYear = () => {
    var year = new Date().getFullYear();
    alert(year);
  };

  return (
    <View style={styles.MainContainer}>
        <Button title="Show Current Date" style={styles.ButtonStyle} onPress={ShowCurrentDate} />
        <Button title="Show Date" style={styles.ButtonStyle} onPress={ShowDate} />
        <Button title="Show Month" style={styles.ButtonStyle} onPress={ShowMonth} />
        <Button title="Show Year" style={styles.ButtonStyle} onPress={ShowYear} />
    </View>
  );
};
export default GetCurrentDateWithMonthYear;
const styles = StyleSheet.create({
  MainContainer: {
    backgroundColor: "#F5FCFF",
    margin: 1
  },
  ButtonStyle: {
    paddingBottom:10
  }
});
  • Open App.js file and update code as below
import React from 'react';
import {  Text,View,StyleSheet } from 'react-native';
import GetCurrentDateWithMonthYear from './src/Component/GetCurrentDateWithMonthYear'

 const  App=()=> {
  return (
    <View style={styles.container}>
      <GetCurrentDateWithMonthYear/>
    </View>
  );
}
export default App;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    paddingTop:80
  },
});


Output:


No comments:

Post a Comment