To format date the way you need the best approach is to use moment.js library. The code is shortened greatly:
Code:
$(document).ready(function() {
    var interval = setInterval(function() {
        var momentNow = moment();
        $('#date-part').html(momentNow.format('YYYY MMMM DD') + ' '
                            + momentNow.format('dddd')
                             .substring(0,3).toUpperCase());
        $('#time-part').html(momentNow.format('A hh:mm:ss'));
    }, 100);
});

html
Code:
<div class='time-frame'>
    <div id='date-part'></div>
    <div id='time-part'></div>
</div>
<br>
<input type='button' id='stop-interval' value='Stop time' />

css
Code:
.time-frame {
    background-color: #000000;
    color: #ffffff;
    width: 300px;
    font-family: Arial;
}


.time-frame > div {
    width: 100%;
    text-align: center;
}


#date-part {
    font-size: 1.2em;
}
#time-part {
    font-size: 2em;
}



jquery, and:
Code:

$(document).ready(function() {
    var interval = setInterval(function() {
        var momentNow = moment();
        $('#date-part').html(momentNow.format('YYYY MMMM DD') + ' '
                            + momentNow.format('dddd')
                             .substring(0,3).toUpperCase());
        $('#time-part').html(momentNow.format('A hh:mm:ss'));
    }, 100);
    
    $('#stop-interval').on('click', function() {
        clearInterval(interval);
    });
});

sample:
www.lightlong.com