How can I style a date created by php and output within a single span element

Question

My issue is the CMS I am working with outputs the date within a single span element like so: M/d/Y, which outputs the following html: Mar/03/14.

I would like to style the date to stack onto of each variable e.g. 2014 (on the bottom), JAN (ontop of the year), and 14 (the day ontop of the month).

Unfortunately I only have access to the css and smarty tpl files, not the php files. I am looking for CSS solution but I am open to JS as well.

Any suggestion is appreciated.

Answer 1

I writed this example using jQuery:

$(document).ready(function(){

    // You can change for your classes or add this in your smarty template
    var month = $('.month'),
        day = $('.day'),
        year = $('.year'),
        out = $('.out');

    var months = {
        'JAN': '01'
        'FEB', '02',
        'MAR': '03' 
        // etc...
    };

    // Hides the unecessary elements
    month.hide();
    year.hide();
    day.hide();

    out.html(months[month.text()] + '/' + day.text() + '/' + year.text());

});