Date Picker: year selector should appear before the month selector

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

[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…

[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. 👍