");
+/// Called when the user clicks on a date in the calendar.
+Calendar.prototype.selectDate = function(year, month, day)
+{
+ var i = this.input;
+ var t = i.value.split(/\s+/, 2)[1]||'';
+ if (t)
+ t = ' '+t;
+ i.value = (this.format == 'Y-m-d' ? year + '-' + month + '-' + day : day + '.' + month + '.' + year) + t;
+ Calendar.hideCalendar();
+};
+
+Calendar.prototype.showMonths = function(year, month)
+{
+ var cur_y = this.today.getFullYear();
+ var cur_m = this.today.getMonth();
+ var sel_m = this.selected.getFullYear() == year ? this.selected.getMonth() : -1;
+ var html = '';
+ html += "
";
+ this.setHTML(html);
+};
+
+Calendar.prototype.showYears = function(year)
+{
+ var beg = year & ~15;
+ var cur_y = this.today.getFullYear();
+ var sel_y = this.selected.getFullYear();
+ var html = '';
+ html += "
";
+ html += "
";
+ html += " ";
+ html += " "+beg+" - "+(beg+15)+"";
+ html += " ";
+ html += "
";
+ html += "
";
+ for (var i = 0; i < 16; i++) {
+ if (i && !(i % 4))
+ html += "
";
+ this.setHTML(html);
+};
+
+/// Creates a calendar with the date given in the argument as the selected date.
+Calendar.prototype.makeCalendar = function(year, month)
+{
+ // Display the table
+ var next_month = month+1;
+ var next_month_year = year;
+ if (next_month >= 12) {
+ next_month = 0;
+ next_month_year++;
+ }
+
+ var previous_month = month-1;
+ var previous_month_year = year;
+ if (previous_month < 0) {
+ previous_month = 11;
+ previous_month_year--;
+ }
+
+ var current_year = this.today.getFullYear();
+
+ var html = '';
+ html += "
");
- this.fin();
- },
+ html += "";
+ }
+ html += "
";
+ html += "
";
+ for (var weekday = 0; weekday < 7; weekday++)
+ html += "
"+this.weekdays[weekday]+"
";
+ html += "
";
- /// Creates a calendar with the date given in the argument as the selected date.
- makeCalendar:function(year, month) {
- // Display the table
- var next_month = month+1;
- var next_month_year = year;
- if (next_month >= 12) {
- next_month = 0;
- next_month_year++;
- }
+ // Get the first day of this month
+ var first_day = new Date(year,month,1);
+ var start_day = (first_day.getDay()+this.sunday)%7;
- var previous_month = month-1;
- var previous_month_year = year;
- if (previous_month < 0) {
- previous_month = 11;
- previous_month_year--;
- }
+ var d = 1;
+ var flag = 0;
- var current_year = this.today.getFullYear();
+ // Leap year support
+ if (!(year % 4) && ((year % 100) || !(year % 400)))
+ this.month_days[1] = 29;
+ else
+ this.month_days[1] = 28;
- this.wrt("
");
+ var days_in_this_month = this.month_days[month];
- // Get the first day of this month
- var first_day = new Date(year,month,1);
- var start_day = (first_day.getDay()+Calendar.sunday)%7;
+ // Create the calendar
+ var yea = this.today.getFullYear();
+ var all_diff = (year - yea) || (month - this.today.getMonth());
+ var sel_day = year == this.selected.getFullYear() && month == this.selected.getMonth() ? this.selected.getDate() : -1;
+ for (var i = 0; i <= 5; i++) {
+ if (w >= days_in_this_month)
+ break;
+ html += "
";
+ for (var j = 0; j < 7; j++) {
+ if (d > days_in_this_month)
+ flag = 0; // If the days has overshooted the number of days in this month, stop writing
+ else if (j >= start_day && !flag)
+ flag = 1; // If the first day of this month has come, start the date writing
- var d = 1;
- var flag = 0;
+ if (flag) {
+ var w = d, mon = month+1;
+ if (w < 10)
+ w = "0" + w;
+ if (mon < 10)
+ mon = "0" + mon;
- // Leap year support
- if (!(year % 4) && ((year % 100) || !(year % 400)))
- this.month_days[1] = 29;
- else
- this.month_days[1] = 28;
+ // Is it today?
+ var class_name = '';
- var days_in_this_month = this.month_days[month];
-
- // Create the calendar
- var yea = this.today.getFullYear();
- var all_diff = (year - yea) || (month - this.today.getMonth());
- var sel_day = year == this.selected.getFullYear() && month == this.selected.getMonth() ? this.selected.getDate() : -1;
- for (var i = 0; i <= 5; i++) {
- if (w >= days_in_this_month)
- break;
- this.wrt("
");
- for (var j = 0; j < 7; j++) {
- if (d > days_in_this_month)
- flag = 0; // If the days has overshooted the number of days in this month, stop writing
- else if (j >= start_day && !flag)
- flag = 1; // If the first day of this month has come, start the date writing
-
- if (flag) {
- var w = d, mon = month+1;
- if (w < 10)
- w = "0" + w;
- if (mon < 10)
- mon = "0" + mon;
-
- // Is it today?
- var class_name = '';
-
- var diff = all_diff || (d - this.today.getDate());
- if (diff < 0)
- class_name = ' past';
- else if (!diff)
- class_name = ' today';
- else
- class_name = ' future';
-
- if (d == sel_day)
- class_name += ' selected';
-
- class_name += " " + this.weekdays[j].toLowerCase();
-
- this.wrt("
");
- this.fin();
- },
+ html += "";
+ }
+ html += "
";
+ this.setHTML(html);
+};
- /// Display the calendar - if a date exists in the input box, that will be selected in the calendar.
- showCalendar: function() {
- var input = this.opt['input'];
+/// Display the calendar - if a date exists in the input box, that will be selected in the calendar.
+Calendar.prototype.showCalendar = function()
+{
+ Calendar.instance = this;
+ var input = this.input;
- //Position the div in the correct location...
- var div = document.getElementById(this.opt['calendar']);
- var xy = getOffset(input);
- var width = input.clientWidth||input.offsetWidth;
- var height = input.clientHeight||input.offsetHeight;
- div.style.left = (xy.left-1)+"px";
- div.style.top = (xy.top+height-1)+"px";
+ //Position the div in the correct location...
+ var div = Calendar.box;
+ var xy = getOffset(input);
+ var width = input.clientWidth||input.offsetWidth;
+ var height = input.clientHeight||input.offsetHeight;
+ div.style.left = (xy.left-1)+"px";
+ div.style.top = (xy.top+height-1)+"px";
- // Show the calendar with the date in the input as the selected date
- this.selected = new Date();
- var date_in_input = input.value.replace(/\s+.*$/, ''); //Remove time
- if(date_in_input) {
- // date format is HARDCODE
- var selected_date = false;
- var date_parts = date_in_input.split("-");
+ // Show the calendar with the date in the input as the selected date
+ this.selected = new Date();
+ var date_in_input = input.value.replace(/\s+.*$/, ''); //Remove time
+ if (date_in_input) {
+ // date format is HARDCODE
+ var selected_date = false;
+ var date_parts = date_in_input.split("-");
+ if (date_parts.length == 3) {
+ // Y-m-d
+ date_parts[1]--; //Month starts with 0
+ selected_date = new Date(date_parts[0], date_parts[1], date_parts[2]);
+ } else if (date_parts.length == 1) {
+ date_parts = date_in_input.split('.');
if (date_parts.length == 3) {
- // Y-m-d
+ // d.m.Y
date_parts[1]--; //Month starts with 0
- selected_date = new Date(date_parts[0], date_parts[1], date_parts[2]);
- } else if (date_parts.length == 1) {
- date_parts = date_in_input.split('.');
- if (date_parts.length == 3) {
- // d.m.Y
- date_parts[1]--; //Month starts with 0
- selected_date = new Date(date_parts[2], date_parts[1], date_parts[0]);
- }
- }
- if (selected_date && !isNaN(selected_date.getFullYear())) { //Valid date.
- this.selected = selected_date;
+ selected_date = new Date(date_parts[2], date_parts[1], date_parts[0]);
}
}
-
- this.makeCalendar(this.selected.getFullYear(), this.selected.getMonth());
- document.getElementById(this.opt['calendar']).style.display = "block";
- },
-
- /// Hides the currently show calendar.
- hideCalendar: function() {
- document.getElementById(this.opt['calendar']).style.display = "none";
- },
-
- /// Setup a text input box to be a calendar box.
- set: function(input_or_id) {
- if (typeof input_or_id == 'string')
- input_or_id = document.getElementById(input_or_id);
- if (!input_or_id)
- return; // If the input field is not there, exit.
-
- if (!Calendar.opt['calendar'] || !document.getElementById(Calendar.opt['calendar']))
- Calendar.init();
-
- addListener(input_or_id, 'focus', function(ev) {
- Calendar.opt['input'] = this;
- Calendar.showCalendar();
- });
- },
-
- /// Will be called once when the first input is set.
- init: function() {
- if(!this.opt['calendar'] || !document.getElementById(this.opt['calendar'])) {
- var div = document.createElement('div');
- if(!this.opt['calendar'])
- this.opt['calendar'] = 'calender_div_'+ Math.round(Math.random() * 100);
-
- div.setAttribute('id',this.opt['calendar']);
- div.className="calendar-box";
- addListener(div, "mousedown", function(ev) {
- ev = ev || window.event;
- if (ev.stopPropagation)
- ev.stopPropagation();
- else
- ev.cancelBubble = true;
- return true;
- });
- document.getElementsByTagName("body")[0].insertBefore(div,document.getElementsByTagName("body")[0].firstChild);
-
- if (!Calendar.addedListener) {
- addListener(document, "mousedown", function() { Calendar.hideCalendar(); });
- Calendar.addedListener = true;
- }
+ if (selected_date && !isNaN(selected_date.getFullYear())) { //Valid date.
+ this.selected = selected_date;
}
}
-}
-}
+
+ this.makeCalendar(this.selected.getFullYear(), this.selected.getMonth());
+ Calendar.box.style.display = "block";
+};
+
+/// Hides the currently show calendar.
+Calendar.hideCalendar = function()
+{
+ Calendar.box.style.display = "none";
+};
+
+/// Setup a text input box to be a calendar box.
+Calendar.set = function(input_or_id, options)
+{
+ if (typeof input_or_id == 'string')
+ input_or_id = document.getElementById(input_or_id);
+ if (!input_or_id)
+ return; // If the input field is not there, exit.
+ options = options||{};
+ var instance = new Calendar();
+ for (var i in Calendar.defaultOptions)
+ instance[i] = options[i] || Calendar.defaultOptions[i];
+ instance.input = input_or_id;
+ Calendar.init();
+ addListener(input_or_id, 'focus', function(ev) {
+ instance.showCalendar();
+ });
+ return instance;
+};
+
+/// Will be called once when the first input is set.
+Calendar.init = function()
+{
+ if (!Calendar.box || !Calendar.box.parentNode) {
+ var div = document.createElement('div');
+ if (!Calendar.box)
+ Calendar.box = div;
+ div.className = "calendar-box";
+ addListener(div, "mousedown", function(ev) {
+ ev = ev || window.event;
+ if (ev.stopPropagation)
+ ev.stopPropagation();
+ else
+ ev.cancelBubble = true;
+ return true;
+ });
+ document.getElementsByTagName("body")[0].insertBefore(div,document.getElementsByTagName("body")[0].firstChild);
+ if (!Calendar.addedListener) {
+ addListener(document, "mousedown", function() { Calendar.hideCalendar(); });
+ Calendar.addedListener = true;
+ }
+ }
+};
diff --git a/test.htm b/test.htm
index ad7e83e..3649be6 100644
--- a/test.htm
+++ b/test.htm
@@ -8,3 +8,8 @@
+
+
+