如何在日期选择器的视图中只显示年份？答案

【问题标题】：How to show only years in the view of datepicker?如何在日期选择器的视图中只显示年份？
【发布时间】：2015-04-22 06:29:42
【问题描述】：

当我点击日期的textbox 时，datepicker 将打开，它具有年、月和日期视图。

我只想显示年份视图，我只能选择年份而不是月份和日期。

我正在使用bootstrap datepicker。

我的代码

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

告诉我对此的补充以及我想在控制器中做什么。

【问题讨论】：

如果你有喜欢 plunker、JS fiddle 的分享代码链接
还有一个类似问题的帖子：stackoverflow.com/questions/6799092/…

标签： twitter-bootstrap datepicker

【解决方案1】：

只选择您可以使用的年份：

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

demo主要来源：here

编辑： 只显示年份：

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

【讨论】：

是的，我只检索年份，但我问的是日期选择器的视图，当我点击文本框时，只有年份必须直接显示
它显示所有年、月和日视图。我用我的日期选择器编辑问题，告诉我修改那个@SuchitKumar
尝试添加这个 css .ui-datepicker-calendar { display: none; }

【解决方案2】：

对于未来的开发者：


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

【讨论】：

【解决方案3】：

以下选项对我有用：yearFirst 和 startView 2 表示年份（0 是日，1 是月）：

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

【讨论】：

【解决方案4】：

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

【讨论】：