How to get current date and time in firebase using ReactJS ?
Last Updated :
11 Dec, 2023
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() {
const [curr, setCurr] = useState( '' );
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
Share your thoughts in the comments
Please Login to comment...