How to show only years in the view of datepicker?

Question

when I click on textbox of date then datepicker will be open and it has year, month, and date view.

I just wanted year view to be shown that I could only select year not the month and date.

I am using bootstrap datepicker.

my code

<input type='text'
      class='form-control white-bg pointer-cursor'
      id="holiday_year"
      datepicker-popup=' yyyy'
      datepicker-month=hide
      ng-model='weekly_holiday.holiday_year'
      is-open='$holiday_year_open'
      ng-click='$holiday_year_open=true'
      ng-readonly='true'
      date-validator/>

tell me addition to this and what I want to do in controller.

There's another thread with similar question: http://stackoverflow.com/questions/6799092/jquery-datepicker-only-day-and-month — Jobst, Apr 22 '15 at 06:39

Suchit kumar · Answer 1 · 2015-04-22T07:40:15.540

1

to select only year you can use:

$(function() { 
    $("#datepicker").datepicker({ dateFormat: 'yy' });
});

main source of demo:here

EDIT: to display only year:

$(function() {
    $('.date-picker-year').datepicker({
        changeYear: true,
        showButtonPanel: true,
        dateFormat: 'yy',
        onClose: function(dateText, inst) { 
            var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
            $(this).datepicker('setDate', new Date(year, 1));
        }
    });
 $(".date-picker-year").focus(function () {
        $(".ui-datepicker-month").hide();
    });
});

.ui-datepicker-calendar { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<input type="text" name="txtFromYear" id="txtYear" class="date-picker-year"/>

edited Apr 22 '15 at 07:40

answered Apr 22 '15 at 06:36

Suchit kumar

11,809
3
22
44

yeah i retrieve only year, but i am asking about the view of datepicker, that when i click on textbox then only year has to show directly – Sanket Apr 22 '15 at 06:39
it shows all year , month and day view. i edit question with my datepicker, tell me modification in that one @SuchitKumar – Sanket Apr 22 '15 at 11:23
try adding this css `.ui-datepicker-calendar { display: none; } ` – Suchit kumar Apr 22 '15 at 12:56

score 0 · Answer 2 · answered Jul 17 '20 at 11:27

0

for future devs:


          $(x).datepicker({
                format: 'yyyy',
                todayHighlight: true,
                autoclose: true,
                minViewMode: 2
            });

answered Jul 17 '20 at 11:27

rakesh shrestha

1,335
19
37

score 0 · Answer 3 · answered Sep 22 '20 at 14:28

The following options worked for me: yearFirst and startView 2 for year (0 is day, 1 is month):

        $('input#year').datepicker({
            yearFirst: true,
            startView: 2,
            format: 'yyyy',
            todayHighlight: true,
            autoHide: true,
            pick: function (e) {
                e.preventDefault();
                $(this).val($(this).datepicker('getDate', true));
            }
        });

score 0 · Answer 4 · edited Feb 17 '21 at 09:19

0

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

edited Feb 17 '21 at 09:19

Dharman

30,962
25
85
135

answered Feb 17 '21 at 09:13

manikandan

677
2
8
19

How to show only years in the view of datepicker?

4 Answers4