Materialize: Date Picker: year selector should appear before the month selector

[boustanihani]

Consider: http://amsul.ca/pickadate.js/date/#selectors

When selectYears is truthy, the year selector should appear before the month selector.

Check: https://github.com/amsul/pickadate.js/issues/384

[Dogfalo]

What do you mean should? This is a restyle so I don't see why the order matters?

[boustanihani]

Suppose you want to allow ages >= 18 and ask the user to input their birthday:

$('.datepicker').pickadate({
    format: 'dd.mm.yyyy',
    selectYears: 99,
    selectMonths: true,
    max: moment().year(moment().year() - 18).toDate(),
});

It is confusing because if a user tries to select his month first he may not be able to because some month maybe disabled... By positioning the year selector to the left this logically means that the year should be selected first...

Also check: https://github.com/amsul/pickadate.js/issues/384#issue-30706996
We keep running into issues with users where the ui is confusing. When we have "max:true" and some of the months are greyed out it is confusing to the user having to change the year first to select the month...

[Willibaur]

Hi all,
is there any update about this issue, I've read the API Docs about changing positions between months and years with no success, placing selectYears: true before selectMonths but it does not work,
Thanks you very much

[animeshsinghweb]

any update yet?

[animeshsinghweb]

I did a little tweak in my CSS which worked for me.

.picker__select--month.browser-default {
    float: right;
    margin-right: 2em;
}

Here is a live demo: http://jsbin.com/darewal/edit?css,output

Note

If the page is having more than one pickadate.js it would make the whole thing to appear like this, so if you want only a specific pickadate to look like this, then you need can define another class for selectMonth and selectYear using klass while initialising pickadate, and use that class in css to change. 👍

[Dogfalo]

An option for this has been added in 1.0