Board Logo

Adding reset field button
frankenbike - 11/2/2007 at 02:56 PM

Hi,

I have my calendar working without problems but I would like to make the field that the calendar inputs into read only. To do this I need to include an extra button onto the bottom of the calendar pop up that will clear the field of data.

Basically the end purpose is to have the ability to clear the field and enter the data using only a mouse and no keyboard.

Thanks in advance


HansH - 1/22/2009 at 09:31 PM

Quote:
Originally posted by frankenbike
Hi,

I have my calendar working without problems but I would like to make the field that the calendar inputs into read only. To do this I need to include an extra button onto the bottom of the calendar pop up that will clear the field of data.

Basically the end purpose is to have the ability to clear the field and enter the data using only a mouse and no keyboard.

Thanks in advance


I had the same problem, used a readonly field with tigra calender and no option to clear the field.
So I adapted the source:

Code:

$ diff -u calendar_eu.js calendar_new.js
--- calendar_eu.js 2009-01-22 20:25:45.000353000 +0100
+++ calendar_new.js 2009-01-22 20:26:03.000117000 +0100
@@ -6,6 +6,7 @@
var A_TCALDEF = {
'months' : ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October','November', 'December'],
'weekdays' : ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
+ 'clearfld': true, // show clearfield image
'yearscroll': true, // show year scroller
'weekstart': 1, // first day of week: 0-Su or 1-Mo
'centyear' : 70, // 2 digit years less than 'centyear' are in 20xx, othewise in 19xx.
@@ -61,6 +62,7 @@
this.f_show = f_tcalShow;
this.f_hide = f_tcalHide;
this.f_toggle = f_tcalToggle;
+ this.f_clear = f_tcalClear;
this.f_update = f_tcalUpdate;
this.f_relDate = f_tcalRelDate;
this.f_parseDate = f_tcalParseDate;
@@ -137,6 +139,11 @@
this.b_visible = true;
}

+function f_tcalClear () {
+ this.e_input.value = '';
+ this.f_hide('');
+}
+
function f_tcalHide (n_date) {
if (n_date)
this.e_input.value = this.f_generDate(new Date(n_date));
@@ -159,6 +166,7 @@
this.b_visible = false;
}

+
function f_tcalToggle () {
return this.b_visible ? this.f_hide() : this.f_show();
}
@@ -195,6 +203,7 @@
d_firstday.setDate(1 - (7 + d_firstday.getDay() - this.a_tpl.weekstart) % 7);

var a_class, s_html = '<table class="ctrl"><tbody><tr>'
+ + (this.a_tpl.clearfld ? '<td onclick="A_TCALS['' + this.s_id + ''].f_clear()" title="Clear field"><img src="' + this.a_tpl.imgpath + 'clr.gif" /></td>' : '')
+ (this.a_tpl.yearscroll ? '<td' + this.f_relDate(d_date, -1, 'y') + ' title="Previous Year"><img src="' + this.a_tpl.imgpath + 'prev_year.gif" /></td>' : '')
+ '<td' + this.f_relDate(d_date, -1) + ' title="Previous Month"><img src="' + this.a_tpl.imgpath + 'prev_mon.gif" /></td><th>'
+ this.a_tpl.months[d_date.getMonth()] + ' ' + d_date.getFullYear()


So in short:
- added 8 lines (lines with + on first position)
- added config option 'clearfld' : true or false

If you set it to true it adds a clr.gif image before the previous year image
( I added a small 7x8 image in the image directory)

If you click on it, it will clear the input field and exit the popup.

Have fun with it and thanks for Tigra calender, a really nice and simple calender....

Hans

link to my (very small) clr.gif : http://img265.imageshack.us/img265/7876/clrke9.gif


Softcomplex: http://www.softcomplex.com/
Back to forum: http://www.softcomplex.com/forum/