2

My goal is to display my business opening hours and also indicating when we are closed.

View an example of what i want on codepen. But this is in 24 hours format. I need help with converting the javascript to display the date in 12 hours format.

Below is the javascript that display the opening hours in 24 hours.

jQuery(document).ready(function($){

        var currentDate = new Date();
        var weekday = [];
        weekday[0] = "Sunday";
        weekday[1] = "Monday";
        weekday[2] = "Tuesday";
        weekday[3] = "Wednesday";
        weekday[4] = "Thursday";
        weekday[5] = "Friday";
        weekday[6] = "Saturday";

        var currentDay = weekday[currentDate.getDay()];

        var currentTimeHours = currentDate.getHours();
        currentTimeHours = currentTimeHours < 10 ? "0" + currentTimeHours : currentTimeHours;
        var currentTimeMinutes = currentDate.getMinutes();
        var timeNow = currentTimeHours + "" + currentTimeMinutes;

        var currentDayID = "#" + currentDay; //gets todays weekday and turns it into id
        $(currentDayID).toggleClass("today"); //this works at hightlighting today

        var openTimeSplit = $(currentDayID).children('.opens').text().split(":");

        var openTimeHours = openTimeSplit[0];
        openTimeHours = openTimeHours < 10 ? "0" + openTimeHours : openTimeHours;

        var openTimeMinutes = openTimeSplit[1];
        var openTimex = openTimeSplit[0] + openTimeSplit[1];

        var closeTimeSplit = $(currentDayID).children('.closes').text().split(":");

        var closeTimeHours = closeTimeSplit[0];
        closeTimeHours = closeTimeHours < 10 ? "0" + closeTimeHours : closeTimeHours;

        var closeTimeMinutes = closeTimeSplit[1];
        var closeTimex = closeTimeSplit[0] + closeTimeSplit[1];

        if (timeNow >= openTimex && timeNow <= closeTimex) {
            $(".openorclosed").toggleClass("open");
        } else {
            $(".openorclosed").toggleClass("closed");
        }
});

You can view the working example in 24hours format on codepen

Thanks in advance for your help and time!

kije
  • 33
  • 3
  • 1
    https://stackoverflow.com/questions/8888491/how-do-you-display-javascript-datetime-in-12-hour-am-pm-format This post may help you. – Ajay Nov 09 '18 at 10:06
  • Possible duplicate of [Javascript: convert 24-hour time-of-day string to 12-hour time with AM/PM and no timezone](https://stackoverflow.com/questions/13898423/javascript-convert-24-hour-time-of-day-string-to-12-hour-time-with-am-pm-and-no) – peeebeee Nov 09 '18 at 10:21
  • Thanks Ajay for your recommendation.. I am new to Javascript, i found the above example on codepen and would appreciate someone helping me to convert it to the 12hours format. thanks. – kije Nov 09 '18 at 10:24
  • var T = currentTimeHours % 12 + ':' + currentTimeMinutes + ':'+ (currentTimeHours < 12 ? 'AM':'PM'); – LDS Nov 09 '18 at 10:45
  • Hello @LDS, how do i apply your code to the existing solution to make it work? Thanks in advance. – kije Nov 09 '18 at 13:00

1 Answers1

0

var currentTimeHours = currentDate.getHours();
currentTimeHours = currentTimeHours < 10 ? "0" + currentTimeHours : currentTimeHours;
var currentTimeMinutes = currentDate.getMinutes();
var timeNow = currentTimeHours + "" + currentTimeMinutes;


 Replace the above code by

var currentTimeHours = currentDate.getHours();
var currentTimeMinutes = currentDate.getMinutes();
var timeNow = currentTimeHours % 12 + ':' + currentTimeMinutes + ':'+ (currentTimeHours < 12 ? 'AM':'PM');
LDS
  • 354
  • 3
  • 9
  • Thanks so much @LDS, the 12 hours format now works but if i enter the hours and minutes together, it doesn't work. e.g, 12pm - 6pm works but 12:30pm - 9:50pm doesn't work. – kije Nov 09 '18 at 14:09
  • What i observed is, the code only reads hours without considering minutes. if i enter 3:30pm - 6pm, it shows the business is open even if it is not yet 3:30pm but some minutes before 3:30pm like 3:20pm. I will appreciate you help me look into it. Many thanks. – kije Nov 09 '18 at 14:33
  • OK I am looking it – LDS Nov 10 '18 at 08:07