Click here to Skip to main content
15,879,535 members
Articles / Programming Languages / Javascript

VisualJS.NET custom control development

Rate me:
Please Sign up or sign in to vote.
5.00/5 (2 votes)
14 Nov 2012CPOL4 min read 16.5K   197   13  
How to use custom JavaScript controls under VisualJS.NET.
VSJS_DateTimePicker.prototype = new VSJS_CBase();

function VSJS_DateTimePicker(_name) {
    VSJS_CBase.call(this);
    var _this = this;
    _this.CID = "DateTimePicker";
    _this.InitializeLayer(_name, "TEXT", false);
    _this.input = _this.GetInputElement();
    _this.input.className = "VSJS_DateTimePicker";
    var layer = _this.GetLayerElement();
    VSJS_MaskedTextBox.MaskBinder(_this);

    _this.minDate = new Date(1900, 1, 1);
    _this.maxDate = new Date(3000, 12, 31);
    _this.local = "EnglishUS";
    _this.format = "mm/dd/yy";
    _this.fakeInput = document.createElement("INPUT");
    _this.fakeInput.type = "TEXT";
    layer.appendChild(_this.fakeInput);
    _this.fakeInput.style.cssText = "position:absolute;top:-10000px;";
    _this.input.style.margin = "0px";
    _this.input.style.padding = "1px";

    _this.Value = function () {
        var a = $(_this.input).datepicker('getDate');
        return a.getDate() + '|' + (a.getMonth() + 1) + '|' + a.getFullYear();
    };

    _this.OnRenderCompleted = function () {
        var txt = _this.Text();
        $(_this.input).datepicker({
            beforeShow: function (ipt, inst) {
                setTimeout(function () {
                    _this.widget.css("zIndex", VSJS_Form.zIndex + 100);
                }, 150);
            },
            onClose: function (a, b) {
                if (!JTool.Touch) {
                    setTimeout(function () {
                        _this.fakeInput.focus();
                    }, 120);
                };
            },
            onSelect: function (dateText, inst) {
                _this.OnChanged(_this.Name, null);
            },
            minDate: _this.minDate, maxDate: _this.maxDate, showOn: 'focus', changeMonth: true, changeYear: true
        });
        $(_this.input).datepicker('option', $.datepicker.regional[_this.local]);
        $(_this.input).datepicker('option', { dateFormat: _this.format });
        _this.widget = $(_this.input).datepicker('widget');
        _this.widget.css("fontSize", _this.FontSize() + "px");
        _this.Text(txt);
        _this.Mask();
        _this.stChangedIndex = _this._Form.InnerStatusChanged.push(_this.StChanged) - 1;
    };

    _this.OnFontSizeChanged = function (_size) {
        if (_this._Rendered) {
            _this.widget.css("fontSize", _size + "px");
        };
    };

    _this.bdDiff = -1;
    _this.borderStyle = LayerBase.Border.Fixed3D;
    var _i = _this.input;
    _this.OnSizeChanged = function (w, h) {
        if (w <= 1 || h <= 1) {
            return;
        };
        if (_this.bdDiff == -1) {
            _this.bdDiff = 4;
        };
        _i.style.width = w - _this.bdDiff + "px";
        _i.style.height = h - _this.bdDiff + "px";
    };

    _this.BorderStyleUpdated = function (s) {
        var oldBd = _this.bdDiff;
        switch (s) {
            case LayerBase.Border.None:
                _this.bdDiff = 0;
                _i.style.boxShadow = "none";
                break;
            case LayerBase.Border.FixedSingle:
            case LayerBase.Border.Fixed3D:
                _this.bdDiff = 4;
                _i.style.boxShadow = "";
                break;
            default:
                _this.bdDiff = 4;
                _i.style.boxShadow = "";
        };
        if (oldBd == -1) {
            oldBd = _this.bdDiff;
        };
        var sz = _this.Size();
        var d = oldBd - _this.bdDiff;
        _this.OnSizeChanged(sz.w - d, sz.h - d);
    };

    _this.OnControlRemoved = function () {
        _this.Hide(); 
        if (_this.stChangedIndex != null) {
            _this._Form.InnerStatusChanged[_this.stChangedIndex] = null; 
        };
    };

    _this.StChanged = function (name, sta) {
        _this.Hide();
    };
}; 

