CODEWITHSUNDEEP
twitter-bootstrapdatepicker
Sanket
Sanket

Reputation: 745

How to show only years in the view of datepicker?

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.

Upvotes: 0

Views: 10920

Answers (4)

manikandan
manikandan

Reputation: 815

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

Upvotes: 0

Mariana Marica
Mariana Marica

Reputation: 151

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));
            }
        });

Upvotes: 1

rakesh shrestha
rakesh shrestha

Reputation: 1455

for future devs:


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

Upvotes: 0

Suchit kumar
Suchit kumar

Reputation: 11859

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"/>

Upvotes: 1

Related Questions