Question

当我点击日期的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/>

告诉我除了这个以及我想在控制器中做什么。

Answer 1

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

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

演示的主要来源：here

编辑 仅显示年份：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

针对未来的开发者：


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

Answer 3

以下选项对我有用：yearFirst和year的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));
            }
        });

Answer 4

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

如何在datepicker视图中只显示年份？

4 个答案: