/*
Script: PBBDatePicker.js
Contains
Author:
Pokemon_JOJO,
License:
MIT-style license.
*/
/*
Class: PBBDatePicker
A powerfull DatePicker with many, many options and fonctionnality :D
Arguments:
options - see Options below
Options:
showDelay - the delay the onShow method is called. (defaults to 100 ms)
hideDelay - the delay the onHide method is called. (defaults to 100 ms)
offsets - the distance of your datepicker from the input. an Object with x/y properties.
readOnly - is the input have readonly status ? (defaults to true)
className - name for your DatePicker classNames. defaults to 'PBBDatePicker'.
weekFirstDay - integer, first day of the week. 0 (for Sunday) through 6 (for Saturday)
dateFormat - the return format of selected date like php function date. (defaults to d/m/Y)
d -> Day of the month, 2 digits with leading zeros
D -> A textual representation of a day, three letters
j -> Day of the month without leading zero
l -> (lowercase 'L') A full textual representation of the day of the week
N -> ISO-8601 numeric representation of the day of the week. 1 (for Monday) through 7 (for Sunday)
w -> Numeric representation of the day of the week
m -> Numeric representation of a month, with leading zeros
M -> A short textual representation of a month, three letters
F -> A full textual representation of a month, such as January or March
n -> Numeric representation of a month, without leading zeros
Y -> A full numeric representation of a year, 4 digits
y -> A two digit representation of a year
Example :
2/15/2007 -> dateFormat : 'd/m/Y', -> 15/02/2007
2/15/2007 -> dateFormat : 'M j Y', -> Feb 15 2007
defaultYear - Year by default in the Year select list
defaultMonth - Month by default in the Year select list
defaultDay - Day by default selected
selectMinDate - minimum date you can select
selectMaxDate - maximum date you can select
rangeYear - how many year to show in the Year select list ? an Object with min/max properties.
iconImg - Image you can add to the input
monthNames - Array for month name
dayNames - Array for day name
todayName - Text to show in the TodayPicker ;)
Events:
onShow - optionally you can alter the default onShow behaviour with this option (like displaying a fade in effect);
onHide - optionally you can alter the default onHide behaviour with this option (like displaying a fade out effect);
*/
MyDatePickerA
MyDatePickerA = new PBBDatePicker($('MyDateA'));
MyDatePickerB
MyDatePickerB = new PBBDatePicker($('MyDateB'), {
dateFormat : 'd M Y',
selectMinDate: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()),
rangeYear: {'min': new Date().getFullYear(), 'max': new Date().getFullYear() + 2},
iconImg : 'datepicker/date.png',
onShow: function(picker){
picker.effects({duration: 500, transition: Fx.Transitions.quadInOut}).custom({'opacity': [0, 0.8]});
}
});
MyDatePickerC
MyDatePickerC = new PBBDatePicker($('MyDateC'), {
className : 'PBBDatePicker2',
dateFormat : 'l j F',
selectMinDate: new Date(new Date().getFullYear(), new Date().getMonth(), (new Date().getDate() - 5)),
rangeYear: {'min': new Date().getFullYear() - 10, 'max': new Date().getFullYear() + 10},
iconImg : 'datepicker/date.png',
onShow: function(picker){
picker.effects({duration: 800, transition: Fx.Transitions.quadInOut}).custom({
'margin-top': [-20, 0],
'opacity': [0, 1]
});
}
});