How to display year selection control with jsDatePick

Question

Working with the jsDatePick control, I want to display year selector controls like this example with the year selector controls visible >>:

But I can only get it to display with the month selector controls only:

My control is declared as such:

<div id="datepickerDOBWrapper" ><input type="text" id="datepickerDOB"></div>

and initialized with a closure:

$(function() {
     $("#datepickerDOB").datepicker();
});

I cannot find documentation that has the display options. This documentation does not help. Nor does this post that shows many options.

where did you find the example from the first image (with the year controls)? — Andrew Lohr, Sep 05 '18 at 15:58
This is what happens when you skip the coffee ;p, initializing plugin A reading the docs of plugin B. — Vinay, Sep 05 '18 at 16:20

score 1 · Accepted Answer · answered Sep 05 '18 at 16:15

I am not sure where you got $("#datepickerDOB").datepicker(); because it doesn't seem like that library uses that initialization.

Using the code from the jsDatePick repo you linked, the years come by default. Here is an example of how you should be initializing it:

Also there is really no CDN for this script, I would suggest downloading it and including it in your project. Or use a more supported date picker.

$(document).ready(function() {
  var calendar = new JsDatePick({
    useMode: 2,
    target: "datepickerDOBWrapper",
    dateFormat: "%d-%M-%Y"
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://rawgit.com/itamararjuan/jsdatepick/master/dist/jsDatePick_ltr.min.css" rel="stylesheet" />
<script src="https://rawgit.com/itamararjuan/jsdatepick/master/dist/jsDatePick.jquery.min.1.3.js"></script>

<div id="datepickerDOBWrapper"><input type="text" id="datepickerDOB"></div>

score 0 · Answer 2 · edited Jan 18 '19 at 19:17

$('.input-group.date').datepicker({format: "dd.mm.yyyy"});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <br />
  <div class="row">
    <div class='col-sm-3'>
      <div class="form-group">
        <div id="filterDate2">
          
          <!-- Datepicker as text field -->         
          <div class="input-group date" data-date-format="dd.mm.yyyy">
            <input  type="text" class="form-control" placeholder="dd.mm.yyyy">
            <div class="input-group-addon" >
              <span class="glyphicon glyphicon-th"></span>
            </div>
          </div>
          
        </div>    
      </div>
    </div>
  </div>
</div>

it will not run perfectly until you make new file called index.js and place this code in it

$('.input-group.date').datepicker({format: "dd.mm.yyyy"}); 

import jquery library

How to display year selection control with jsDatePick

2 Answers2