CODEWITHSUNDEEP
javascripthtmljsdatepick
Roy Hinkley
Roy Hinkley

Reputation: 10641

How to display year selection control with jsDatePick

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

enter image description here

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

enter image description here

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.

Upvotes: 2

Views: 477

Answers (2)

Ahmed Amin Shahin
Ahmed Amin Shahin

Reputation: 1145

$('.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

Upvotes: 0

Andrew L
Andrew L

Reputation: 5486

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>

Upvotes: 1

Related Questions