React Get Current DateTime | Reactjs DateTime Now

        const { useEffect, useState } = React;

         function formatDate(date) {

                const day = String(date.getDate()).padStart(2, '0');

                const month = String(date.getMonth() + 1).padStart(2, '0');

                const year = date.getFullYear();

                const hours = String(date.getHours()).padStart(2, '0');

                const minutes = String(date.getMinutes()).padStart(2, '0');

                const seconds = String(date.getSeconds()).padStart(2, '0');

​

                return `${day}/${month}/${year} ${hours}:${minutes}:${seconds}`;

            }

        function App() {

            const [currentDate, setCurrentDate] = useState(new Date());

            useEffect(() => {

                const interval = setInterval(() => {

                    setCurrentDate(new Date());

                }, 1000);

​

                return () => {

                    clearInterval(interval);

                };

            }, []);

​

            return (

                <div className='container'>

                    <h3>React Js Get Current Date and Time</h3>

                   <p>Current Date and Time: <span>{formatDate(currentDate)}</span></p>

                </div>

            );

        }

​

        ReactDOM.render(<App />, document.getElementById('app'));

    </script>

      const { useState } = React;

​

      function App() {

        const currentDateTime = new Date().toISOString();

        const formattedDateTime = new Date(currentDateTime).toISOString().replace(/\.\d{3}/, 'Z');

​

        return (

          <div className="container">

            <p className="title">React Js Current Date Time (UTC):</p>

            <p className="time">{formattedDateTime}</p>

          </div>

        );

      }

​

      ReactDOM.render(<App />, document.getElementById("app"));

    </script>

      const { useState, useEffect } = React;

​

      function App() {

        const [currentTime, setCurrentTime] = useState("");

​

        useEffect(() => {

          // Update the time every second

          const interval = setInterval(() => {

            const now = new Date();

            const year = now.getFullYear();

            const month = String(now.getMonth() + 1).padStart(2, "0");

            const day = String(now.getDate()).padStart(2, "0");

            const hours = String(now.getHours()).padStart(2, "0");

            const minutes = String(now.getMinutes()).padStart(2, "0");

            const seconds = String(now.getSeconds()).padStart(2, "0");

​

            setCurrentTime(

              `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`

            );

          }, 1000);

​

          // Clean up the interval on unmount

          return () => clearInterval(interval);

        }, []);

​

        return (

          <div className="container">

            <h3>React Js Date Time Format - 24-hour format (local time)</h3>

            <p>Current Local Time (24-hour format): {currentTime}</p>

          </div>

        );

      }

​

      ReactDOM.render(<App />, document.getElementById("app"));

    </script>

      const { useState } = React;

​

      function App() {

        const currentDate = new Date();

​

        const options = {

          year: "numeric",

          month: "long",

          day: "numeric",

          hour: "2-digit",

          minute: "2-digit",

          second: "2-digit",

          hour12: true,

        };

​

        const currentDateTimeString = currentDate.toLocaleString(

          undefined,

          options

        );

​

        return (

          <div className="container">

            <p className="title">

              React Js get current date time format : 12-hour format (local

              time)

            </p>

            <p className="time">{currentDateTimeString}</p>

          </div>

        );

      }

​

      ReactDOM.render(<App />, document.getElementById("app"));

    </script>

      const { useState, useEffect } = React;

​

      function App() {

        const [currentRFC2822Date, setCurrentRFC2822Date] = useState("");

​

        useEffect(() => {

          const getCurrentRFC2822Date = () => {

            const currentDate = new Date().toUTCString();

            setCurrentRFC2822Date(currentDate);

          };

​

          getCurrentRFC2822Date();

​

          const interval = setInterval(getCurrentRFC2822Date, 1000); // Update every second

​

          return () => clearInterval(interval);

        }, []);

​

        return (

          <div className='container'>

            <h2>React Js Current GMT Time</h2>

            <p>{currentRFC2822Date}</p>

          </div>

        );

      }

​

      ReactDOM.render(<App />, document.getElementById("app"));

    </script>

      const { useState, useEffect } = React;

​

      function App() {

        const [currentDate, setCurrentDate] = useState("");

​

        useEffect(() => {

          // Get the current date and time

          const currentDate = new Date();

​

          // Format the current date and time in the desired short format

          const formattedDate = `${currentDate.getDate()}/${

            currentDate.getMonth() + 1

          }/${currentDate.getFullYear()} ${formatAMPM(currentDate)}`;

​

          // Update the state with the formatted date

          setCurrentDate(formattedDate);

        }, []);

​

        // Function to format the time in 12-hour format with AM/PM

        const formatAMPM = (date) => {

          let hours = date.getHours();

          let minutes = date.getMinutes();

          const ampm = hours >= 12 ? "PM" : "AM";

​

          // Convert hours from 24-hour format to 12-hour format

          hours %= 12;

          hours = hours || 12;

​

          // Ensure minutes are always displayed with two digits

          minutes = minutes < 10 ? `0${minutes}` : minutes;

​

          return `${hours}:${minutes} ${ampm}`;

        };

​

        return (

          <div className='container'>

            <h1>React Js Current Date Time - 18/07/2023 10:30 AM format</h1>

            <p>{currentDate}</p>

          </div>

        );

      }

​

      ReactDOM.render(<App />, document.getElementById("app"));

    </script>