Jquery datepicker - year then month then day

Question

I am trying to use datepicker by http://foundation-datepicker.peterbeno.com/example.html to get the user to select a date.

The datepicker has a really nice year-picker and month-picker format instead of using the arrows, it has a nice selector.

year-picker

the only way to access the year picker I can tell is to click on the year at the top, however I want this to show first on default. once the user selects the year, then allow them to select the month using the month-picker

[month-picker][2] - 2: i.stack.imgur.com/CiIgU.png (i am unable to post more than 2 links currently as I am new to stackoverflow but here is the intended screenshot - same as below...)

I want them to first select the year, then the month, then day. However all the examples I see I don't see how to set all three beginning with year.

then finally the default day picker

[day-picker][3] - 3: i.stack.imgur.com/p3re2.png

Alternatively if the above is not possible could allow the user to select 3 separate times with 3 different datepickers - one for year, month, and day. I can get the month-picker only working with the following (but not the year picker):

<div class="row collapse date" id="dpMonths" data-date-format="mm/yyyy" data-start-view="year" data-min-view="year" style="max-width:200px;">
<div class="small-2 columns">   
    <span class="prefix"><i class="fa fa-calendar"></i></span>
</div>
<div class="small-10 columns">
    <input size="16" type="text" value="02/2012" readonly>  
</div>

<script>
$(function(){
  $('#dpMonths').fdatepicker();
});
</script>

Is this possible?

There is tons of examples on this page, but if i try modify any of them it either breaks or doesnt do what I need it to do...

Kind regards, Dave

Dave Sev Dave Sev · Accepted Answer · 2016-12-07T06:54:18

The examples on the website above are not correct. I have managed to find the answer in one of the commits after much searching. Hopefully this answer may assist someone else.

$('.monthpicker').fdatepicker({
format : 'mm/yyyy',
  startView : 1,
  minView : 1
});

The views are numbered go up so 4 = year etc.

To select date going through year -> month -> day:

$('.monthpicker').fdatepicker({
    format : 'mm/yyyy',
      startView : 4,
      minView : 2
    });

Jquery datepicker - year then month then day

1 Answers