/* * DatePicker Class * - Original by Mathieu Jondet * - Modified by Scott Mackenzie */ /* * Class DatePickerFormatter * - By Arturas Slajus * - For matching and stringifying dates. */ var DatePickerFormatter = Class.create({ /* * Create a DatePickerFormatter. * * format: specify a format by passing 3 value array consisting of * "yyyy", "mm", "dd". Default: ["yyyy", "mm", "dd"]. * * separator: string for splitting the values. Default: "-". * * Use it like this: * var df = new DatePickerFormatter(["dd", "mm", "yyyy"], "/"); * df.current_date(); * df.match("7/7/2007"); */ initialize: function(format, separator) { if (typeof(format) == "undefined") { format = ["yyyy", "mm", "dd"] } if (typeof(separator) == "undefined") { separator = "-" } this._format = format; this.separator = separator; this._format_year_index = format.indexOf("yyyy"); this._format_month_index = format.indexOf("mm"); this._format_day_index = format.indexOf("dd"); this._year_regexp = /^\d{4}$/; this._month_regexp = /^0\d|1[012]|\d$/; this._day_regexp = /^0\d|[12]\d|3[01]|\d$/; }, /* * Match a string against date format. * Returns: [year, month, day] */ match: function(str) { d = str.split(this.separator); if (d.length < 3) { return false; } year = d[this._format_year_index].match(this._year_regexp); if (year) { year = year[0] } else { return false } month = d[this._format_month_index].match(this._month_regexp); if (month) { month = month[0] } else { return false } day = d[this._format_day_index].match(this._day_regexp); if (day) { day = day[0] } else { return false } return [year, month, day]; }, /* * Return current date according to format. */ current_date: function(offset) { if (!offset) offset = 0; var d = new Date; return this.date_to_string( d.getFullYear(), d.getMonth() + 1, d.getDate() + Number(offset) ); }, /* * Return a stringified date accordint to format. */ date_to_string: function(year, month, day, separator) { if (typeof(separator) == "undefined") { separator = this.separator } var a = [0, 0, 0]; a[this._format_year_index] = year; a[this._format_month_index] = this.leftpad_with_zeroes(month, 2); a[this._format_day_index] = this.leftpad_with_zeroes(day, 2); return a.join(separator); }, /* * Pad string from left with zeroes. * * Shameleslly stolen from http://www.eulerian.com/misc/datepicker/ */ leftpad_with_zeroes: function(str, padToLength) { var result = ''; for (var i = 0; i < (padToLength - String(str).length); i++) result += '0'; return result + str; } }); /* * * Class DatePicker * - creates a nifty calendar to choose dates * - handles interactions with date select boxes * */ var DatePicker = Class.create({ _handler : null, _mode : null, _select_day : null, _select_month_year : null, _selected_day : null, _selected_month : null, _selected_year : null, _relative : null, _div : null, _prefix : null, _posleft : null, _postop : null, _paired : false, _pairedobj : null, _pairedorder : null, _dayoffset : 0, _curr_month_offset : 0, _maxmonths : 12, _daysInMonth : [ 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31 ], _language : 'en', _months : [ 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December' ], _days : [ 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun' ], _date_format : $H({ 'en': [ ["dd", "mm", "yyyy"], "/" ] }), _todayDate : new Date(), _current_date : null, _id_datepicker : null, /* * initialize the correct dates */ _initCurrentDate : function () { /* Create the DateFormatter */ this._df = new DatePickerFormatter( this._date_format.get(this._language)[0], this._date_format.get(this._language)[1] ); /* check if value in field is proper, if not set to today */ /* * Capture current input variables */ this._current_date = this._selected_day() + '/' + this._selected_month() + '/' + this._selected_year(); today_m = this._todayDate.getMonth() + 1; today_y = this._todayDate.getFullYear(); this._curr_month_offset = ((12 * this._selected_year()) + this._selected_month()) - ((12 * today_y) + today_m); if (!this._df.match(this._current_date)) { this._current_date = this._df.current_date(this._dayoffset); d = this._current_date.split('/'); //this.setSelectDay(d); //this.setSelectMonth(d); this.SetSelectDayMonthYear(d); } var a_date = this._df.match(this._current_date); this._current_year = Number(a_date[0]); this._current_mon = Number(a_date[1]) - 1; this._current_day = Number(a_date[2]); }, /* * init */ initialize : function ( handler ) { this._handler = handler; /* * reg exp rules for finding possible local variables via handler classname */ var regExps = { 'mode' : '/mode-([a-zA-Z0-9]*)?/g', // keyword identifier 'prefix' : '/prefix-([a-zA-Z0-9]*)?/g', // prefix for unique id generation 'posleft' : '/posleft--?([0-9]*)?/g', // calendar relative position left 'postop' : '/postop--?([0-9]*)?/g', // calendar relative position top 'dayoffset' : '/dayoffset-([0-9]*)?/g', // calendar relative position left 'maxmonths' : '/maxmonths-0?([1-9]|1[0-2]*)?/g' }; for (var i in regExps) { if (this._handler.className && (this._handler.className.search(eval(regExps[i])) != -1)) { eval("this._"+i+" = this._handler.className.match("+regExps[i]+")[0].replace('"+i+"-','')"); } } // set class variables using mode keyword as identifier this._relative = this._prefix ? this._prefix+'-dates-'+this._mode :'dates-'+this._mode; this._select_day = this._prefix ? this._prefix+'-day-'+this._mode : 'date-day-'+this._mode; this._select_month_year = this._prefix ? this._prefix+'-month-'+this._mode : 'date-month-'+this._mode; this._id_datepicker = this._prefix ? this._prefix+'-datepicker-dates-'+this._mode : 'datepicker-dates-'+this._mode; this._id_datepicker_prev = this._id_datepicker+'-prev'; this._id_datepicker_next = this._id_datepicker+'-next'; this._id_datepicker_hdr = this._id_datepicker+'-header'; this._id_datepicker_ftr = this._id_datepicker+'-footer'; /* build up calendar skel */ this._div = document.createElement('div'); this._div.id = this._id_datepicker; this._div.className = 'datepicker'; this._div.setAttribute('style', 'display: none;'); /* calendar header */ cal_head = document.createElement('div'); cal_head.className = 'datepicker-header clearfix'; this._datepicker_hdr_wrap = cal_head; /* prev arrows */ prev = document.createElement('span'); prev.id = this._id_datepicker_prev; prev.className = 'next-prev prev'; //prev_text = document.createTextNode(' << '); //prev.appendChild(prev_text); /* month */ month_head = document.createElement('span'); month_head.id = this._id_datepicker_hdr; /* next arrows */ next = document.createElement('span'); next.id = this._id_datepicker_next; next.className = 'next-prev next'; //next_text = document.createTextNode(' >> '); //next.appendChild(next_text); /* table outer and table */ tableouter = document.createElement('div'); tableouter.className = 'datepicker-calendar'; table = document.createElement('table'); table.id = this._id_datepicker+'-table'; /* footer */ tbl_footer = document.createElement('div'); tbl_footer.id = this._id_datepicker_ftr; tbl_footer.className = 'datepicker-footer'; cal_head.appendChild(prev); cal_head.appendChild(month_head); cal_head.appendChild(next); this._div.appendChild(cal_head); tableouter.appendChild(table); this._div.appendChild(tableouter); this._div.appendChild(tbl_footer); /* * date picker handler */ this._clickevent = this.click.bindAsEventListener(this); Event.observe(this._handler, 'click', this._clickevent, false); /* * attach datepicker to dom */ $(this._relative).appendChild( this._div ); /* override todays date if the global bp_start_date exists */ if ( typeof(bp_start_date) != 'undefined' ) { this._todayDate = new Date(bp_start_date[2], bp_start_date[1]-1, bp_start_date[0]) } /* init the date in field if needed */ this._initCurrentDate(); /* set the position of the date picker */ this.setPosition(); /* set the close locale content */ $(this._id_datepicker_ftr).innerHTML = 'close'; this.close(); /* * date picker events */ /* previous month */ Event.observe($(this._id_datepicker_prev), 'click', this.prevMonth.bindAsEventListener(this), false); /* next month */ Event.observe($(this._id_datepicker_next), 'click', this.nextMonth.bindAsEventListener(this), false); /* close datepicker */ Event.observe($(this._id_datepicker_ftr), 'click', this.close.bindAsEventListener(this), false); /* * select list events */ Event.observe(this._select_day, 'change', this.setDateFromSelect.bindAsEventListener(this), false); Event.observe(this._select_month_year, 'change', this.setDateFromSelect.bindAsEventListener(this), false); }, /** * visible : return the visibility status of the datepicker. */ visible : function () { return $(this._id_datepicker).visible(); }, /** * click : called when input element is clicked */ click : function (event) { this._handler.blur(); event.stop(); /* * Check other calendars aren't open.. if so, close them */ if (this._paired) { this._pairedobj._initCurrentDate(); this._pairedobj.close(); } if (!this.visible()) { this._initCurrentDate(); this._redrawCalendar(); $(this._id_datepicker).show(); } else { $(this._id_datepicker).hide(); } }, /* * close : called when the datepicker is closed */ close : function () { $(this._id_datepicker).hide(); }, /* * setPosition : set the position of the datepicker. */ setPosition : function ( ) { posleft = this._posleft ? this._posleft : $(this._relative).getStyle('width'); postop = this._postop ? this._postop : 0; this._div.style.left = posleft+'px'; this._div.style.top = postop+'px'; }, /** * _leftpad_zero : pad the provided string to given number of 0 */ /** CHECK toPaddedString: from http://dev.rubyonrails.org/changeset/6363 */ _leftpad_zero : function ( str, padToLength ) { var result = ''; for ( var i = 0; i < (padToLength - String(str).length); i++) result += '0'; return result + str; }, /** * _getMonthDays : given the year and month find the number of days. */ _getMonthDays : function ( year, month ) { if (((0 == (year%4)) && ( (0 != (year%100)) || (0 == (year%400)))) && (month == 1)) return 29; return this._daysInMonth[month]; }, /** * _buildCalendar : draw the days array for current date */ _buildCalendar : function () { // check if there are previous months, if not hide the nav button if (this._curr_month_offset > 0) { $(this._id_datepicker_prev).show(); } else { $(this._id_datepicker_prev).hide(); } // check if there are next months, if not hide the nav button if (this._curr_month_offset < this._maxmonths) { $(this._id_datepicker_next).show(); } else { $(this._id_datepicker_next).hide(); } var _self = this; var tbody = document.createElement('tbody'); /* generate day headers */ var trDay = document.createElement('tr'); this._days.each( function ( item ) { var tmp = document.createElement('span'); tmp.className = 'wday'; var td = document.createElement('td'); tmp.innerHTML = item; td.className = 'wday'; td.appendChild( tmp ); trDay.appendChild( td ); }); tbody.appendChild( trDay ); /* generate the content of days */ /* build-up days matrix */ var a_d = [ [ 0, 0, 0, 0, 0, 0, 0 ] ,[ 0, 0, 0, 0, 0, 0, 0 ] ,[ 0, 0, 0, 0, 0, 0, 0 ] ,[ 0, 0, 0, 0, 0, 0, 0 ] ,[ 0, 0, 0, 0, 0, 0, 0 ] ,[ 0, 0, 0, 0, 0, 0, 0 ] ]; /* set date at beginning of month to display */ var d = new Date(this._current_year, this._current_mon, 1, 12); /* start the day list on monday */ var startIndex = ( !d.getDay() ) ? 6 : d.getDay() - 1; var nbDaysInMonth = this._getMonthDays( this._current_year, this._current_mon ); var daysIndex = 1; for ( var j = startIndex; j < 7; j++ ) { a_d[0][j] = { d : daysIndex ,m : this._current_mon ,y : this._current_year }; daysIndex++; } var a_prevMY = this._prevMonthYear(); var nbDaysInMonthPrev = this._getMonthDays(a_prevMY[1], a_prevMY[0]); for ( var j = 0; j < startIndex; j++ ) { a_d[0][j] = { d : Number(nbDaysInMonthPrev - startIndex + j + 1) ,m : Number(a_prevMY[0]) ,y : a_prevMY[1] ,c : 'outbound' }; } var switchNextMonth = false; var currentMonth = this._current_mon; var currentYear = this._current_year; for ( var i = 1; i < 6; i++ ) { for ( var j = 0; j < 7; j++ ) { a_d[i][j] = { d : daysIndex ,m : currentMonth ,y : currentYear ,c : ( switchNextMonth ) ? 'outbound' : ( ((daysIndex == this._todayDate.getDate()) && (this._current_mon == this._todayDate.getMonth()) && (this._current_year == this._todayDate.getFullYear())) ? 'today' : null) }; daysIndex++; /* if at the end of the month : reset counter */ if (daysIndex > nbDaysInMonth ) { daysIndex = 1; switchNextMonth = true; if (this._current_mon + 1 > 11 ) { currentMonth = 0; currentYear += 1; } else { currentMonth += 1; } } } } /* generate days for current date */ for ( var i = 0; i < 6; i++ ) { var tr = document.createElement('tr'); for ( var j = 0; j < 7; j++ ) { var h_ij = a_d[i][j]; // everything is selectable until proven guilty var selectable = true; // only the chosen ones will be highlighted var highlight = false; /* * Sets Previous selectable to false * if current offset is 0 and * - if calendar month < current month & calendar month isn't 0 (january) * - if calendar month == current month && days are earlier than today */ if (this._curr_month_offset == 0) { if ( h_ij.m < this._current_mon && h_ij.m == 0 && this._current_year == h_ij.y || h_ij.m == this._current_mon && h_ij.d < this._todayDate.getDate() ) { selectable = false; } } /* * Sets Previous selectable to false * - if current offset month is 1 and * - if the previous days from the previous month are not valid */ if (this._curr_month_offset == 1) { if (h_ij.d < this._todayDate.getDate() && h_ij.m < (this._current_mon)) { selectable = false; } } /* * Sets Next selectable to false * if the showing offset month 12 and * - if days are later than today */ if (this._curr_month_offset == 12) { if ( h_ij.d > this._todayDate.getDate() && h_ij.y == this._todayDate.getFullYear() || h_ij.m == this._current_mon && h_ij.d > this._todayDate.getDate() || h_ij.m > this._current_mon ) { selectable = false; } } /* * Find days before paired 1 days and make them non selectable */ if (this._paired && this._pairedorder == 2) { if ( h_ij.d < this._pairedobj._selected_day() && ((h_ij.y * 12) + h_ij.m) <= ((this._pairedobj._current_year * 12) + this._pairedobj._current_mon) || (((h_ij.y * 12) + h_ij.m) < ((this._pairedobj._current_year * 12) + this._pairedobj._current_mon)) ) { selectable = false; } } if ( this._curr_month_offset == this._maxmonths && h_ij.d > this._todayDate.getDate() && this._current_mon >= this._curr_month_offset ) { selectable = false; } //if (this._curr_month_offset == 0 && h_ij.m == 11) { // selectable = false; //} var td = document.createElement('td'); var a_elem = document.createElement('a'); /* id is : datepicker-day-mon-year or depending on language other way */ /* don't forget to add 1 on month for proper formmatting */ var id = $A([ this._df.date_to_string(h_ij["y"], h_ij["m"]+1, h_ij["d"], '-') ]).join('-'); /* set id and classname for cell if exists */ td.setAttribute('id', id); // if today set class name to 'today' if (h_ij["c"]) { td.className = h_ij["c"]; } /* * Find the chosen one * */ if (h_ij.d == Number($F(this._select_day)) && h_ij.m == (Number($F(this._select_month_year).substring(4, 6)) - 1) && h_ij.y == Number($F(this._select_month_year).substring(0, 4))) { td.className = 'highlight'; } /* on onclick : rebuild date value from id of current cell */ if (selectable) { // calendar select day td.onclick = function () { d = $(this).id.split('-'); //_self.setSelectDay(d); //_self.setSelectMonth(d); _self.SetSelectDayMonthYear(d); _self.checkAdjust(); _self.close(); }; //a_elem.setAttribute('href', '#set-date'); a_elem.onclick = function () { return false }; a_elem.innerHTML= h_ij["d"]; td.appendChild( a_elem ); } else { td.className = 'disabled'; td.innerHTML= h_ij["d"]; } tr.appendChild( td ); } tbody.appendChild( tr ); } return tbody; }, /** * setSelectDay : set the correct index for the day * - date is passed as an array */ /* setSelectDay : function (date) { $(this._select_day).selectedIndex = (date[0] - 1); }, //*/ /** * setMonth : set the correct index for the day * - date is passed as an array */ /* setSelectMonth : function (date) { //$(this._select_month_year).value = date[2]+date[1]; }, //*/ /** * setSelectDayMonthYear : sets day, month and year when selecting Month Year or selecting the date from Calendar * accesses global function get_num_days_in_month in BookingPanel.class.js to get correct number of days in selected * @param array date array(Day, Month, Year) * Date: 2010/06/29 Hau Le, added new function SetSelectDayMonthYear, disabled functions setSelectDay and setSelectMonth */ SetSelectDayMonthYear : function (date) { var day_selected = date[0] -1; var day_length = $(this._select_day).length - 1; if(day_selected <= day_length) $(this._select_day).selectedIndex = day_selected; $(this._select_month_year).value = date[2]+date[1]; get_num_days_in_month($(this._select_month_year), $(this._select_day)); // function fixes the number of days in current selected month /* var y = $(this._select_month_year).options[$(this._select_month_year).selectedIndex].value.substr(0,4); var m = $(this._select_month_year).options[$(this._select_month_year).selectedIndex].value.substr(4,2); var d_index = $(this._select_day).options[$(this._select_day).selectedIndex].value; // get value of selected form day var d_new = days_in_month(m, y); // get number of days in current selected month $(this._select_day).options.length = d_new; // set length of form day select to new days_in_month var i_new=""; var j=1; var d_selected=""; for (var i=1; i <= d_new; i++) { i_new = (i < 10 ? "0"+j : j); $(this._select_day).options[i-1]= new Option(i_new, i_new, false, false); // create new Select Options list for new number of days in selected month j++; } d_selected = (d_index <= d_new ? d_index-1 : 0); // set to 01 selected if user selects day 31 manually for eg. Jan 2010, then selects Feb 2010 $(this._select_day).selectedIndex=d_selected; */ }, /** * setDayFromSelect */ setDateFromSelect : function () { this.checkAdjust(); this._initCurrentDate(); if (this.visible()) { this._redrawCalendar(); } if (this._paired && this._pairedorder == 1) { this._pairedobj._initCurrentDate(); } }, /** * nextMonth : redraw the calendar content for next month. */ _nextMonthYear : function () { var c_mon = this._current_mon; var c_year = this._current_year; if (c_mon + 1 > 11) { c_mon = 0; c_year += 1; } else { c_mon += 1; } return [ c_mon, c_year ]; }, nextMonth : function () { if (this._curr_month_offset < this._maxmonths) { var a_next = this._nextMonthYear(); this._current_mon = a_next[0]; this._current_year = a_next[1]; this._curr_month_offset++; this._redrawCalendar(); } }, /* * prevMonth : redraw the calendar content for previous month. */ _prevMonthYear : function () { var c_mon = this._current_mon; var c_year = this._current_year; if (c_mon - 1 < 0) { c_mon = 11; c_year -= 1; } else { c_mon -= 1; } return [ c_mon, c_year ]; }, prevMonth : function () { if (this._curr_month_offset > 0) { var a_prev = this._prevMonthYear(); this._current_mon = a_prev[0]; this._current_year = a_prev[1]; this._curr_month_offset--; this._redrawCalendar(); } }, _redrawCalendar : function () { this._setLocaleHdr(); var table = $(this._id_datepicker+'-table'); try { while ( table.hasChildNodes() ) table.removeChild(table.childNodes[0]); } catch ( e ) {}; table.appendChild( this._buildCalendar() ); if (!this._width) { w = $(this._id_datepicker).getWidth() $(this._datepicker_hdr_wrap).style.width = w + 'px'; this._width = w; } else { $(this._datepicker_hdr_wrap).style.width = this._width; } }, _setLocaleHdr : function () { /* next link */ var a_next = this._nextMonthYear(); $(this._id_datepicker_next).setAttribute('title', this._months[a_next[0]]+' '+a_next[1]); /* prev link */ var a_prev = this._prevMonthYear(); $(this._id_datepicker_prev).setAttribute('title', this._months[a_prev[0]]+' '+a_prev[1]); /* header */ $(this._id_datepicker_hdr).update(this._months[this._current_mon]+' '+this._current_year); }, _selected_day : function () { return Number($F(this._select_day)); }, _selected_month : function () { return Number($F(this._select_month_year).substring(4, 6)); }, _selected_year : function () { return Number($F(this._select_month_year).substring(0, 4)); }, checkAdjust : function () { /* * Find the other calendar in cal objs and set the adjusted date */ if (this._paired & this._pairedorder == 1) { this._pairedobj.adjustDate({d: this._selected_day(), m: this._selected_month(), y: this._selected_year()}, this._pairedorder); } if (this._paired & this._pairedorder == 2) { date_return = new Date(this._selected_year(), this._selected_month()-1, this._selected_day()); var date_obj_arr = this._pairedobj.adjustDate({d: this._selected_day(), m: this._selected_month()-1, y: this._selected_year()}, this._pairedorder); date_depart = new Date(date_obj_arr[2], date_obj_arr[1]-1, date_obj_arr[0]); if(date_return < date_depart) // reset return date if only return date is less than depart date { day_return = this._selected_day(); day_depart = date_obj_arr[0]; if(day_return < day_depart) // reset day if Return day selected is less than Depart day { day_date = (date_obj_arr[0] < 10) ? "0"+date_obj_arr[0] : date_obj_arr[0]; $(this._select_day).value = day_date; } $(this._select_month_year).value = date_obj_arr[2]+date_obj_arr[1]; // reset month } } }, adjustDate : function (date, order) { /* * if passed date is less than this date * - adjust this date to be the same as passed date */ this_date = new Date(this._selected_year(), this._selected_month()-1, this._selected_day()); passed_date = new Date(date.y, date.m-1, date.d); // passed_date will always be greater than this_date, and we don't if it belongs to depart date or return date if (passed_date > this_date && order == 1) { dodge_month = (date.m < 10 ) ? "0"+String(date.m) : String(date.m) date_arr = [String(date.d), dodge_month, String(date.y)]; //this.setSelectDay(date_arr); //this.setSelectMonth(date_arr); this.SetSelectDayMonthYear(date_arr); } else if(order == 2) // pairorder = 2 (Return Date) selected { dodge_month = (this._selected_month() < 10 ) ? "0"+String(this._selected_month()) : String(this._selected_month()) date_arr = [String(this._selected_day()), dodge_month, String(this._selected_year()), $(this._select_month_year), $(this._select_day)]; return date_arr; } }, /* * Pairs the calendar to another calendar object * For use when two calendars need to relate to one another */ pair : function (calobj, order) { this._pairedobj = calobj; this._pairedorder = order; this._paired = true; }, /* Disable */ disable : function () { els = this._handler.childElements(); els[0].addClassName('hide'); els[1].removeClassName('hide'); Event.stopObserving(this._handler, 'click', this._clickevent); }, /* Enable */ enable : function () { els = this._handler.childElements(); els[0].removeClassName('hide'); els[1].addClassName('hide'); Event.observe(this._handler, 'click', this._clickevent); } });