'
// year selector
var year_options = ''
var min_year = ( year < MIN_YEAR ) ? year : MIN_YEAR
var max_year = ( year > MAX_YEAR ) ? year : MAX_YEAR
for( var i = min_year; i <= max_year; i++ ) {
selected = ( i == year ) ? ' selected="selected"' : ''
year_options = year_options + ''+ i +''
}
var year_selector = '
'
}
/* weeks
* returns HTML representing calendar weeks
*/
DatePicker.prototype.weeks = function() {
var self = this
var y = self.calendar_Y || TODAY.Y
var m = self.calendar_M || TODAY.M
return get_weeks( self.id, y, m )
}
/* week_count
* returns integer representing number of sunday-to-saturday weeks in month
*/
DatePicker.prototype.week_count = function() {
var self = this
var first_day = new Date( self.calendar_Y, self.calendar_M - 1, 1 ).getDay()
return Math.ceil(( days_in_month( self.calendar_Y, self.calendar_M ) + first_day ) / 7 )
}
/* draw_month
* sets month and year, then draws it
*/
DatePicker.prototype.draw_month = function( y, m ) {
var self = this
if( y ) self.calendar_Y = y
if( m ) self.calendar_M = m
/* FIXME this works, but really shouldn't be necessary
* the calendar properties should already be set here
* this only manifest itself when the date is not set, visible by the week_count() calculation being off
* the manual date controls and the calendar_X properties should be synched, always
* which means they should probably be methods, instead
*/
self.calendar_Y = self.calendar_Y || TODAY.Y
self.calendar_M = self.calendar_M || TODAY.M
self.calendar_D = self.calendar_D || TODAY.D
var header = self.header()
var weeks = self.weeks()
var footer = self.footer()
var content = '
'+ header + weeks + footer +'
'
if( ! self.calendar_active() ) { // create a new calendar and position it
$( 'body' ).append( '
'+ content +'
' )
var position = calendar_position( self.id )
$( '#date_picker_'+ self.id )
.css( 'left', position.x1 )
.css( 'top', position.y2 )
.addClass( 'active' )
.show( ANIMATION_SPEED )
}
else { // otherwise just replace the content of the current calendar
$( '#date_picker_'+ self.id )
.empty()
.append( content )
}
// add the correct class for the shadow, first removing the old one (the lazy way)
$( '#date_picker_'+ self.id )
.removeClass( 'week_count4' )
.removeClass( 'week_count5' )
.removeClass( 'week_count6' )
.addClass( 'week_count'+ self.week_count() )
self.resolve_manual_entry_problems()
self.update_manual_controls()
// scroll the calendar into view, if necessary
$( '#date_picker_'+ self.id ).each( function() {
this.scrollIntoView()
})
self.attach_events()
}
/* attach_events
*/
DatePicker.prototype.attach_events = function() {
var self = this
// month & year selectors
var month_id = '#month_selector_'+ self.id
var year_id = '#year_selector_'+ self.id
$( month_id ).change( function() {
var month = $( month_id ).attr( 'value' )
var year = $( year_id ).attr( 'value' )
self.draw_month( year, month )
})
$( year_id ).change( function() {
var month = $( month_id ).attr( 'value' )
var year = $( year_id ).attr( 'value' )
self.draw_month( year, month )
})
// previous & next month
var prev = prev_YM( self.calendar_Y, self.calendar_M )
var next = next_YM( self.calendar_Y, self.calendar_M )
$( '#previous_month_trigger_'+ self.id ).click( function() { self.draw_month( prev.y, prev.m ) })
$( '#next_month_trigger_'+ self.id ).click( function() { self.draw_month( next.y, next.m ) })
// previous & next year
$( '#previous_year_trigger_'+ self.id ).click( function() { self.draw_month(( self.calendar_Y - 1 ), self.calendar_M ) })
$( '#next_year_trigger_'+ self.id ).click( function() { self.draw_month(( self.calendar_Y + 1 ), self.calendar_M ) })
// cancel & delete
$( '#date_picker_'+ self.id +' .date_picker_cancel a' ).click( function() { self.hide_calendar() })
$( '#date_picker_'+ self.id +' .date_picker_delete a' ).click( function() {
set_date( self.id )
self.calendar_Y = TODAY.Y
self.calendar_M = TODAY.M
self.calendar_D = TODAY.D
})
}
/* hide_calendar
*/
DatePicker.prototype.hide_calendar = function( y, m ) {
var self = this
self.hide_manual_controls()
// FIXME this should be an object method
$( '#date_picker_'+ self.id )
.hide( ANIMATION_SPEED )
.remove()
self.trigger.removeClass( 'active' )
}
/* show_manual_controls
* shows the manual-entry controls
*/
DatePicker.prototype.show_manual_controls = function( y, m ) {
var self = this
if( y ) self.calendar_Y = y
if( m ) self.calendar_M = m
self.current_control( 'm' ) // FIXME this should be generalized, using next_control_type()
self.trigger.hide()
self.trigger_button.hide()
self.update_manual_controls()
self.controls.show()
self.month_control().focus().select()
}
/* hide_manual_controls
* hides the manual-entry controls
*/
DatePicker.prototype.hide_manual_controls = function( y, m ) {
var self = this
if( y ) self.calendar_Y = y
if( m ) self.calendar_M = m
hide_manual_controls( self.id )
}
// previous control
DatePicker.prototype.previous_control = function( control_type ) {
var self = this
if( control_type ) {
self._previous_control = control_type
}
return self._previous_control
}
// current control
DatePicker.prototype.current_control = function( control_type ) {
var self = this
if( control_type ) {
self._previous_control = self._current_control
self._current_control = control_type
}
return self._current_control
}
/* validate_manual_entry
* sanity check date, month, and year values
* highlight those values that are out-of-bounds'
* returns true if everything is ok, false if there are problems
* ' * 1' everywhere to eat leading zeroes
*/
DatePicker.prototype.validate_manual_entry = function( control_type ) {
var self = this
if( control_type == 'm' ) {
var value = self.month_control().val() * 1
if( value > 12 ) {
self.add_problem( control_type )
}
else {
self.remove_problem( control_type )
self.calendar_M = value
}
}
if( control_type == 'd' ) {
var value = self.date_control().val() * 1
if( value > days_in_month( self.calendar_Y, self.calendar_M )) {
self.add_problem( control_type )
}
else {
self.remove_problem( control_type )
self.calendar_D = value
}
}
if( control_type == 'y' ) self.calendar_Y = correct_manual_year_entry( self.year_control().val() )
return ! self.has_problems()
}
/* add_problem
* adds the "problem" class to a control
*/
DatePicker.prototype.add_problem = function( control_type ) {
var self = this
self.x_control( control_type ).addClass( 'problem' )
self.manual_entry_problems[ control_type ] = true
self.update_problem_message()
}
/* remove_problem
* removes the "problem" class from a control
*/
DatePicker.prototype.remove_problem = function( control_type ) {
var self = this
self.x_control( control_type ).removeClass( 'problem' )
self.manual_entry_problems[ control_type ] = false
self.update_problem_message()
}
/* has_problems
* returns "true" if there are problems with any manual entry fields
* if "control_type" is provided, returns "true" only if there are problems
* with that control
*/
DatePicker.prototype.has_problems = function( control_type ) {
var self = this
if( control_type ) {
return self.manual_entry_problems[ control_type ]
}
else {
for( control_type in self.manual_entry_problems ) {
if( self.manual_entry_problems[ control_type ]) return true
}
}
return false
}
/* resolve_manual_entry_problems
* this is useful when updating from a calendar affordance, rather than
* a manual entry control
*/
DatePicker.prototype.resolve_manual_entry_problems = function() {
var self = this
for( control_type in self.manual_entry_problems ) {
self.remove_problem( control_type )
}
}
/* update_problem_message
* hides message if there are no problems
* displays message if there are problems, making sure that the problems are listed
*/
DatePicker.prototype.update_problem_message = function() {
var self = this
if( ! self.has_problems() ) {
$( '#date_picker_'+ self.id ).removeClass( 'has_problems' )
$( '#date_picker_'+ self.id +' p.date_picker_problems' ).remove()
}
else {
var invalid_what = ''
var invalid_count = 0
for( control in self.manual_entry_problems ) {
if( self.manual_entry_problems[ control ]) {
invalid_count++
if( invalid_count > 1 ) invalid_what += ' and '
invalid_what += ' '+ CONTROL_NAMES[ control ]
}
}
if( $( '#date_picker_'+ self.id ).hasClass( 'has_problems' )) {
$( '#date_picker_'+ self.id +' p.date_picker_problems' ).text( 'Invalid'+ invalid_what )
return false
}
else {
$( '#date_picker_'+ self.id ).addClass( 'has_problems' )
$( '#date_picker_'+ self.id +' div.content' ).prepend( '
Invalid'+ invalid_what +'
' )
}
}
}
/* goto_next_tabbable_control
* finds the next control and focuses it
* this is necessary because the calendar is constructed at the end of the HTML
* document, out of the natural tab order
*/
DatePicker.prototype.goto_next_tabbable_control = function() {
var self = this
// go through all input controls and find ourselves
var controls = new Array()
var i = 0
var self_index = 0
$( ':input' ).each( function( i ) {
var id = $( this ).attr( 'id' )
if( ! /^date_picker/.test( id )) {
controls.push( id )
if( id == self.id ) self_index = i
i++
}
})
var next_control = controls[ self_index + 1 ]
// if the next control is a date picker, we need special behavior
if( DatePickers[ next_control ]) {
$( '#date_picker_button_'+ next_control ).focus()
}
else {
$( '#'+ next_control ).focus()
}
}
}
// }}}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
* everything below should be subroutines, not jquery triggers
*/
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function hide_all_calendars() {
for( id in DatePickers ) {
DatePickers[ id ].hide_calendar()
}
}
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function hide_manual_controls( id ) {
var dp = DatePickers[ id ]
dp.controls.hide()
dp.trigger.show()
dp.trigger_button.show()
// FIXME there has to be a better way or place to do this
dp.calendar_M = dp.M
dp.calendar_D = dp.D
dp.calendar_Y = dp.Y
dp.update_manual_controls()
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
* example return data structure for april 2004
* return [[0,0,0,0,1,2,3],[4,5,6,7,8,9,10],[11,12,13,14,15,16,17],[18,19,20,21,22,23,24],[25,26,27,28,29,30]]
*/
function get_weeks( id, year, month) {
var dp = DatePickers[ id ]
var WEEKS = ''
var days = get_days( year, month )
for( var weeknum = 0; weeknum < days.length; weeknum++ ) {
WEEKS += '
'
for( var day = 0; day < days[ weeknum ].length; day++ ) {
if( days[ weeknum ][ day ] == 0 ) {
WEEKS += '
'
}
else {
var classes = get_cell_classes( dp, year, month, days[ weeknum ][ day ], day )
var clickme = get_onclick( dp.id, year, month, days[ weeknum ][ day ] )
WEEKS += '
"
}
return WEEKS
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function get_days( year, month ) {
var date = new Date( year, month - 1, 1 )
var the_first = date.getDay()
var i
var days = []
for( var i = 0; i < the_first; i++ ) {
days[ i ] = 0
}
for( var i = 1; i < ( 37 ); i++ ) {
date.setDate( i )
if( date.getMonth() >= month || i > 31 ) {
days[ i + the_first - 1 ] = 0
}
else {
days[ i + the_first - 1 ] = i
}
}
var one_week = []
var this_month = []
var index = 0
for( var i = 1; i <= days.length; i++ ) {
one_week[ index ] = days[ i - 1 ]
index = i % 7
if( index == 0 ) {
this_month[ this_month.length ] = one_week
one_week = []
}
}
// added to get the weeks where the 31st is a Sunday
this_month[ this_month.length ] = one_week
return this_month
}
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function get_cell_classes( dp, year, month, date, day_position ) {
var classes = ''
if( year == dp.Y && month == dp.M && date == dp.D ) {
classes = classes + ' current'
}
if( year == TODAY.getFullYear() && month == ( TODAY.getMonth() + 1 ) && date == TODAY.getDate() ) {
classes = classes + ' today'
}
if(( day_position == 0 ) || ( day_position == 6 )) {
classes = classes + ' weekend'
}
return classes
}
}
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function get_onclick( id, year, month, date ) {
return 'onclick="return set_date( \''+ id +'\','+ year +','+ month +','+ date +' )"'
}
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function set_date( id, year, month, date ) {
var dp = DatePickers[ id ]
! year
? dp.input.attr( 'value', '' )
: dp.input.attr( 'value', year +'-'+ month +'-'+ date )
dp.Y = year || null
dp.M = month || null
dp.D = date || null
dp.update_trigger( id )
dp.set_date_from_input() // round-trip. also, helps when date is deleted
dp.hide_calendar()
return false
}
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function calendar_position( cid ) {
var pos = new Object
var control = $( '#date_picker_trigger_'+ cid )
pos.x1 = control.offset().left
pos.y1 = control.offset().top
var calendar = $( '#date_picker_'+ cid )
var calendar_width = calendar.width()
pos.x2 = pos.x1 + control.width()
pos.y2 = pos.y1 + control.height()
var css_width = new Array( 'border-left-width', 'border-right-width', 'padding-left', 'padding-right' )
for( var i = 0; i < css_width.length; ++i ) {
pos.x2 = pos.x2 + control.css( css_width[ i ]).split( 'px' )[ 0 ] * 1
calendar_width = calendar_width + calendar.css( css_width[ i ]).split( 'px' )[ 0 ] * 1
}
var css_height = new Array( 'border-top-width', 'border-bottom-width', 'padding-top', 'padding-bottom' )
for( var i = 0; i < css_height.length; ++i ) {
pos.y2 = pos.y2 + ( control.css( css_height[ i ]).split( 'px' )[ 0 ] * 1 )
}
var x_overlap = ( pos.x1 + calendar_width ) - $( 'body' ).width()
if( x_overlap > 0 ) {
pos.x1 = pos.x1 - x_overlap - PAGE_PADDING
pos.x2 = pos.x2 - x_overlap - PAGE_PADDING
}
return pos
}
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
// expects year, month, date as actual numbers that correspond to real
// dates. BTW, zero-based dates are the work of the devil
function format_date( year, month, date ) {
if( ! year || year == 0 ) return 'Click Here'
return MONTH_NAMES[ month ].substring( 0, 3 ) +' '+ date +', '+ year
}
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
// Randall says: zero-based dates are the work of the devil
function get_current_date( current ) {
if( current && /\d\d\d\d-\d\d-\d\d/.test( current )) {
current = current.split( '-' )
var y = current[ 0 ] || 0
var m = current[ 1 ] || 0
var d = current[ 2 ] || 0
m--
var currentDate = new Date()
if( /\D/.test( y )) y = currentDate.getFullYear()
if( /\D/.test( m )) m = currentDate.getMonth()
if( /\D/.test( d )) d = currentDate.getDate()
currentDate = new Date( y, m, d )
}
else {
var currentDate = new Date
}
return currentDate
}
// UTILITY
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function prev_YM( y, m ) {
var prev = new Object
prev.y = y
prev.m = m
prev.m--
if( prev.m == 0 ) {
prev.m = 12
prev.y--
}
return prev
}
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function next_YM( y, m ) {
var next = new Object
next.y = y
next.m = m
next.m++
if( next.m == 13 ) {
next.m = 1
next.y++
}
return next
}
/* correct manual year entry
* if someone enters a 2-digit year, what do we do?
* this code assumes the year is meant for this century if it is no more than
* PARTIAL_MANUAL_ENTRY_MAX_YEARS_IN_FUTURE years in the future, otherwise
* it is taken to mean last century
*/
function correct_manual_year_entry( year ) {
year *= 1
if( year < ( TODAY.Y - 2000 + PARTIAL_MANUAL_ENTRY_MAX_YEARS_IN_FUTURE )) {
year += 2000
}
else if( year < 100 ) {
year += 1900
}
return( year )
}
/* days_in_month
* returns integer representing number days in the month
*/
function days_in_month( year, month ) {
// day 0 is taken to be the last day of the previous month
return new Date( year, month, 0 ).getDate()
}