jQuery Date Formatting in Business Catalyst

Question

I work with Business catalyst a lot, and would like to be able to format the dates as desired. Date output is as follows:

<span class="date">06-Feb-2014</span>

Currently using jQuery 1.10.2, and I can add jQuery UI if that's the way to go.

I have tried the following to no effect:

$(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>");
    });
});

The site in question is http://www.doverfoursquare.org

Perhaps there is some sort of conflict with existing scripts?

Any help is GREATLY appreciated.

Answer 1

I know this is an old post but it doesn't seem answered...

I would use Liquid for this for example in an events module using a template:

{{date | date: "dddd"}}

and / or

{{date | date: "%d"}} {{date | date: "MMM"}}

should get you "Saturday 4 July"

You can use this resource to help with the modifiers / filters

http://docs.businesscatalyst.com/dev-assets/reference#!/liquid-reference/reference/filters.html!date-filters

Answer 2

When dealing with formatting dates I always see myself turn back to momentjs: http://momentjs.com/ . Its not the fastest framework but it will help you format your date in any desired way:

moment().format("DD-MMM-YYYY"); // "20-Feb-2014"

Answer 3

It works as intended here:

Note that datepicker is extension trough jQuery UI and as such you have to include it to work:

//code.jquery.com/ui/1.10.4/jquery-ui.js

Fiddle

Note that in example the var dateFormat is renamed, so to not re-declare existing.

$(document).ready(function () {
    $('span.date').each(function() { 
        var value = $(this).text(),
            date = $.datepicker.formatDate(
                'MM dd, yy', new Date(value)
            );
        $(this).html(date + "<br>");
    });
});

Or you could say:

$(this).html(
    $.datepicker.formatDate(
        'MM dd, yy', new Date($(this).text())
    ) + "<br>"
);

---

Edit in regards to date format:

Ref. ECMA

Format can be

YYYY-MM-DD

but not

DD-MM-YYYY

Also read this.

---

Errors:

Running you page, it show's this error:

Uncaught TypeError: Object [object Object] has no method 'player' (index):343

By source that would be:

    $(document).ready(function() {
        var settings = {
            progressbarWidth: '200px',
            progressbarHeight: '5px',
            progressbarColor: '#22ccff',
            progressbarBGColor: '#eeeeee',
            defaultVolume: 0.8
        };
        $(".player").player(settings); // <<--- Error line
    });

This is a possible source of halting the script at load or the like.

It also gives, (This could be some Facebook issue):

Given URL is not allowed by the Application configuration.: One or more of the given URLs is not allowed by the App's settings. It must match the Website URL or Canvas URL, or the domain must be a subdomain of one of the App's domains.

The:

event.returnValue is deprecated. Please use the standard event.preventDefault() instead.

you can ignore as it is a jQuery "thing" and IE fix/hack.