JavaScript Local Time printing

Question

Being a beginner, I'm facing some problems. Even I can't find any solution by googling it.

Problem: In my language (Bengali), the entire daytime has five strings ( Sokal, Dupur, Bikal, Sondha, Raat) instead of the international two strings(Am, Pm) .

I wrote this one, but didn't help me much.

    var time = new Date();

    var hour = time.getHours();
    var text = "sokal";

    if(hour == 13){
      text = "dupur";
    }else if(hour == 16){
      text = "bikal";
    }else if(hour == 18){
     text = "sondha"; 
    }else if(hour == 20){
      text = "raat"
    }

    console.log(text);

I want to print:

6Am to 11Am as 06:00 Sokal;
12Pm to 3pm as 12:00 Dupur;
4 Pm to 5Pm as 04:00 Bikal;
6 pm to 7pm as 06:00 Sondha;
8 pm to 5Am as 08:00 Raat;

Answer 1

You should be comparing the hour to different ranges, using relational operators like <, >, <=, or >=. For example, if the hour is less than 6, the period is raat.

Note also that you don't necessarily need to make two comparisons for each range. If the hour is not less than 6, you know it's greater than or equal to 7, so take advantage of the else to reduce the complexity of each subsequent if.

If I understand your requirements, it would look something like this:

function fmtPeriod(hour) {
  if (hour < 6) {
    return "Raat";
  } else if (hour < 12) {
    return "Sokal";
  } else if (hour < 16) {
    return "Dupur";
  } else if (hour < 18) {
    return "Bikal";
  } else if (hour < 20) {
    return "Sondha";
  } else {
    return "Raat"
  }
}

Precisely formatting dates can get pretty involved with different locale-specific rules, but again, based on what you've described, here's a stab at it:

function fmtPeriod(hour) {
  if (hour < 6) {
    return "Raat";
  } else if (hour < 12) {
    return "Sokal";
  } else if (hour < 16) {
    return "Dupur";
  } else if (hour < 18) {
    return "Bikal";
  } else if (hour < 20) {
    return "Sondha";
  } else {
    return "Raat"
  }
}

function fmtHour(hour) {
  return `0${hour % 12 || 12}`.substr(-2);
}
function fmtMinutes(minutes) {
  return `0${minutes}`.substr(-2);
}

var input = document.getElementById("in");
var output = document.getElementById("out");

function formatOutput() {
   const date = new Date("01 Jan 1970 " + input.value);
   const hour = date.getHours();
   const min = date.getMinutes();
   output.innerText = `${fmtHour(hour)}:${fmtMinutes(min)} ${fmtPeriod(hour)}`
}

input.addEventListener('change', formatOutput);

input.value = `${new Date().getHours()}:${new Date().getMinutes()}`;
formatOutput();

#out { font-family: monospace }

<input id="in" type="time">
<span id="out"></span>

Of course, greater minds than mine have put in a lot of time an energy to solve this kind of problem. I'd recommend you take a loot at the standard toLocaleTimeString method. It may not exactly fit your requirements, but it's usually close enough to satisfy most users and will take care of all the more complicated edge cases that it's hard for a single developer to catch:

const outputs = ['en-US', 'bn', 'bn-u-hc-h24'];

var input = document.getElementById("in");

function formatOutput() {
  const date = new Date(`01 Jan 1970 ${input.value}`);
  outputs.forEach(id => {
    const output = document.getElementById(id);
    output.innerText = date.toLocaleTimeString(id);
  });
}

input.addEventListener('change', formatOutput);

input.value = `${new Date().getHours()}:${new Date().getMinutes()}`;
formatOutput();

span {
  font-family: monospace;
}

span::after {
  content: attr(id);
  padding: 0 1em;
}

<input id="in" type="time"><br>
<span id="en-US"></span><br>
<span id="bn"></span><br>
<span id="bn-u-hc-h24"></span><br>

If you're comfortable with managing npm packages, you could also take a look at something like date-and-time (try in RunKit):

var date = require("date-and-time");

let now = new Date();
date.locale('bn');
date.format(now, 'HH:mm A');
// 16:33 দুপুর

Again, this might not be the exact result you want, but it's probably a lot easier and less error-prone than trying to implement the equivalent logic yourself.