5

I am scraping JSON data from a url. The time is military time and I was wondering if there is a way once I retrieve on the client side to convert it to standard time.

Here is the JSON:

[
  {
    SaturdayClose: "21:00",
    SaturdayOpen: "10:00",
    SundayClose: "12:00",
    SundayOpen: "18:00",
    WeekdayClose: "21:00",
    WeekdayOpen: "10:00"
  }
]

Here is my index.html:

    <p>
        Sun: ${ SundayOpen }a - ${ SundayClose }p Mon - Sat: ${ SaturdayOpen }a ${ SaturdayClose }p
    </p>

This returns this type of ugliness:

Sun: 18:00a - 12:00p Mon - Sat: 10:00a 21:00p

I would rather return this:

Sun: 6:00a - 12:p Mon - Sat: 10:00a - 9:00p

J0NNY ZER0
  • 707
  • 2
  • 13
  • 32
  • search google for js format date rather then convert ;-) – T I Dec 28 '11 at 15:57
  • when I search my results are mainly to do with c#. Is this only possible on the server side? If you have a link please shoot it. THanks. – J0NNY ZER0 Dec 28 '11 at 16:00
  • sorry a js solution might be [this](http://stackoverflow.com/a/8622009/1114171) or [this](http://stackoverflow.com/a/1056730/1114171) – T I Dec 28 '11 at 16:06
  • I edited my solution. You can now what I want to accomplish. Your links did not help me figure this out. Do you have a different solution?\ – J0NNY ZER0 Dec 28 '11 at 16:28
  • @HelloJonnyOh - please return and accept the answer you decided to use – mplungjan Dec 30 '11 at 13:22

5 Answers5

4

Using a date script will work of course. If all you need is to convert from 24 hour clock to 12 hour, you can simply subtract the time and add the period as indicated.

EDIT

I added two times as a test, 00:30, which should be 12:30 am, and 12:15, which should be 12:15 pm. See the new edit below.

var times = {
    SaturdayClose: "21:00",
    SaturdayOpen: "10:00",
    SundayClose: "12:00",
    SundayOpen: "18:00",
    WeekdayOpen: "10:00",
    WeekdayClose: "21:00",
    WeekendOpen: "12:15",
    WeekendClose: "00:30"
};

console.log(times);

for (var time in times) {
    var parts = times[time].split(':'),
        hour = parts[0],
        minutes = parts[1];

    if (hour > 12) {
        times[time] = (hour - 12) + ':' + minutes + ' pm';
    } else if (hour == 0) {
        times[time] = 12 + ':' + minutes + ' am';
    } else if (hour == 12) {
        times[time] += ' pm';
    } else {
        times[time] += ' am';
    }
}

console.log(times);

http://jsfiddle.net/tqXCL/3/

Which gives you the following after conversion:

SaturdayClose "9:00 pm" 
SaturdayOpen  "10:00 am"    
SundayClose   "12:00 pm"    
SundayOpen    "6:00 pm" 
WeekdayClose  "9:00 pm" 
WeekdayOpen   "10:00 am"    
WeekendClose  "12:30 am"    
WeekendOpen   "12:15 pm"
Jared Farrish
  • 48,585
  • 17
  • 95
  • 104
3

If you want to use the html, not the json, you can do this.

dateEl.innerHTML=dateEl.innerHTML.replace(/(\d\d)(:\d\d[ap])/g,function(m,hour,suffix) {
  return (+hour+11)%12+1+suffix;
});

Note that this assumes you've set dateEl to the appropriate element, and that that element does not contain other times that you don't want to convert.

  • interesting approach... A bit too terse to show a beginner but clever. Does not handle midnight either http://jsfiddle.net/mplungjan/tNLt7/ – mplungjan Dec 28 '11 at 17:38
  • Well now I feel like an idiot - I knew it handled 12:00 and assumed it would work on midnight when I read the comment on your post. Thanks for pointing that out - fixed (with one character :) ). –  Dec 28 '11 at 17:55
1

Take a look as date.js. It is full of handy date conversion functions.

Diodeus - James MacFarlane
  • 112,730
  • 33
  • 157
  • 176
1

DEMO 

window.onload=function() {

  var re=/(\d{2}:\d{2}[ap])/gi
  var times = document.getElementById('times').innerHTML;
  var mil = times.match(re);
  for (var i=0;i<mil.length;i++) {
    var parts = mil[i].split(":");
    var hours = parseInt(parts[0],10);
    if (hours > 12) parts[0]=hours-=12;
    else if (hours==0) parts[0]=12
    times=times.replace(mil[i],parts.join(":"))
  }
  document.getElementById('times').innerHTML = times;
}
mplungjan
  • 169,008
  • 28
  • 173
  • 236
  • The "|" isn't used in a character class - it's being interpreted literally right now. –  Dec 28 '11 at 18:22
  • 1
    It works because it's being interpreted as another option right now. So the regex matches `12:00a`, `12:00p`, and `12:00|`. You don't need any separator in a character class, just write `[ap]` (you're probably thinking of (groups), which do use `|` as a separator). You can look [here](http://www.regular-expressions.info/quickstart.html) for more info. –  Jan 02 '12 at 11:58
0

"Military time" (a.k.a. 24-hour time) is easily converted to 12-hour time via a simple modulo 12.

JSFiddle example:

var obj = {
    SaturdayClose: "21:00",
    SaturdayOpen: "10:00",
    SundayClose: "12:00",
    SundayOpen: "18:00",
    WeekdayClose: "21:00",
    WeekdayOpen: "10:00"
}, prop, $output = $('#output'), time, x, meridiem;

for (prop in obj) {
    if (obj.hasOwnProperty(prop)) {
        x =+obj[prop].substr(0, 2);

        if (x > 12) {
            x = x % 12;
            meridiem = "pm";
        } else {
            meridiem = "am";
        }

        time = x + ":00" + meridiem;

        $output.append("<li>" + prop + " " + time + "</li>");
    }
}
James Sumners
  • 14,485
  • 10
  • 59
  • 77
  • That doesn't handle `00:30` and `12:15` correctly: http://jsfiddle.net/2qxPa/1/ You're also not adding the period, so it's ambiguous which period the times refer to. – Jared Farrish Dec 28 '11 at 16:58
  • Good catch. That slipped my mind. I have updated my answer with a correction. – James Sumners Dec 28 '11 at 17:13