Breaking News: Grepper is joining You.com. Read the official announcement!

24 hours date-time format in html

Wordpress Dev answered on January 2, 2023 Popularity 8/10 Helpfulness 1/10

answer 24 hours date-time format in html

24 hours date-time format in html

Comment

const FORMATS = {
  TwelveHours: 12,
  TwentyFourHours: 24
}

class Clock {
  format = FORMATS.TwentyFourHours;

  constructor(clockDivId) {
    this.clockDivId = clockDivId;

    this.clockInterval = setInterval(() => {
      document.getElementById(clockDivId).innerHTML = this.getCurrentTime().format(this.format);
    }, 500)
  }

  getCurrentTime() {
    let today = new Date();
    return new Time(today.getHours(), today.getMinutes(), today.getSeconds());
  }

  switchTo12HourFormat() {
    this.format = FORMATS.TwelveHours
  }

  switchTo24HourFormat() {
    this.format = FORMATS.TwentyFourHours
  }

  destroy() {
    clearInterval(this.clockInterval);
  }

}

class Time {

  constructor(hours, minutes, seconds) {
    this.hours = hours;
    this.minutes = minutes;
    this.seconds = seconds;
  }

  format(type) {
    switch (type) {
      case FORMATS.TwentyFourHours: {
        return this.print(this.hours)
      }
      case FORMATS.TwelveHours: {
        let tag = this.hours >= 12 ? 'p.m' : 'a.m';
        let hours = this.hours % 12;
        if (hours == 0) {
          hours = 12;
        }
        return this.print(hours) + ' ' + tag;
      }

    }

  }

  //private
  to2Digits(number) {
    return number < 10 ? '0' + number : '' + number;
  }

  this.print(hours) {
    return this.to2Digits(hours) + ':' + this.to2Digits(this.minutes) + ':' + this.to2Digits(this.seconds);
  }

}

let clock = new Clock("clock");

Popularity 8/10 Helpfulness 1/10 Language html

Source: stackoverflow.com

Tags: html

Link to this answer
Share Copy Link

Contributed on Jan 02 2023

Wordpress Dev

0 Answers Avg Quality 2/10

24 hours date-time format in html

Contents

More Related Answers

24 hours date-time format in html

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.