Support for scrolling through years as well as months
| Project: | Date Input |
| Version: | 1.1.1 |
| Component: | Code |
| Category: | feature request |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | active |
Jump to:
We have some people who whish to have (as well as a next and previous month) a next and previous year, so I have made a few adjustsments. I hope you will find them useful, and include them in the package.
date_input.css
Line 48:
.date_selector .prev {
right: 20px; // Was 5px;. changed to make room for prev year a tag
}
.date_selector .next {
left: 20px; // Was 5px;. changed to make room for next year a tag
}
Add these lines: // to position the next and prev year a tags.
.date_selector .yearprev {
left: 5px;
}
.date_selector .yearnext {
right: 5px;
}
date_input.js
line 53:
var monthNav = $('
').append(
$('«').click(this.prevYear),
" ", // add the previous year a tag to the nav
$('').click(this.prevMonth),
" ", this.monthNameSpan, " ",
$('').click(this.nextMonth),
" ", // add the next year a tag to the nav
$('»').click(this.nextYear)
);
3 New functions.
line 196:
moveYearBy: function(amount) {
this.selectMonth(new Date(this.currentMonth.setYear(this.currentMonth.getFullYear() + amount)));
},
prevYear: function(){
this.moveYearBy(-1);
return false;
},
nextYear: function(){
this.moveYearBy(1);
return false;
},
add "prevYear" and "nextYear" functions so they can be used on the a tags
Line 38:
this.bindMethodsToObj("show", "hide", "hideIfClickOutside", "selectDate", "prevMonth", "nextMonth","prevYear","nextYear");
Bug(and fix) when using the date_input field in a template (including the initialize command) if you the template in multiple times, the multiple initializers would each make a calendar for each one (so 2 fields would result in 4 calendars, and you'd have to click twice for the two calendars to go away)
add intialized class to date_inputs that have been initialized (end of file) around line ~285:
$.fn.date_input = function(opts) {
this.addClass('initialized'); //Added class initialized to inputs that have been initialized
return this.each(function() { new DateInput(this, opts);});
};
$.date_input = { initialize: function(opts) {
$("input.date_input:not(.initialized)").date_input(opts); // search for date_inputs that haven't been initialized alread.
} };
})(jQuery); // End localisation of the $ function
Thank you for reviewing these changes!

Comments
#1