<bindings xmlns="http://www.mozilla.org/xbl"
xmlns:xbl="http://www.mozilla.org/xbl"
xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<binding id="time">
<content>
<xul:textbox xbl:inherits="value,readonly" anonid="time"/>
<!-- **** DELETE MENU LABEL IF YOU HAVE AN IMAGE -->
<xul:menu class="timepicker-popup" label="Time Picker">
<xul:menupopup xpopupanchor="bottomleft" xpopupalign="topright">
<xul:timepicker xbl:inherits="value"/>
</xul:menupopup>
</xul:menu>
</content>
<implementation>
<constructor><![CDATA[
this.time = document.getAnonymousElementByAttribute(this, "anonid", "time");
]]></constructor>
<property name="value"
onget="return this.time.value;"
onset="this.time.value = val; return val;"/>
</implementation>
</binding>
<binding id="date">
<content>
<xul:textbox xbl:inherits="value,readonly" anonid="date" flex="0"/>
<!-- **** DELETE MENU LABEL IF YOU HAVE AN IMAGE -->
<xul:menu class="datepicker-popup" label="Date Picker">
<xul:menupopup>
<xul:datepicker xbl:inherits="value"/>
</xul:menupopup>
</xul:menu>
</content>
<implementation>
<constructor><![CDATA[
this.date = document.getAnonymousElementByAttribute(this, "anonid", "date");
if (this.value=='0000-00-00') this.setAttribute('value', '');
]]></constructor>
<property name="value"
onget="return this.date.value;"
onset="this.date.value = val; return val;"/>
</implementation>
</binding>
<binding id="textboxmulti">
<content>
<xul:textbox type="text" anonid="input" multiline="true"
xbl:inherits="flex,rows,cols,wrap,readonly,style"/>
</content>
<implementation>
<constructor><![CDATA[
this.input=document.getAnonymousElementByAttribute(this, "anonid", "input");
if (this.hasAttribute('value'))
this.input.value = this.getAttribute('value');
]]></constructor>
<property name="value" onset="this.input.value=val;"
onget="return this.input.value;"/>
</implementation>
</binding>
<!-- DATE PICKER -->
<binding id="datepicker">
<content>
<xul:vbox class="datepicker-mainbox" flex="1">
<xul:hbox class="datepicker-month-box">
<xul:text class="datepicker-button-month" value="<<" increment="-12"/>
<xul:text class="datepicker-button-month" value="< " increment="-1"/>
<xul:spacer flex="1"/>
<xul:text class="datepicker-month-name" value="Month"/>
<xul:spacer flex="1"/>
<xul:text class="datepicker-button-month" value=">" increment="1"/>
<xul:text class="datepicker-button-month" value=">>" increment="12"/>
</xul:hbox>
<xul:vbox class="datepicker-box" flex="1">
<xul:hbox class="datepicker-row-head" equalsize="always">
<xul:text class="datepicker-header" flex="1" value="M"/>
<xul:text class="datepicker-header" flex="1" value="T"/>
<xul:text class="datepicker-header" flex="1" value="W"/>
<xul:text class="datepicker-header" flex="1" value="T"/>
<xul:text class="datepicker-header" flex="1" value="F"/>
<xul:text class="datepicker-header" flex="1" value="S"/>
<xul:text class="datepicker-header" flex="1" value="S"/>
</xul:hbox>
<xul:hbox class="datepicker-row-body" equalsize="always" flex="1">
<xul:text class="datepicker-day" flex="1"/>
<xul:text class="datepicker-day" flex="1"/>
<xul:text class="datepicker-day" flex="1"/>
<xul:text class="datepicker-day" flex="1"/>
<xul:text class="datepicker-day" flex="1"/>
<xul:text class="datepicker-day" flex="1"/>
<xul:text class="datepicker-day" flex="1"/>
</xul:hbox>
<xul:hbox class="datepicker-row-body" equalsize="always" flex="1">
<xul:text class="datepicker-day" flex="1"/>
<xul:text class="datepicker-day" flex="1"/>
<xul:text class="datepicker-day" flex="1"/>
<xul:text class="datepicker-day" flex="1"/>
<xul:text class="datepicker-day" flex="1"/>
<xul:text class="datepicker-day" flex="1"/>
<xul:text class="datepicker-day" flex="1"/>
</xul:hbox>
<xul:hbox class="datepicker-row-body" equalsize="always" flex="1">
<xul:text class="datepicker-day" flex="1"/>
<xul:text class="datepicker-day" flex="1"/>
<xul:text class="datepicker-day" flex="1"/>
<xul:text class="datepicker-day" flex="1"/>
<xul:text class="datepicker-day" flex="1"/>
<xul:text class="datepicker-day" flex="1"/>
<xul:text class="datepicker-day" flex="1"/>
</xul:hbox>
<xul:hbox class="datepicker-row-body" equalsize="always" flex="1">
<xul:text class="datepicker-day" flex="1"/>
<xul:text class="datepicker-day" flex="1"/>
<xul:text class="datepicker-day" flex="1"/>
<xul:text class="datepicker-day" flex="1"/>
<xul:text class="datepicker-day" flex="1"/>
<xul:text class="datepicker-day" flex="1"/>
<xul:text class="datepicker-day" flex="1"/>
</xul:hbox>
<xul:hbox class="datepicker-row-body" equalsize="always" flex="1">
<xul:text class="datepicker-day" flex="1"/>
<xul:text class="datepicker-day" flex="1"/>
<xul:text class="datepicker-day" flex="1"/>
<xul:text class="datepicker-day" flex="1"/>
<xul:text class="datepicker-day" flex="1"/>
<xul:text class="datepicker-day" flex="1"/>
<xul:text class="datepicker-day" flex="1"/>
</xul:hbox>
<xul:hbox class="datepicker-row-body" equalsize="always" flex="1">
<xul:text class="datepicker-day" flex="1"/>
<xul:text class="datepicker-day" flex="1"/>
<xul:text class="datepicker-day" flex="1"/>
<xul:text class="datepicker-day" flex="1"/>
<xul:text class="datepicker-day" flex="1"/>
<xul:text class="datepicker-day" flex="1"/>
<xul:text class="datepicker-day" flex="1"/>
</xul:hbox>
</xul:vbox>
</xul:vbox>
</content>
<implementation>
<constructor><![CDATA[
var box_month = document.getAnonymousNodes(this)[0].childNodes[0];
this.month_decrement = box_month.childNodes[1];
this.month_decrement.datepicker = this;
this.month_increment = box_month.childNodes[5];
this.month_increment.datepicker = this;
this.year_decrement = box_month.childNodes[0];
this.year_decrement.datepicker = this;
this.year_increment = box_month.childNodes[6];
this.year_increment.datepicker = this;
this.node_month = box_month.childNodes[3];
if (this.value) {
date_array = this.value.split('-');
year = date_array[0];
month = date_array[1]-1;
day = date_array[2];
// if year is zero the use current date as default. date may be set to 0000-00-00 from database.
if (year==0) this.date = new Date();
else this.date = new Date(year, month, day);
//this.date = new Date(year, month, day);
} else {
this.date = new Date();
}
//dump(this.date);
this.showDate(this.date);
]]></constructor>
<property name="value"
onget="return this.getAttribute('value');"
onset="return this.setAttribute('value', val);"/>
<method name="showDate">
<parameter name="some_date"/>
<body><![CDATA[
//dump('showDate - some_date = '+some_date);
this.display_date = some_date;
var a_month = new Date(some_date.toString());
a_month.setDate(1); // first day
var selected_year = this.date.getFullYear();
var selected_month = this.date.getMonth();
var selected_date = this.date.getDate();
// UPDATE THE MONTH
var month = this.getMonthName(a_month) + " " + a_month.getFullYear();
this.node_month.setAttribute("value", month);
var box_datepicker = document.getAnonymousNodes(this)[0].childNodes[1];
var first_weekday = (a_month.getDay() + 6) % 7; // start on monday
var node_date = new Date(a_month.getTime());
node_date.setDate(node_date.getDate()-first_weekday);
for (var k = 1; k < box_datepicker.childNodes.length; k++) {
var row = box_datepicker.childNodes[k];
for (var i = 0; i < 7; i++) {
node_day = row.childNodes[i];
node_day.setAttribute("selected", "false"); // clear old attributes
if (a_month.getMonth() != node_date.getMonth()) {
node_day.setAttribute("othermonth", "true");
} else {
node_day.setAttribute("othermonth", "");
}
// HIGHLIGHT THE SELECTED DATE
if ((selected_year == node_date.getFullYear()) &&
(selected_month == node_date.getMonth()) &&
(selected_date == node_date.getDate())) {
node_day.setAttribute("selected", "true");
}
node_day.date = node_date;
node_day.datepicker = this;
node_day.setAttribute("value", node_date.getDate());
node_date = new Date(node_date.getTime());
node_date.setDate(node_date.getDate() + 1);
}
}
]]></body>
</method>
<method name="monthClicked">
<parameter name="increment"/>
<body><![CDATA[
var month= this.display_date.getMonth()+increment;
this.display_date.setMonth(month);
this.showDate(this.display_date);
]]></body>
</method>
<method name="dayClicked">
<parameter name="some_day"/>
<body><![CDATA[
this.date = some_day.date;
this.value = this.date.getFullYear() + '-' +
(this.date.getMonth() + 1) + '-' +
this.date.getDate();
this.showDate(this.date);
try {
this.parentNode.parentNode.parentNode.value = this.value;
this.parentNode.parentNode.parentNode.setAttribute('value', this.value);
this.parentNode.hidePopup();
} catch(e) {};
//dump(this.value);
]]></body>
</method>
<method name="getMonthName">
<parameter name="a_month"/>
<body><![CDATA[
var monthNames = new Array(12);
monthNames[0] = "January";
monthNames[1] = "February";
monthNames[2] = "March";
monthNames[3] = "April";
monthNames[4] = "May";
monthNames[5] = "June";
monthNames[6] = "July";
monthNames[7] = "August";
monthNames[8] = "September";
monthNames[9] = "October";
monthNames[10] = "November";
monthNames[11] = "December";
var index = a_month.getMonth();
return monthNames[index];
]]></body>
</method>
</implementation>
</binding>
<binding id="datepicker-button-month" inherits="dir">
<handlers>
<handler event="click"><![CDATA[
this.datepicker.monthClicked(parseInt(this.getAttribute('increment')));
]]></handler>
</handlers>
<implementation/>
</binding>
<binding id="datepicker-day" extends="xul:text">
<handlers>
<handler event="click" action="this.datepicker.dayClicked(this)"/>
</handlers>
<implementation/>
</binding>
<!-- TIMEPICKER -->
<binding id="timepicker">
<content>
<xul:vbox>
<xul:hbox equalsize="always" flex="1">
<xul:text class="timepicker-head" value="AM"/>
<xul:text class="timepicker-head" value="PM"/>
<xul:text class="timepicker-head" value="Minute"/>
</xul:hbox>
<xul:hbox class="timepicker-box" flex="1">
<xul:vbox class="timepicker-hour-col" equalsize="always" flex="1">
<xul:text class="timepicker-hour" flex="1" value="00" onclick="clickHour(0);"/>
<xul:text class="timepicker-hour" flex="1" value="01" onclick="clickHour(1);"/>
<xul:text class="timepicker-hour" flex="1" value="02" onclick="clickHour(2);"/>
<xul:text class="timepicker-hour" flex="1" value="03" onclick="clickHour(3);"/>
<xul:text class="timepicker-hour" flex="1" value="04" onclick="clickHour(4);"/>
<xul:text class="timepicker-hour" flex="1" value="05" onclick="clickHour(5);"/>
<xul:text class="timepicker-hour" flex="1" value="06" onclick="clickHour(6);"/>
<xul:text class="timepicker-hour" flex="1" value="07" onclick="clickHour(7);"/>
<xul:text class="timepicker-hour" flex="1" value="08" onclick="clickHour(8);"/>
<xul:text class="timepicker-hour" flex="1" value="09" onclick="clickHour(9);"/>
<xul:text class="timepicker-hour" flex="1" value="10" onclick="clickHour(10);"/>
<xul:text class="timepicker-hour" flex="1" value="11" onclick="clickHour(11);"/>
</xul:vbox>
<xul:vbox class="timepicker-hour-col" equalsize="always" flex="1">
<xul:text class="timepicker-hour" flex="1" value="12" onclick="clickHour(12);"/>
<xul:text class="timepicker-hour" flex="1" value="13" onclick="clickHour(13);"/>
<xul:text class="timepicker-hour" flex="1" value="14" onclick="clickHour(14);"/>
<xul:text class="timepicker-hour" flex="1" value="15" onclick="clickHour(15);"/>
<xul:text class="timepicker-hour" flex="1" value="16" onclick="clickHour(16);"/>
<xul:text class="timepicker-hour" flex="1" value="17" onclick="clickHour(17);"/>
<xul:text class="timepicker-hour" flex="1" value="18" onclick="clickHour(18);"/>
<xul:text class="timepicker-hour" flex="1" value="19" onclick="clickHour(19);"/>
<xul:text class="timepicker-hour" flex="1" value="20" onclick="clickHour(20);"/>
<xul:text class="timepicker-hour" flex="1" value="21" onclick="clickHour(21);"/>
<xul:text class="timepicker-hour" flex="1" value="22" onclick="clickHour(22);"/>
<xul:text class="timepicker-hour" flex="1" value="23" onclick="clickHour(23);"/>
</xul:vbox>
<xul:vbox class="timepicker-minute-col" equalsize="always" flex="1">
<xul:text class="timepicker-minute" flex="1" value=":00" onclick="clickMinute(0);"/>
<xul:text class="timepicker-minute" flex="1" value=":05" onclick="clickMinute(5);"/>
<xul:text class="timepicker-minute" flex="1" value=":10" onclick="clickMinute(10);"/>
<xul:text class="timepicker-minute" flex="1" value=":15" onclick="clickMinute(15);"/>
<xul:text class="timepicker-minute" flex="1" value=":20" onclick="clickMinute(20);"/>
<xul:text class="timepicker-minute" flex="1" value=":25" onclick="clickMinute(25);"/>
<xul:text class="timepicker-minute" flex="1" value=":30" onclick="clickMinute(30);"/>
<xul:text class="timepicker-minute" flex="1" value=":35" onclick="clickMinute(35);"/>
<xul:text class="timepicker-minute" flex="1" value=":40" onclick="clickMinute(40);"/>
<xul:text class="timepicker-minute" flex="1" value=":45" onclick="clickMinute(45);"/>
<xul:text class="timepicker-minute" flex="1" value=":50" onclick="clickMinute(50);"/>
<xul:text class="timepicker-minute" flex="1" value=":55" onclick="clickMinute(55);"/>
</xul:vbox>
</xul:hbox>
</xul:vbox>
</content>
<implementation>
<constructor><![CDATA[
timepicker_box = document.getAnonymousNodes(this)[0].childNodes[1];
this.col_hour_am = timepicker_box.childNodes[0];
this.col_hour_pm = timepicker_box.childNodes[1];
this.col_minute = timepicker_box.childNodes[2];
if (this.value) {
time = this.value.split(':');
hour = time[0];
minute = time[1];
this.selectMinute(minute);
this.selectHour(hour);
}
]]></constructor>
<property name="value"
onget="return this.getAttribute('value');"
onset="return this.setAttribute('value', val);"/>
<method name="selectMinute">
<parameter name="minute"/>
<body><![CDATA[
minute_index = parseInt((minute / 5) + 0.5);
if (this.selected_minute) this.selected_minute.className="timepicker-minute";
this.col_minute.childNodes[minute_index].className = "timepicker-minute-selected";
this.selected_minute = this.col_minute.childNodes[minute_index];
]]></body>
</method>
<method name="selectHour">
<parameter name="hour"/>
<body><![CDATA[
if (this.selected_hour) this.selected_hour.className="timepicker-hour";
if (hour < 12) {
this.col_hour_am.childNodes[hour].className = "timepicker-hour-selected";
this.selected_hour = this.col_hour_am.childNodes[hour];
}
if (hour >= 12) {
this.col_hour_pm.childNodes[hour-12].className = "timepicker-hour-selected";
this.selected_hour = this.col_hour_pm.childNodes[hour-12];
}
]]></body>
</method>
<method name="clickMinute">
<parameter name="minute"/>
<body><![CDATA[
this.selectMinute(minute);
time = this.value.split(':');
hour = (time[0]==undefined || time[0] == '') ? '00' : time[0];
if (minute < 10) minute = '0' + minute;
this.value = hour + ':' + minute;
//dump(this.value);
try {
this.parentNode.parentNode.parentNode.value = this.value;
this.parentNode.parentNode.parentNode.setAttribute('value', this.value);
this.parentNode.hidePopup();
} catch(e) {}
]]></body>
</method>
<method name="clickHour">
<parameter name="hour"/>
<body><![CDATA[
this.selectHour(hour);
var time = this.value.split(':');
minute = (time[1]==undefined) ? '00' : time[1];
if (hour < 10) hour = '0' + hour;
this.value = hour + ':' + minute;
if (this.parentNode.parentNode.parentNode.nodeName=='time')
this.parentNode.parentNode.parentNode.setAttribute('value', this.value);
]]></body>
</method>
</implementation>
</binding>
</bindings>
|
Download
