StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<blockquote> <p><strong><em>UPDATED!</em></strong>, Scroll Down</p> </blockquote> <p>If you want something simple pretty to the end user ... <em><code>Also, fixed a small suffix issue in the first version below. Now properly returns suffix.</code></em></p> <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-js lang-js prettyprint-override"><code>var objToday = new Date(), weekday = new Array('Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'), dayOfWeek = weekday[objToday.getDay()], domEnder = function() { var a = objToday; if (/1/.test(parseInt((a + "").charAt(0)))) return "th"; a = parseInt((a + "").charAt(1)); return 1 == a ? "st" : 2 == a ? "nd" : 3 == a ? "rd" : "th" }(), dayOfMonth = today + ( objToday.getDate() < 10) ? '0' + objToday.getDate() + domEnder : objToday.getDate() + domEnder, months = new Array('January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'), curMonth = months[objToday.getMonth()], curYear = objToday.getFullYear(), curHour = objToday.getHours() > 12 ? objToday.getHours() - 12 : (objToday.getHours() < 10 ? "0" + objToday.getHours() : objToday.getHours()), curMinute = objToday.getMinutes() < 10 ? "0" + objToday.getMinutes() : objToday.getMinutes(), curSeconds = objToday.getSeconds() < 10 ? "0" + objToday.getSeconds() : objToday.getSeconds(), curMeridiem = objToday.getHours() > 12 ? "PM" : "AM"; var today = curHour + ":" + curMinute + "." + curSeconds + curMeridiem + " " + dayOfWeek + " " + dayOfMonth + " of " + curMonth + ", " + curYear; document.getElementsByTagName('h1')[0].textContent = today;</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><h1></h1></code></pre> </div> </div> </p> <blockquote> <p><strong>UBBER UPDATE</strong> After much procrastination, I've finally <a href="https://github.com/JDMcKinstry/JavaScriptDateFormat"><strong>GitHubbed</strong></a> and updated this with the final solution I've been using for myself. It's even had some last minute edits to make it sweeter! If you're looking for the old <a href="http://jsfiddle.net/SpYk3/rYzAY/">jsFiddle, please see this</a>.</p> </blockquote> <p>This update comes in <s>2</s> flavors, still relatively small, though not as small as my above, original answer. If you want extremely small, go with that. <br /> Also Note: This is still less bloated than moment.js. While moment.js is nice, imo, it has to many secular methods, which require learning moment as if it were a language. Mine here uses the same common format as <a href="http://php.net/manual/en/function.date.php">PHP:date</a>.</p> <h3>Quick Links</h3> <ul> <li><a href="https://cdn.rawgit.com/JDMcKinstry/JavaScriptDateFormat/master/Date.format.min.js">Date.format.min.js</a> 5.08 KB</li> <li><a href="https://cdn.rawgit.com/JDMcKinstry/JavaScriptDateFormat/master/dateFormat.min.js">dateFormat.min.js</a> 4.16 KB</li> </ul> <blockquote> <p><strong>Flavor 1 <a href="http://jsfiddle.net/SpYk3/smdz6d43/"><code>new Date().format(String)</code></a></strong> My Personal Fav. I know the taboo, but works great on the Date Object. Just be aware of any other mods you may have to the Date Object.</p> </blockquote> <pre><code>// use as simple as new Date().format('m-d-Y h:i:s'); // 07-06-2016 06:38:34 </code></pre> <blockquote> <p><strong>Flavor 2 <a href="http://jsfiddle.net/SpYk3/tcqpw5d7/"><code>dateFormat(Date, String)</code></a></strong> More traditional all-in-one method. Has all the ability of the previous, but is called via method with Date param.</p> </blockquote> <pre><code>// use as simple as dateFormat(new Date(), 'm-d-Y h:i:s'); // 07-06-2016 06:38:34 </code></pre> <blockquote> <p><strong>BONUS Flavor (requires jQuery) <a href="https://github.com/JDMcKinstry/jQuery-Date"><code>$.date(Date, String)</code></a></strong> This contains much more than just a simple <code>format</code> option. It extends the base Date object and includes methods such as <code>addDays</code>. For more information, please see the <a href="https://github.com/JDMcKinstry/jQuery-Date"><em>Git</em></a>.</p> </blockquote> <p>In this mod, the format characters are inspired by <a href="http://php.net/manual/en/function.date.php">PHP:date</a>. For a complete list, please see my <a href="https://github.com/JDMcKinstry/JavaScriptDateFormat/blob/master/README.md">README</a></p> <p>This mod also has a much longer list of pre-made formats. To use a premade format, simply enter its key name. <code>dateFormat(new Date(), 'pretty-a');</code></p> <ul> <li>'compound' <ul> <li>'commonLogFormat' == 'd/M/Y:G:i:s'</li> <li>'exif' == 'Y:m:d G:i:s'</li> <li>'isoYearWeek' == 'Y\\WW'</li> <li>'isoYearWeek2' == 'Y-\\WW'</li> <li>'isoYearWeekDay' == 'Y\\WWj'</li> <li>'isoYearWeekDay2' == 'Y-\\WW-j'</li> <li>'mySQL' == 'Y-m-d h:i:s'</li> <li>'postgreSQL' == 'Y.z'</li> <li>'postgreSQL2' == 'Yz'</li> <li>'soap' == 'Y-m-d\\TH:i:s.u'</li> <li>'soap2' == 'Y-m-d\\TH:i:s.uP'</li> <li>'unixTimestamp' == '@U'</li> <li>'xmlrpc' == 'Ymd\\TG:i:s'</li> <li>'xmlrpcCompact' == 'Ymd\\tGis'</li> <li>'wddx' == 'Y-n-j\\TG:i:s'</li> </ul></li> <li>'constants' <ul> <li>'AMERICAN' == 'F j Y'</li> <li>'AMERICANSHORT' == 'm/d/Y'</li> <li>'AMERICANSHORTWTIME' == 'm/d/Y h:i:sA'</li> <li>'ATOM' == 'Y-m-d\\TH:i:sP'</li> <li>'COOKIE' == 'l d-M-Y H:i:s T'</li> <li>'EUROPEAN' == 'j F Y'</li> <li>'EUROPEANSHORT' == 'd.m.Y'</li> <li>'EUROPEANSHORTWTIME' == 'd.m.Y H:i:s'</li> <li>'ISO8601' == 'Y-m-d\\TH:i:sO'</li> <li>'LEGAL' == 'j F Y'</li> <li>'RFC822' == 'D d M y H:i:s O'</li> <li>'RFC850' == 'l d-M-y H:i:s T'</li> <li>'RFC1036' == 'D d M y H:i:s O'</li> <li>'RFC1123' == 'D d M Y H:i:s O'</li> <li>'RFC2822' == 'D d M Y H:i:s O'</li> <li>'RFC3339' == 'Y-m-d\\TH:i:sP'</li> <li>'RSS' == 'D d M Y H:i:s O'</li> <li>'W3C' == 'Y-m-d\\TH:i:sP'</li> </ul></li> <li>'pretty' <ul> <li>'pretty-a' == 'g:i.sA l jS \\o\\f F Y'</li> <li>'pretty-b' == 'g:iA l jS \\o\\f F Y'</li> <li>'pretty-c' == 'n/d/Y g:iA'</li> <li>'pretty-d' == 'n/d/Y'</li> <li>'pretty-e' == 'F jS - g:ia'</li> <li>'pretty-f' == 'g:iA'</li> </ul></li> </ul> <p><em>As you may notice, you can use double <code>\</code> to escape a character.</em></p> <hr>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

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