How to Display year only Calendar?

Question

I am using Predefined bootstrap calendar in my page. Its working Properly, but for few text box I need to display year only calendar.

My Codes are

<!-- bootstrap datepicker -->
    <link rel="stylesheet" href="~/Content/adminlte/components/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css">


 <!-- bootstrap datepicker -->
    <script src="~/Content/adminlte/components/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script>

 <script>
        $(function () {

            $('#Date').datepicker({
                autoclose: true
            })
        })</script>

Design

  <label>Date</label>
  <div class="input-group date">
 <input type="text" class="form-control pull-right" id="Date">
 <div class="input-group-addon">
 <i class="fa fa-calendar"></i>
 </div>
 </div>

My datpicker with text box image as follows

Its working fine to pickup a date. But for few text box I need year only option as shown in image below

If I use code from some other stackoverflow answers or from this link code , it affect my date picker design and it also change the option for all text boxes to choose normal date also... Kindly help.. TIA.

Answer 1

use this config options :

$("#Date").datepicker({
    autoclose: true,
    format: "yyyy",
    viewMode: "years", 
    minViewMode: "years"
});

Answer 2

Look if you go to jquery page and searched for calender. They will tell you the properties for calender format and how to use them and thus you copy and paste thrm in your bootstrap calender since it will be the same. Regards.