Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>There are really two parts to your question: how to format numbers the way you want them (with leading zeros, etc.), and how best to update time displays.</p> <p>The first part (formatting) is easier to answer, so I'll hit that one first. JavaScript, unfortunately, has no built-in way for adding leading zeros when converting a number to a string. So you have two options. One is to use a library to get more robust number-to-string formatting in JavaScript. I really like <a href="http://www.diveintojavascript.com/projects/javascript-sprintf" rel="nofollow">javascript-sprintf</a>, but then I'm an old C guy. If you just want to get this done, and you just need some zero padding, you can extend the string class to do that:</p> <pre><code>String.prototype.padLeft = function( prefix, maxLength ) { var s = this; while( s.length &lt; maxLength ) s = prefix + s; return s; } </code></pre> <p>Now if you have minutes and seconds you need to format, it's easy:</p> <pre><code>var min = 3; var sec = 3; var s = String(min).padLeft( '0', 2 ) + ':' + String(sec).padLeft( '0', 2 ); </code></pre> <p>Because this is a bit unwieldy, let's roll it all up into a function:</p> <pre><code>function formatTime( date ) { return String(date.getHours()).padLeft( '0', 2 ) + ':' + String(date.getMinutes()).padLeft( '0', 2 ); } </code></pre> <p>Now on to the trickier problem: how to manage the actual updating. First of all, working with time zones in JavaScript can be a right PITA, because JavaScript (ES5) doesn't have any real way to construct a <code>Date</code> object with a time zone other than the browser's time zone. Boo for that. (This will likely be addressed in ES6, at least as far as I can tell from the talk on es-discuss.) Also, you're playing with fire by creating a timeout that will do something every 60 seconds like that, and expecting that to stay in sync with the clock. If the user's only going to have the page open for 15 minutes or something, maybe that would be okay (maybe), but it's just going to drift farther and farther apart from the actual time. Telling JavaScript "do something in 60" seconds can't be relied on perfectly. JavaScript's juggling a lot of balls, and it will do its best to get to it in 60 seconds, but it could be 60.001 seconds, or 59.993 seconds. It may not seem like much, but it adds up. Also, if there's a catastrophic event, like stack overflows or other errors that will bork the JavaScript container, it could be off by a lot more than milliseconds.</p> <p>The other problem with that approach is that the clocks you seen on screen won't be rolling over at the correct times. If the page loads half a minute in, the time won't update until half a minute into the NEXT minute. So really, what you're seen on screen could be off by up to 30 seconds. Maybe that's not a big deal to your application, but it sounds awful to me.</p> <p>So, what's a better way to do it? Well, ideally, every time you wanted to refresh the screen (and we'll talk about that frequency in a minute), you'd get a <code>Date</code> object from the browser, convert it into the appropriate time zone, and then update the times from those objects. The problem is, there's no real way to do this in JavaScript (display something in a different time zone).</p> <p>You have three broad options here:</p> <ol> <li><p>Load the page with timestamps provided by PHP (this was the basis for my previous answer, which I have abandoned). The problem with this approach is that it is complicated, and can fail around time transitions (daylight savings time transitions). I have come up with better options.</p></li> <li><p>Use PHP for the timezone calculations, and use AJAX to update your time strings. This is a pretty solid solution, but why do that work on the server when the work can be done on the client?</p></li> <li><p>Use a library that brings timezone-capable dates to JavaScript. This to me is the ideal solution. It's shameful that timezone-capable date objects aren't already available in JavaScript, and this solution "fixes" JavaScript.</p></li> </ol> <p>Fortunately, there is a library available so we can go with option #3: </p> <p><a href="https://github.com/mde/timezone-js" rel="nofollow">https://github.com/mde/timezone-js</a></p> <p>Once you have that script installed, you can get whatever timezones you want (I'm putting this in a function that will also update the displays):</p> <pre><code>function updateDateDisplays() { var now = new Date(); var paris = new timezoneJS.Date( now, 'Europe/Paris'); var miami = new timezoneJS.Date( now, 'America/Miami'); // other TZs go here.... // update HTML here.... } </code></pre> <p>The only drawback to this approach is that it relies on the user's computer date to be correct. If that's a concern, you will have to use AJAX, or pass the current date on page load and go off of offsets. However, let's assume that we can trust the user's clock.</p> <p>Now that we have a way of getting dates in specific timezones, all that concerns us is updating the clock. As I mentioned before, updating every 60 seconds has a problem: the minute could be off by up to 30 seconds. Perhaps this isn't an issue in your implementation, but it's an easy enough thing to fix, so why not do it correctly?</p> <p>Most UX research indicates that things that happen within 100 milliseconds appear "instantaneous" to humans. I usually half that to 50 milliseconds, which is hardly a burden on any computer made in the last 20 years. So all you have to do is call <code>updateTimeDisplays()</code> every 50 milliseconds, and you will have an accurate time display for your users.</p>
    singulars
    1. This table or related slice is empty.
    1. POAdd a minute to hh:mm with JavaScript
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USEthan Brown
    1. USEthan Brown
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. COThanks for the thorough response. I'll try your formatting function. However, I didn't want to deal with current time and offsets in my JV, because I don't think that takes DST into account. I've already dealt with that in PHP and just need JS to update those values every minute. Absolute accuracy isn't that important in this application.
      singulars
      1. PO
      1. USgr8dane
    2. COI updated the answer with a pointer to a JavaScript library that handles timezones (and DST). FYI, the PHP functions also take DST into account, so if you wanted to go that direction, you could as well.
      singulars
      1. PO
      1. USEthan Brown
    3. COIt looks like you already know that dealing with DST is not something you want to do yourself! That's good, because you'd be crazy to!
      singulars
      1. PO
      1. USEthan Brown
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload