Date formatting with jQuery UI

If you’re developing for a legacy CMS or an absolute POS in-house built platform, you’ll most likely need to change the way dates are formatted on the page. Using jQuery UI this is possible and here’s how to do it!



HTML
1
2
3
<span class="date">06-Aug-2012</span>
<span class="date">2012/06/Aug</span>
<span class="date">Monday, August 06, 2012</span>
jQuery
1
2
3
4
5
6
7
8
$(document).ready(function () {
    $('span.date').each(function() {
        var dateFormat = $(this).text()
        var dateFormat = $.datepicker.formatDate('MM dd, yy', new Date(dateFormat));
        //alert(dateFormat);
        $(this).html(dateFormat + "<br>");
    });
});​
Date Formatting options: http://docs.jquery.com/UI/Datepicker/formatDate