Ember-Model with custom serializer

I have a project that uses Ember-Model. I cannot get the custom attributes I defined for a model to work. How can I access the date and time properties from the custom DateTime attribute I have made? This custom attribute is used on the active_date property used in the Model.

Here's a Fiddle to my code: http://ift.tt/1MVqhrM

Please don't just suggest I use Ember-Data. Ember-Model is already in place and I just want to understand what the Custom Attributes do, and how to use them.

Here's my JavaScript:

App = Ember.Application.create();

var DateTime = {
    dateStr: '',
    timeStr: '',

    serialize: function(string) {
        var pieces = string.split('T');

        this.dateStr = pieces[0];
        this.hours   = pieces[1].replace('Z','').split(':')[0];
        this.minutes = pieces[1].replace('Z','').split(':')[1];

        return {
            date: this.dateStr,
            time: this.hours + ':' + this.minutes
        };
    },

    deserialize: function(string) {
        return this.dateStr + 'T' + this.hours + ':' + this.minutes + 'Z';
    }
};

App.TheModel = Ember.Model.extend({
    name: Ember.attr(),
    date: Ember.attr(DateTime)
});

/*** MOCK SERVER DATA ***/
var JSON_DATA = {
    "name": "John",
    "active_date": "2015-01-22T01:30Z"
};        

App.Router.map(function() {
    this.resource('index', {path: '/'});
});

App.IndexRoute = Ember.Route.extend({
    model: function() {
        return App.TheModel.create(JSON_DATA);
    }
});

Here's my template:

<script type="text/x-handlebars">
    {{outlet}}
</script>

<script type="text/x-handlebars" id="index">
    <h1>Index Template!!!{{active_date}}</h1>
    <p>name = {{name}}</p>
    <p>active_date = {{active_date}}</p>
    <p>active_date.date = {{active_date.date}}</p>
    <p>active_date.time = {{active_date.time}}</p>    
</script>