Skip to content

Instantly share code, notes, and snippets.

@mattpass
Created June 9, 2012 11:49
Show Gist options
  • Save mattpass/2900665 to your computer and use it in GitHub Desktop.
Save mattpass/2900665 to your computer and use it in GitHub Desktop.
Live server datetime golfing...
<span id="serverDT"></span>
<script>
var nDT = <?php echo time()*1000; ?>;
setInterval(function(){
var s=(new Date(nDT+=1e3)+'').split(' '),
d=s[2]*1,
t=s[4].split(':'),
p=t[0]>11?'pm':'am',
e=d%20==1|d>30?'st':d%20==2?'nd':d%20==3?'rd':'th';
t[0]=--t[0]%12+1;
document.getElementById('serverDT').innerHTML=[s[0],d+e,s[1],s[3],t.join(':')+p].join(' ');
},1000);
</script>
@mattpass
Copy link
Author

mattpass commented Jun 9, 2012

@mathiasbynens Not sure I quite follow. I can cache lines 10 & 11 somehow?

@maettig
Copy link

maettig commented Jun 9, 2012

I'm afraid there is no better way to do date formating in JavaScript. It gets dirty very fast (check this JSON date formatter by @crhallberg). Why not do it in PHP using strftime?

@mattpass
Copy link
Author

mattpass commented Jun 9, 2012

@maettig Thats what I was thinking. Would like to just split(' ') a datetime string, but am not 100% sure if there is a format thats the same across all browsers? :/

If there is an absolutely consistent format, I can go that route and in doing so reduce the bytes to around half.

@pvdz
Copy link

pvdz commented Jun 9, 2012

In case it matters, you could use a function declaration rather than var serverDT = function...

Could you maybe specify the format in less-cryptic form? ;)

if (h>12) {h-=12}; should obviously be something like h>12 && (h-=12) or at least drop the curlies. But since there's more stuff like this (long var names etc) I don't really wanna pester you with that ;)

@pvdz
Copy link

pvdz commented Jun 9, 2012

Actually, you're doing

h>=12 ? hE="pm" : hE="am";
if (h>12) {h-=12};

You sould probably combine those... :)

@mattpass
Copy link
Author

mattpass commented Jun 9, 2012

@qfox I guess a few bytes could be saved here and there, but am sure there's a better solution that'd save a lot more bytes.

The format I'm aiming for is:
Sat 9rd Jun 2012 1:56:42pm

I think @maettig is thinking along the same lines as me: output the date in this format with PHP. This can then be picked up with JS, split on the whitespaces & modified.

@mattpass
Copy link
Author

mattpass commented Jun 9, 2012

Just saved 95 chars by removing the 2 x name arrays and instead chopping the 1st & 2nd values from the date (lines 7 & 9), changing to setInterval and removing those 2 curlies @qfox mentioned :D

@pvdz
Copy link

pvdz commented Jun 9, 2012

Month names could be more efficient: "JanFebMarAprMayJunJulAugSepOctNovDec".match(/(.{3})/g). Oh but I see you removed that entirely

@pvdz
Copy link

pvdz commented Jun 9, 2012

(Note that foreign browsers could end up with foreign day/month names)

@mattpass
Copy link
Author

mattpass commented Jun 9, 2012

@qfox I don't mind if it outputs the local language, in fact thats a benefit. :)

Saved another 165 bytes now by changing the date provided by JS to a string and splitting that into an array. I think I can't improve this anymore without reducing var names or removing whitespace.

Now just 505 chars. I'm calling this done.

@maettig
Copy link

maettig commented Jun 9, 2012

There is still a lot you can do to make this shorter including dropping the PHP part (this will display the client time instead of the server time).

<span id="serverDT"></span>
<script>
var nDT = <?php echo time() * 1000; ?>;
setInterval(function(){
  var s=(new Date(nDT+=1e3)+'').split(' '),
    d=s[2]*1,
    t=s[4].split(':'),
    p=t[0]>11?'pm':'am',
    e=d%20==1|d>30?'st':d%20==2?'nd':d%20==3?'rd':'th';
  t[0]=--t[0]%12+1;
  document.getElementById('serverDT').innerHTML=[s[0],d+e,s[1],s[3],t.join(':')+p].join(' ');
},1000);
</script>

Edit: Bugfix. Displays server time again. Saved 2 bytes.

@mattpass
Copy link
Author

mattpass commented Jun 9, 2012

@maettig Excellent. Now under the 500 mark at 489 chars (from your suggestion plus removing unncessary brackets on line 7 and whitespace on line 11).

@mattpass
Copy link
Author

mattpass commented Jun 9, 2012

468 chars now, but I've only really achieved that by removing whitespace. Apart from reducing var names, putting everything onto 1 line, removing indents or semicolons at line end I think this is it?

@mattpass
Copy link
Author

mattpass commented Jun 9, 2012

3 more chars saved by using dS=String(date).split(' ');
(instead of using toString)

@mattpass
Copy link
Author

mattpass commented Jun 9, 2012

@maettig It's the server DT I'm really looking to display but a lot of those changes could be used for that I believe?

@maettig
Copy link

maettig commented Jun 9, 2012

Sure. I did an update to my code above.

@mattpass
Copy link
Author

mattpass commented Jun 9, 2012

377 chars now thanks to @maettig. Some v good changes, only drawback I can see is getting rid of the function so you see nothing for the first 1 sec and am I right in thinking those vars leak to global?

(As I understand it.... var a=1,b=2 ...b leaks to global? Or is it nothing escapes from anon functions?)

@maettig
Copy link

maettig commented Jun 9, 2012

No, var a=1,b=2 does not leak. To fix the delay you can put something like <?php echo strftime("..."); ?> in the <span>. Edit: I saved another two bytes in the code above.

@mattpass
Copy link
Author

mattpass commented Jun 9, 2012

@maettig Mmmm OK, I'm sure someone told me doing that leaks? Oh well, learnt something as well then :)

Don't mind the delay (gives the appearance of actually linking in with the server) ;)

Am integrating this as a final solution into ICEcoder today. Many thanks!

@p01
Copy link

p01 commented Jun 9, 2012

I know you're aiming for a specific format but why not let the end user in control and use the locale Date format ?

<span id="serverDT"></span>
<script>
var nDT = <?php echo time() * 1000; ?>;
setInteval("document.getElementById('serverDT').textContent=new Date(nDT+=1e3).toLocaleString()",1000);
</script>

@mattpass
Copy link
Author

mattpass commented Jun 9, 2012

@p01 Good point. I chose that format because it looks a little nicer than the regular Date output. In the bigger scheme of things I don't mind the extra 100 bytes or so on my IDE to have this format.

@mattpass
Copy link
Author

@maettig Good spot, updated.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment