<header class="intro">Hello, Chris, enjoy today.</header>

<div class="today">
    <div class="today-piece  top  day"></div>
    <div class="today-piece  middle  month"></div>
    <div class="today-piece  middle  date"></div>
    <div class="today-piece  bottom  year"></div>
</div>

<footer>Crafted by <a href="//codepen.io/ChrisNager" target="_blank">Chris Nager</a></footer>
/* Base
   -------------------------------------------------- */

html {
    max-width: 23em;
    margin: 0 auto;
    padding: 1.25em;
    font: 100% "Helvetica Neue", sans-serif;
    text-align: center;
    color: #222;
    background: #e2e7e8;
}
a {
    color: #d74435;
}
a:hover,
a:focus {
    color: #e94939;
}






/* Intro
   -------------------------------------------------- */

.intro {
    margin-bottom: 0.85em;
    border-radius: 0.25rem;
    padding: 1.25rem;
    font-size: 1.2em;
    font-weight: 200;
    text-align: left;
    background: rgba(255, 255, 255, 0.75);
}






/* Today
   -------------------------------------------------- */

.today-piece {
    border-radius: 0.25rem;
    padding: 1.6rem;
    font-size: 1.25em;
    text-align: center;
    background: white;
}






/* Piece positions
   -------------------------------------------------- */

.top {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}
.middle {
    border-radius: 0;
}
.bottom {
    border-top-right-radius: 0;
    border-top-left-radius: 0;
}






/* Piece categories
   -------------------------------------------------- */

.day,
.year {
    font-size: 0.65em;
    font-weight: 500;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: white;
    background: #e94939;
}
.month {
    padding-top: 1.75rem;
    padding-bottom: 0;
    font-size: 1.5em;
    font-weight: 200;
}
.date {
    padding-top: 0;
    padding-bottom: 1.75rem;
    font-size: 3em;
    font-weight: 100;
}






/* Footer
   -------------------------------------------------- */

footer {
    margin-top: 0.75rem;
    font-size: 0.65em;
}
/**
 * Credit where credit is due:
 *
 * Thanks, SpYk3HH for your sweet fiddlin'.
 * http://jsfiddle.net/SpYk3/rYzAY/
 */

function DateTime() {
    function getDaySuffix(a) {
        var b = "" + a,
            c = b.length,
            d = parseInt(b.substring(c-2, c-1)),
            e = parseInt(b.substring(c-1));
        if (c == 2 && d == 1) return "th";
        switch(e) {
            case 1:
                return "st";
                break;
            case 2:
                return "nd";
                break;
            case 3:
                return "rd";
                break;
            default:
                return "th";
                break;
        };
    };

    this.getDoY = function(a) {
        var b = new Date(a.getFullYear(),0,1);
    return Math.ceil((a - b) / 86400000);
    }

    this.date = arguments.length == 0 ? new Date() : new Date(arguments);

    this.weekdays = new Array('Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday');
    this.months = new Array('January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December');
    this.daySuf = new Array( "st", "nd", "rd", "th" );

    this.day = {
        index: {
            week: "0" + this.date.getDay(),
            month: (this.date.getDate() < 10) ? "0" + this.date.getDate() : this.date.getDate()
        },
        name: this.weekdays[this.date.getDay()],
        of: {
            week: ((this.date.getDay() < 10) ? "0" + this.date.getDay() : this.date.getDay()) + getDaySuffix(this.date.getDay()),
            month: ((this.date.getDate() < 10) ? "0" + this.date.getDate() : this.date.getDate()) + getDaySuffix(this.date.getDate())
        }
    }

    this.month = {
        index: (this.date.getMonth() + 1) < 10 ? "0" + (this.date.getMonth() + 1) : this.date.getMonth() + 1,
        name: this.months[this.date.getMonth()]
    };

    this.year = this.date.getFullYear();

    this.sym = {
        d: {
            d: this.date.getDate(),
            dd: (this.date.getDate() < 10) ? "0" + this.date.getDate() : this.date.getDate(),
            ddd: this.weekdays[this.date.getDay()].substring(0, 3),
            dddd: this.weekdays[this.date.getDay()],
            ddddd: ((this.date.getDate() < 10) ? "0" + this.date.getDate() : this.date.getDate()) + getDaySuffix(this.date.getDate()),
            m: this.date.getMonth() + 1,
            mm: (this.date.getMonth() + 1) < 10 ? "0" + (this.date.getMonth() + 1) : this.date.getMonth() + 1,
            mmm: this.months[this.date.getMonth()].substring(0, 3),
            mmmm: this.months[this.date.getMonth()],
            yy: (""+this.date.getFullYear()).substr(2, 2),
            yyyy: this.date.getFullYear()
        }
    };

    this.formats = {
        pretty: {
          a: this.sym.d.dddd,
          b: this.sym.d.ddddd,
          c: this.sym.d.mmmm,
          d: this.sym.d.yyyy
        }
    };
};



var dt = new DateTime();
$('.day').text(dt.formats.pretty.a);
$('.date').text(dt.formats.pretty.b);
$('.month').text(dt.formats.pretty.c);
$('.year').text(dt.formats.pretty.d);
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js