Question

I am using mobiscroll on a website as a method for date input. The scroller is initiated like this:

$(function(){
var curr = new Date().getFullYear();
$('#date').scroller({
    preset: 'date',
    height: 30,
    width: 20,
    theme: 'default',
    display: 'inline',
    mode: 'scroller',
    dateOrder: 'MD ddyy',
    startYear: curr,
    endYear: curr + 3,
    minDate: new Date(),
    showLabel: false,
    onChange:function(){ upDATE(); }
});    
$('#date').scroller('setValue', [11,9,'2012']);

As you can see, it is initiated with a minimum date (today). My problem occurs when the user attempts to scroll from December of 2012 to January. You would expect the year to scroll ahead to January of 2013, but it doesn’t. Instead, it goes back to the first valid date in the current year. This is not very intuitive.

Does anyone know how to make the scroller behave as expected?

Answer 1

If I understand correctly, you want to scroll the months… and once the month gets to December and then you attempt to scroll past December it should switch to January and increment the year? If that is the case then I do not think Mobiscroll works that way. The way it appears to work is that you independently pick a month, day and year.

---

If I am way off on understanding your question then I would suggest setting a minDate and a maxDate and see if that helps (note that the months are zero indexed):

 minDate: new Date(2000, 0, 1),
 maxDate: new Date(2020, 11, 31),

Also, I think it defaults to the actual current year already so I would remove startYear unless you are wanting a different year.

---

Edit:
You could probably use the OnChange event with the SetValue method to increment the year if the previous month was December and the new month is January and decrement the year if the previous month was January and the new month is December.. etc. See http://docs.mobiscroll.com/mobiscroll-core. It does seem like a lot of extra work and overhead though.