VSJS_DateTimePicker.prototype.GetDate = function () {
    if (this._Rendered) {
        return $(this.input).datepicker("getDate");
    };
    return null;
};

VSJS_DateTimePicker.prototype.Hide = function () {
    if (this._Rendered) {
        $(this.input).datepicker("hide");
    };
};

VSJS_DateTimePicker.prototype.MaxDate = function (_y, _m, _d) {
    this.maxDate = new Date(_y, _m, _d);
    if (this._Rendered) {
        $(this.input).datepicker("destroy");
        this.OnRenderCompleted();
    };
};

VSJS_DateTimePicker.prototype.MinDate = function (_y, _m, _d) {
    this.minDate = new Date(_y, _m, _d);
    if (this._Rendered) {
        $(this.input).datepicker("destroy");
        this.OnRenderCompleted();
    };
};

VSJS_DateTimePicker.prototype.Localization = function (_fg) {
    var _this = this;
    _this.local = _fg;
    if (_this._Rendered) {
        $(_this.input).datepicker('option', $.datepicker.regional[_this.local]);
    };
};
VSJS_DateTimePicker.prototype.Format = function (_fg) {
    var _this = this;
    _this.format = _fg;
    if (_this._Rendered) {
        $(_this.input).datepicker('option', { dateFormat: _fg });
    };
};

VSJS_DateTimePicker.prototype.Enabled = function (_en) {
    var _this = this;
    if (_en == null) {
        return !_this._Disabled;
    };
    if (_this._Disabled == !_en) {
        return;
    };
    _this._Disabled = !_en;
    if (!_en) {
        if (_this._Rendered) {
            $(_this.input).datepicker("disable");
        };
        _this._oldBackColor = _this.Style.backgroundColor;
        _this._oldColor = _this.Style.color;

        _this.Style.color = "#aaa";
        _this.GetInputElement().disabled = true;
    }
    else {
        if (_this._Rendered) {
            $(_this.input).datepicker("enable");
        };
        _this.Style.color = _this._oldColor;
        _this.GetInputElement().disabled = false;
    };
};

