Date Mask Plug In

by grippstick

HTML

<link rel="stylesheet" href="http://babackofficedev.radolo.com/kendo/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://babackofficedev.radolo.com/Kendo/Styles/kendo.flat.min.css">
<script src="http://babackofficedev.radolo.com/Kendo/js/jquery.min.js"></script>
<script src="http://babackofficedev.radolo.com/Kendo/js/kendo.all.min.js"></script>
<div id='container'>
    <input data-role='datemask' data-area-class='fred' data-bind='value:dateValue,events:{change:change,keypress:keypress}' /> <span data-bind='text:dateValue'></span>

</div>

JavaScript

(function ($, undefined) {
    var kendo = window.kendo,
        ui = kendo.ui,
        Widget = ui.Widget,
        ns = ".radoloDateMask",
        NULL = null,
        CHANGE = "change",
        KEYPRESS = "keypress",
        proxy = $.proxy;

    var DateMask = Widget.extend({
        //I know I need to register events, but what events and why is not documented anywhere
        //maybe kendo can get us some documentation on how this is working
        events: [CHANGE],
        options: {
            name: "DateMask"
        },
        init: function (element, options) {
            var that = this;
            that._initializing = true;

            Widget.fn.init.call(that, element, options);

            element = that.element;
            options = that.options;

            element.on(CHANGE + ns, proxy(that._change, that))
                .on(KEYPRESS + ns, proxy(that._keypress, that))
                .insertBefore(element);

            //set any default that may have been added manually to the input box
            //do not raise the change event since this value is only used if we are using mvvm
            that.value(element.val());

            //notify that... i have no idea what this does...thanks for the documentation kendo :(
            kendo.notify(that);
            that._initializing = false;
        },
        value: function (value) {
            var that = this;

            if (value === undefined) {
                //we need to return our current value                
                var val = that.element.val();

                //we will return an empty string if the value is not a valid date
                if (that.isValidDate(val)) {
                    return val;
                } else {
                    return "";
                }
            }

            //if we made it to here then we are trying to set a value
            //check to see if it has changed
            if (that.element.val() !== value) {
                //it...