How to get current date and time in firebase using ReactJS ?
This article provides a detailed walkthrough on obtaining the current date and time in a Firebase environment using ReactJS. Readers will gain insights into the implementation process, enabling date and time functionalities into their React projects powered by Firebase.
Prerequisites:
Steps to Create React Application And Installing Module:
Step 1: Create a React-app using the following command:
npx create-react-app myapp
Step 2: After creating your project folder i.e. myapp, move to it using the following command:
cd myapp
Step 3: After creating the ReactJS application, Install the firebase module using the following command:
npm install firebase@8.3.1 --save
Project Structure:
The updated dependencies in package.json file will look like:
"dependencies": {
"firebase": "^8.3.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4",
}
Example: Now implement the time and date part. Here, We are going to use a method called Timestamp which helps us to get the current date and time.
Javascript
import React from 'react' ; import firebase from 'firebase' ; import { useState } from 'react' ; function App() { // Current state const [curr, setCurr] = useState( '' ); // Function to get time and date const getDate = () => { const a = firebase.firestore .Timestamp.now() .toDate().toString(); setCurr(a); } return ( <div> <center> <h1>{curr}</h1> <button onClick={getDate}> Show Date </button> </center> </div> ); } export default App; |
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output: Now open your browser and go to http://localhost:3000
Contact Us