ZK - Open Source Ajax Java Framework
|
Calendar component
Hi goggy,
Please refer to the sample below:
for Calendar:
index.zul
<zk>
<script type="text/javascript"><![CDATA[
zk.afterLoad("zul.db", function () {
// store the old methods
var oldClickDate = zul.db.Calendar.prototype._clickDate,
oldBind = zul.db.Calendar.prototype.bind_;
zul.db.Calendar.prototype._clickDate = function (evt) {
var $target = jq(evt.domTarget),
isDate = $target.hasClass('z-calendar-wkday') || $target.hasClass('z-calendar-wkend');// run original _clickDate
oldClickDate.apply(this, arguments);
if (isDate)
this._selectedValue = this._value;
};
zul.db.Calendar.prototype.bind_ = function () {
oldBind.apply(this, arguments);
if (this._selectedValue) {
this.fire('onChange', {value: this._selectedValue, shallClose: false});
}
}
});
]]></script>
<calendar id="cal" />
<button label="show date" onClick="lb.setValue(cal.getValue().toString());" />
<label id="lb" />
</zk>
for Datebox:
index.zul
<zk>
<script type="text/javascript"><![CDATA[
zk.afterLoad("zul.db", function () {
// store the old methods
var oldClickDate = zul.db.CalendarPop.prototype._clickDate,
oldShiftDate = zul.db.CalendarPop.prototype._shiftDate,
oldOpen = zul.db.CalendarPop.prototype.open;
zul.db.CalendarPop.prototype._clickDate = function (evt) {
var $target = jq(evt.domTarget),
isDate = $target.hasClass('z-calendar-wkday') || $target.hasClass('z-calendar-wkend');
if (isDate)
this.parent._oldTextTmp = null;
// run original _clickDate
oldClickDate.apply(this, arguments);
if (isDate)
this.parent._oldTextTmp = this.parent.$n('real').value;
this.parent._viewValueTmp = this.parent.coerceToString_(this._value, true);
};
zul.db.CalendarPop.prototype._shiftDate = function (opt, ofs) {
// run original _shiftDate
oldShiftDate.apply(this, arguments);
this.parent._viewValueTmp = this.parent.coerceToString_(this._value, true);
};
zul.db.CalendarPop.prototype.open = function(silent) {
var db = this.parent,
inp = db.getInputNode(),
inpTmp = inp.value;
inp.value = db._viewValueTmp? db._viewValueTmp : inp.value;
// run original open
oldOpen.apply(this, arguments);
inp.value = inpTmp;
};
zul.db.Datebox.prototype.coerceToString_ = function (val, ignoreOld) {
if (this._oldTextTmp && !ignoreOld)
return this._oldTextTmp;
return val ? new zk.fmt.Calendar().formatDate(val, this.getFormat(), this._localizedSymbols) : '';
};
});
]]></script>
<datebox id="dbx" />
<button label="show date" onClick="lb.setValue(dbx.getValue().toString());" />
<label id="lb" />
</zk>
Regards,
ben
I think this will do the trick. No way i would figure this out myself :)
Thanks.
Regards
Found another problem...
As I said in my first post, I limited the selectable dates in my calendar component. On my page I have multiple tabs, and this limitation of date selection is only required on my first tab. On all other tabs all dates must be selectable. My JavaScript code applys to all calendar components on my page. Is it posible to only apply it on one specific calendar component?
Regards
For override specific datebox by id, please refer to the sample:
index.zul
<zk>
<script type="text/javascript"><![CDATA[
function overrideDbx(id) {
var dbx = zk.Widget.$(jq('$'+id)),
pop = dbx._pop;
// store the old methods
var oldClickDate = dbx._pop._clickDate,
oldShiftDate = dbx._pop._shiftDate,
oldOpen = dbx._pop.open;
pop._clickDate = function (evt) {
var $target = jq(evt.domTarget),
isDate = $target.hasClass('z-calendar-wkday') || $target.hasClass('z-calendar-wkend');
if (isDate)
pop.parent._oldTextTmp = null;
// run original _clickDate
oldClickDate.apply(pop, arguments);
if (isDate)
pop.parent._oldTextTmp = pop.parent.$n('real').value;
pop.parent._viewValueTmp = pop.parent.coerceToString_(pop._value, true);
};
pop._shiftDate = function (opt, ofs) {
// run original _shiftDate
oldShiftDate.apply(pop, arguments);
pop.parent._viewValueTmp = pop.parent.coerceToString_(pop._value, true);
};
pop.open = function(silent) {
var db = pop.parent,
inp = db.getInputNode(),
inpTmp = inp.value;
inp.value = db._viewValueTmp? db._viewValueTmp : inp.value;
// run original open
oldOpen.apply(pop, arguments);
inp.value = inpTmp;
};
dbx.coerceToString_ = function (val, ignoreOld) {
if (dbx._oldTextTmp && !ignoreOld)
return dbx._oldTextTmp;
return val ? new zk.fmt.Calendar().formatDate(val, dbx.getFormat(), dbx._localizedSymbols) : '';
};
}
]]></script>
<datebox id="dbx">
<attribute name="onCreate">
Clients.evalJavaScript("overrideDbx('dbx');");
</attribute>
</datebox>
<datebox id="dbx2" />
<button label="show date" onClick="lb.setValue(dbx.getValue().toString());" />
<label id="lb" />
</zk>
Regards,
Ben
I've got a constraint on my calendar component that only the next 12 working days (from current date) can be selected. I accomplished this with javascript:
zul.db.Renderer.disabled = function(cal, y, m, d, today) { ... }Now this is working if you stay on the same month-page. But if you move through months, the originally selected date changes.
For example:
Today I can select (are enabled to select) the next 12 woking days. And I select (for example) 10.2.2012. To this point everything is fine. But if you change the month on the component, you can't actually change the date with the mouse click, but the previous selection, simply stays and only changes the month to 10.3.2012.
Is there a way to keep the selection on the originaly selected date and not being affected by month/year change (maybe a similar JS function is available: zul.db.Renderer.selected = ...).
I hope the explanation was clear enough.
Regards