react native: what is the way to display time like 16:02:08 instead of 16:2:8?

Question

What is the way to show the time like 16:02:08 coz now i see the time like this 16:2:8 i dont understand whats the issue for that . in this example i try display the current time and its display it with no the "zeros" and i dont understand why its like that . i try many things but it didnt works and I would be happy to some help with this issue .

function NetuneyDigum() {
  const [currentTime, setCurrentTime] = useState("");
  return (
    <>
      <View
        style={{
          flex: 1,
          alignItems: 'center',
          backgroundColor: '#cbced4',
        }}
      >
        <View
          style={{
            paddingTop: 30,
            flexDirection: 'row',
            paddingRight: 180,
          }}
        >
          <View
            style={{
              flexDirection: 'row',

              alignItems: 'center',
              justifyContent: 'center',
              left: 58,
            }}
          >
            <Text
              style={{
                fontWeight: 'bold',
                fontSize: 18,
                color: 'black',
              }}
            >
              THE TIME IS: {currentTime}
            </Text>
          </View>
          <View
            style={{
              width: 150,
              borderRadius: 5,
              borderColor: 'black',
              borderWidth: 2,
              left: 80,
            }}
          ></View>
          <TouchableOpacity
            onPress={()=>{
               const today = new Date(),
              time = today.getHours() + ':' + today.getMinutes() + ':' + today.getSeconds();
            setCurrentTime(time);
            }}
            style={{
              height: 60,
              width: 60,
              borderRadius: 5,
              borderColor: 'black',
              borderWidth: 2,
              alignItems: 'center',
              justifyContent: 'center',
              backgroundColor: 'red',
              left: 100,
            }}
          >
            <Icon name="md-time" size={50} color="black" />
          </TouchableOpacity>
        </View>
      </View>
    </>
  );
}

`d.toLocaleTimeString(); // -> "7:38:05 AM"` https://stackoverflow.com/questions/14638018/current-time-formatting-with-javascript — Boris Verkhovskiy, Sep 09 '20 at 17:15
It may be overkill for this simple example but you may want to look into using something like momentjs (https://momentjs.com/) it gives you the capability to pass a date and format it as needed including time only. — Shmili Breuer, Sep 09 '20 at 17:22

Giorgi Gvimradze · Answer 1 · 2020-09-16T17:09:21.703

According to this post here, you could use it this way:

var d = new Date();
d.toLocaleString();       // -> "2/1/2013 7:37:08 AM"
d.toLocaleDateString();   // -> "2/1/2013"
d.toLocaleTimeString();  // -> "7:38:05 AM"

Here is my countdown component for ReactJS with the countdown property you want to achieve. It just requires react-chartjs-2:

import React, { useState,useEffect } from 'react';
import { Doughnut } from 'react-chartjs-2';
import '../css/timerComponent.css'

const RightBar = () =>{

  const seconds_limit = 90;
  //left time calculator
  let finish = new Date();
  finish.setSeconds(finish.getSeconds() + seconds_limit);
  const [endTime] = useState(finish);

  const calculateTimeLeft = () => {
    const difference = +endTime - +new Date();
    if (difference>0)
      return difference;
    else {
      return 0
    }
  }

  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());

  const checkTimeFunction = () => {
    setTimeout(() => {
      setTimeLeft(calculateTimeLeft);
    },1000);
  };

// To-Do !! add dependency array
  useEffect(() => {
    checkTimeFunction()
  });

  //chart
  const [chartData,setChartData] = useState({});

  useEffect( () => {
    if(timeLeft){
    const chart = () => {
      if(timeLeft){
        setChartData({
          datasets:
          [
            {
              data:[timeLeft, seconds_limit*1000 - timeLeft],
              backgroundColor:['#61dafb'],
            },
          ]
        });
      }
    }
    chart(timeLeft);

  }}, [timeLeft] );

  return(
      <div className="timer">
        <div>
          <span>{timeLeft ? Math.floor((timeLeft / (3600000)) % 24) + ':' + Math.floor((timeLeft / 60000) % 60) + ':' + Math.floor((timeLeft / 1000) % 60) : 'Your Time is up'}</span>
        </div>
        <Doughnut data={chartData}  options={{height:'200 px',tooltips:{enabled:false},maintainAspectRatio: true, cutoutPercentage:80, animation:{animateRotate:true}}}/>

      </div>
  );
}
export default RightBar;

react native: what is the way to display time like 16:02:08 instead of 16:2:8?

1 Answers1