Problem DateBox [closed]

asked 2017-04-11 09:38:54 +0800

wigberto
52 ● 4

Hello. Looking how to display a calendar month and year, i found an example, but i can't update the data of datebox and i can't recover the month/year selected, always shows the current month/year. What could be the problem? Thank you.

<script><![CDATA[
    zk.afterLoad("zul.db", function () {
        // Datebox Calendar Renderer
        var _Cwgt = {};
        zk.override(zul.db.CalendarPop.prototype, _Cwgt, {
            // switch the view after redraw or open as needed
            redraw: function (out) {
                _Cwgt.redraw.apply(this, arguments); //call the original method
                this._customChangeView ();
            },
            open: function (silent) {
                _Cwgt.open.apply(this, arguments); //call the original method
                this._customChangeView ();
            },
            _customChangeView: function () {
                // cannot show month/day
                if (jq(this.parent.$n()).hasClass('datebox-year-only')) {
                    var view = this._view;
                    // switch to year view as needed
                    if (view == 'month' || view == 'day')
                        this._setView("year");
                } else if (jq(this.parent.$n()).hasClass('datebox-month-only')) {
                    // cannot show day view
                    // switch to month view as needed
                    if (this._view == 'day')
                        this._setView("month");
                }
            },
            // customize the chooseDate function
            _chooseDate: function (target, val) {
                var view = this._view;
                if (jq(this.parent.$n()).hasClass('datebox-month-only')
                    || jq(this.parent.$n()).hasClass('datebox-year-only')) {
                    // do customize chooseDate if the parent (datebox)
                    // has specific class
                    var date = this.getTime(),
                        year = (view == 'decade' || view == 'year')? val : date.getFullYear(),
                        month = view == 'month'? val : 0,
                        date = 1;
                    // set date value
                    this._setTime(year, month, 1);
                    if (view == 'decade') {
                        // switch to year view if at decade view
                        this._setView("year");
                    } else if (jq(this.parent.$n()).hasClass('datebox-month-only')
                        && view == 'year') {
                        // switch to month view if at year view and the month view is allowed
                        this._setView("month");
                    } else if (jq(this.parent.$n()).hasClass('datebox-month-only') && view == 'month'
                        || jq(this.parent.$n()).hasClass('datebox-year-only') && view == 'year') {
                        // close calendar and update value if already at the smallest allowed view
                        this.close();
                        this.parent.updateChange_();
                    }
                } else {
                    _Cwgt._chooseDate.apply(this, arguments); //call the original method
                }
            }
        });
    });
]]></script>

     <hbox>
                    <datebox id="dateInvoices" cols="2" 
                        sclass="datebox-month-only" format="MM/yy" constraint="no future"
                        value="@bind(vm.selectedDate)" 
                        onChange="Date date = self.getValue();">
                    </datebox>       
    </hbox>