jQuery(function ($) {
    $.datepicker.regional['Turkish'] = {
        closeText: 'kapat',
        prevText: '&#x3c;geri',
        nextText: 'ileri&#x3e',
        currentText: 'bugün',
        monthNames: ['Ocak', 'Şubat', 'Mart', 'Nisan', 'Mayıs', 'Haziran',
		'Temmuz', 'Ağustos', 'Eylül', 'Ekim', 'Kasım', 'Aralık'],
        monthNamesShort: ['Oca', 'Şub', 'Mar', 'Nis', 'May', 'Haz',
		'Tem', 'Ağu', 'Eyl', 'Eki', 'Kas', 'Ara'],
        dayNames: ['Pazar', 'Pazartesi', 'Salı', 'Çarşamba', 'Perşembe', 'Cuma', 'Cumartesi'],
        dayNamesShort: ['Pz', 'Pt', 'Sa', 'Ça', 'Pe', 'Cu', 'Ct'],
        dayNamesMin: ['Pz', 'Pt', 'Sa', 'Ça', 'Pe', 'Cu', 'Ct'],
        weekHeader: 'Hf',
        dateFormat: 'dd.mm.yy',
        firstDay: 1,
        isRTL: false,
        showMonthAfterYear: false,
        yearSuffix: ''
    };
    $.datepicker.setDefaults($.datepicker.regional['Turkish']);
});
jQuery(function ($) {
    $.datepicker.regional['EnglishGB'] = {
        closeText: 'Done',
        prevText: 'Prev',
        nextText: 'Next',
        currentText: 'Today',
        monthNames: ['January', 'February', 'March', 'April', 'May', 'June',
		'July', 'August', 'September', 'October', 'November', 'December'],
        monthNamesShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
		'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
        dayNames: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
        dayNamesShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
        dayNamesMin: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
        weekHeader: 'Wk',
        dateFormat: 'dd/mm/yy',
        firstDay: 1,
        isRTL: false,
        showMonthAfterYear: false,
        yearSuffix: ''
    };
    $.datepicker.setDefaults($.datepicker.regional['EnglishGB']);
});
jQuery(function ($) {
    $.datepicker.regional['EnglishUS'] = {
        closeText: 'Done',
        prevText: 'Prev',
        nextText: 'Next',
        currentText: 'Today',
        monthNames: ['January', 'February', 'March', 'April', 'May', 'June',
		'July', 'August', 'September', 'October', 'November', 'December'],
        monthNamesShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
		'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
        dayNames: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
        dayNamesShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
        dayNamesMin: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
        weekHeader: 'Wk',
        dateFormat: 'mm/dd/yy',
        firstDay: 1,
        isRTL: false,
        showMonthAfterYear: false,
        yearSuffix: ''
    };
    $.datepicker.setDefaults($.datepicker.regional['EnglishUS']);
});
jQuery(function ($) {
    $.datepicker.regional['German'] = {
        closeText: 'schließen',
        prevText: '&#x3c;zurück',
        nextText: 'Vor&#x3e;',
        currentText: 'heute',
        monthNames: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni',
		'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'],
        monthNamesShort: ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun',
		'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'],
        dayNames: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
        dayNamesShort: ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'],
        dayNamesMin: ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'],
        weekHeader: 'Wo',
        dateFormat: 'dd.mm.yy',
        firstDay: 1,
        isRTL: false,
        showMonthAfterYear: false,
        yearSuffix: ''
    };
    $.datepicker.setDefaults($.datepicker.regional['German']);
});
jQuery(function ($) {
    $.datepicker.regional['French'] = {
        closeText: 'Fermer',
        prevText: '&#x3c;Préc',
        nextText: 'Suiv&#x3e;',
        currentText: 'Courant',
        monthNames: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin',
		'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
        monthNamesShort: ['Jan', 'Fév', 'Mar', 'Avr', 'Mai', 'Jun',
		'Jul', 'Aoû', 'Sep', 'Oct', 'Nov', 'Déc'],
        dayNames: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'],
        dayNamesShort: ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'],
        dayNamesMin: ['Di', 'Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa'],
        weekHeader: 'Sm',
        dateFormat: 'dd/mm/yy',
        firstDay: 1,
        isRTL: false,
        showMonthAfterYear: false,
        yearSuffix: ''
    };
    $.datepicker.setDefaults($.datepicker.regional['French']);
});
jQuery(function ($) {
    $.datepicker.regional['Spanish'] = {
        closeText: 'Cerrar',
        prevText: '&#x3c;Ant',
        nextText: 'Sig&#x3e;',
        currentText: 'Hoy',
        monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio',
		'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
        monthNamesShort: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun',
		'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'],
        dayNames: ['Domingo', 'Lunes', 'Martes', 'Mi&eacute;rcoles', 'Jueves', 'Viernes', 'S&aacute;bado'],
        dayNamesShort: ['Dom', 'Lun', 'Mar', 'Mi&eacute;', 'Juv', 'Vie', 'S&aacute;b'],
        dayNamesMin: ['Do', 'Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'S&aacute;'],
        weekHeader: 'Sm',
        dateFormat: 'dd/mm/yy',
        firstDay: 1,
        isRTL: false,
        showMonthAfterYear: false,
        yearSuffix: ''
    };
    $.datepicker.setDefaults($.datepicker.regional['Spanish']);
});
jQuery(function ($) {
    $.datepicker.regional['Russian'] = {
        closeText: 'Закрыть',
        prevText: '&#x3c;Пред',
        nextText: 'След&#x3e;',
        currentText: 'Сегодня',
        monthNames: ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь',
		'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'],
        monthNamesShort: ['Янв', 'Фев', 'Мар', 'Апр', 'Май', 'Июн',
		'Июл', 'Авг', 'Сен', 'Окт', 'Ноя', 'Дек'],
        dayNames: ['воскресенье', 'понедельник', 'вторник', 'среда', 'четверг', 'пятница', 'суббота'],
        dayNamesShort: ['вск', 'пнд', 'втр', 'срд', 'чтв', 'птн', 'сбт'],
        dayNamesMin: ['Вс', 'Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб'],
        weekHeader: 'Не',
        dateFormat: 'dd.mm.yy',
        firstDay: 1,
        isRTL: false,
        showMonthAfterYear: false,
        yearSuffix: ''
    };
    $.datepicker.setDefaults($.datepicker.regional['Russian']);
});
jQuery(function ($) {
    $.datepicker.regional['Chinese'] = {
        closeText: '关闭',
        prevText: '&#x3c;上月',
        nextText: '下月&#x3e;',
        currentText: '今天',
        monthNames: ['一月', '二月', '三月', '四月', '五月', '六月',
		'七月', '八月', '九月', '十月', '十一月', '十二月'],
        monthNamesShort: ['一', '二', '三', '四', '五', '六',
		'七', '八', '九', '十', '十一', '十二'],
        dayNames: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
        dayNamesShort: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
        dayNamesMin: ['日', '一', '二', '三', '四', '五', '六'],
        weekHeader: '周',
        dateFormat: 'yy-mm-dd',
        firstDay: 1,
        isRTL: false,
        showMonthAfterYear: true,
        yearSuffix: '年'
    };
    $.datepicker.setDefaults($.datepicker.regional['Chinese']);
});
jQuery(function ($) {
    $.datepicker.regional['ar'] = {
        closeText: 'إغلاق',
        prevText: '&#x3c;السابق',
        nextText: 'التالي&#x3e;',
        currentText: 'اليوم',
        monthNames: ['كانون الثاني', 'شباط', 'آذار', 'نيسان', 'آذار', 'حزيران',
		'تموز', 'آب', 'أيلول', 'تشرين الأول', 'تشرين الثاني', 'كانون الأول'],
        monthNamesShort: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
        dayNames: ['السبت', 'الأحد', 'الاثنين', 'الثلاثاء', 'الأربعاء', 'الخميس', 'الجمعة'],
        dayNamesShort: ['سبت', 'أحد', 'اثنين', 'ثلاثاء', 'أربعاء', 'خميس', 'جمعة'],
        dayNamesMin: ['سبت', 'أحد', 'اثنين', 'ثلاثاء', 'أربعاء', 'خميس', 'جمعة'],
        weekHeader: 'أسبوع',
        dateFormat: 'dd/mm/yy',
        firstDay: 0,
        isRTL: true,
        showMonthAfterYear: false,
        yearSuffix: ''
    };
    $.datepicker.setDefaults($.datepicker.regional['Arabic']);
});
jQuery(function ($) {
    $.datepicker.regional['Italian'] = {
        closeText: 'Chiudi',
        prevText: '&#x3c;Prec',
        nextText: 'Succ&#x3e;',
        currentText: 'Oggi',
        monthNames: ['Gennaio', 'Febbraio', 'Marzo', 'Aprile', 'Maggio', 'Giugno',
			'Luglio', 'Agosto', 'Settembre', 'Ottobre', 'Novembre', 'Dicembre'],
        monthNamesShort: ['Gen', 'Feb', 'Mar', 'Apr', 'Mag', 'Giu',
			'Lug', 'Ago', 'Set', 'Ott', 'Nov', 'Dic'],
        dayNames: ['Domenica', 'Luned&#236', 'Marted&#236', 'Mercoled&#236', 'Gioved&#236', 'Venerd&#236', 'Sabato'],
        dayNamesShort: ['Dom', 'Lun', 'Mar', 'Mer', 'Gio', 'Ven', 'Sab'],
        dayNamesMin: ['Do', 'Lu', 'Ma', 'Me', 'Gi', 'Ve', 'Sa'],
        weekHeader: 'Sm',
        dateFormat: 'dd/mm/yy',
        firstDay: 1,
        isRTL: false,
        showMonthAfterYear: false,
        yearSuffix: ''
    };
    $.datepicker.setDefaults($.datepicker.regional['Italian']);
});

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Poland Poland
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions