Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
Is there any way to have a new Calendar instance appear in a quasi "zoomed out" state, meaning not showing a single month (by default the current month with the current date selected), but rather the decade selector that you get to by repeatedly clicking on the top navigation element?
It would be a great feature if a user has to enter a date, for instance hi/her date of birth, from scratch. Currently selecting a date in the 20th century, so basically the date of birth of anybody who'll be reading this, requires no less than 7 clicks:
Current month
1st click
Current decade
2nd click
21st century
3rd click (left arrow)
20th century
4th click
Required decade
5th click
Required year
6th click
Required month
7th click
Finally the desired date
It would be great if one could start with a clean slate and no date value set at a specifiable "zoom level", say
new Calendar(Calendar.CENTURY, 1900); new Calendar(Calendar.DECADE, 1970); new Calendar(Calendar.YEAR, 2011);
to instantiate a calendar displaying 10 (or even 12) decades following the year 1900, the 1970s or the 12 months of 2011 respectively.
Just to clarify, I do not mean an entirely new component that returns only an integer value for year, decade or century, but merely a way to tell a Calendar at which level to begin the selection, still resulting in a full Date value (but returning null until a selection has been made).
hi Andiklein,
you can post feature request at Feature Request Tracker as need,
and below is a simple sample,
override some stuff to reach your goal as possible,
** notice: it is not well tested, be careful while use it.
<zk xmlns:w="http://www.zkoss.org/2005/zk/client">
<zscript>
class customCalendar extends org.zkoss.zul.Calendar {
private boolean setToNull;
public void setValue(Date value) {
System.out.println(" value == null? " + (value == null));
if (value == null) {
setToNull = true;
}
else
setToNull = false;
super.setValue(value);
}
public Date getValue() {
System.out.println(" is set to null? " + setToNull);
return setToNull? null : super.getValue();
}
//-- ComponentCtrl --//
public void service(org.zkoss.zk.au.AuRequest request, boolean everError) {
final String cmd = request.getCommand();
if (cmd.equals(Events.ON_CHANGE)) {
final Map data = request.getData();
final Object value = data.get("value");
if (org.zkoss.lang.Objects.equals(getValue(), value))
return; //nothing happen
setValue((Date)value);
final InputEvent evt = new InputEvent(cmd, this,
getDateFormat().format(value), value,
org.zkoss.zk.au.AuRequests.getBoolean(data, "bySelectBack"),
org.zkoss.zk.au.AuRequests.getInt(data, "start", 0));
Events.postEvent(evt);
} else {
super.service(request, everError);
}
}
}
page.getComponentDefinition("calendar", true).setImplementationClass(customCalendar.class);
</zscript>
<hlayout>
<calendar id="cal" onChange="in.value = cal.value" onCreate="cal.value = null">
<attribute w:name="bind_">
function () {
this.$bind_(); //call the original method
if (!window.inited) {
window.inited = true;
this._setView("decade");
}
}
</attribute>
<attribute w:name="_chooseDate">
function (target, val) {
if (target && !jq(target).hasClass(this.getZclass() + '-disd')) {
var cell = target,
dateobj = this.getTime();
switch(this._view) {
case "day" :
var oldTime = this.getTime();
this._setTime(null, cell._monofs != null && cell._monofs != 0 ?
dateobj.getMonth() + cell._monofs : null, val);
var newTime = this.getTime();
if (oldTime.getYear() == newTime.getYear() &&
oldTime.getMonth() == newTime.getMonth()) {
this._markCal();
} else
this.rerender();
break;
case "month" :
this._setTime(null, val, null, null, null, true);
this._setView("day");
break;
case "year" :
this._setTime(val, null, null, null, null, true);
this._setView("month");
break;
case "decade" :
this._setTime(val, null, null, null, null, true);
this._setView("year");
//break;
}
}
}
</attribute>
<attribute w:name="_setTime">
function (y, m, d, hr, mi, noupdate) {
var dateobj = this.getTime(),
year = y != null ? y : dateobj.getFullYear(),
month = m != null ? m : dateobj.getMonth(),
day = d != null ? d : dateobj.getDate();
_newDate = function (year, month, day, bFix) {
var v = new Date(year, month, day);
return bFix && v.getMonth() != month ?
new Date(year, month + 1, 0)/*last day of month*/: v;
}
this._value = _newDate(year, month, day, d == null);
if (noupdate) return;
this.fire('onChange', {value: this._value});
}
</attribute>
</calendar>
<datebox id="in" onChange="cal.value = in.value"/>
</hlayout>
</zk>
Hi Andiklein:
I am sorry for the mistake that "& a m p ;" (without space) is automatically transfered to "&" in page,,
the working sample is at calendar-with-initial-decade-mode
Asked: 2011-07-12 10:06:00 +0800
Seen: 3,943 times
Last updated: Jul 21 '11