jQuery UI日期选择器仅显示年份

Question

我正在使用jQuery日期选择器来显示日历。我想知道是否可以使用它仅显示'年'而不是完整的日历？

- Nutan

---

你的意思是仅显示年份吗？ - Hkachhia

如果你只需要年份，为什么要使用日期选择器呢？只需显示一个文本框并进行一些客户端验证以验证年份即可。或者使用下拉菜单来选择年份。保持简单 :) - Rui Jarimba

最好使用下拉菜单。 - thecodejack

Answer 1

**注意 :**如果有人反对我现在回答这个问题！因为我尝试了这篇文章中的所有答案，都没有解决方法。所以我用自己的方式尝试并找到了解决方案，现在分享给下一个遇到类似问题的人。

HTML

<label for="startYear"> Start Year: </label>
  <input name="startYear" id="startYear" class="date-picker-year" />   

jQuery

 <script type="text/javascript">
        $(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();
            });
        });

</script>

- Engr Saddam Zardari

Answer 2

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

风格应该是

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

演示链接

- Talha

---

那是什么可怕的小提琴？ - Chazt3n

Answer 3

2018年，

$('#datepicker').datepicker({
    format: "yyyy",
    weekStart: 1,
    orientation: "bottom",
    language: "{{ app.request.locale }}",
    keyboardNavigation: false,
    viewMode: "years",
    minViewMode: "years"
});

- Esteban Castro Sola

Answer 4

您可以使用这个 bootstrap日期选择器。

$("your-selector").datepicker({
    format: "yyyy",
    viewMode: "years", 
    minViewMode: "years"
});

"

"your-selector" 可以使用id(#your-selector) 或者 class(.your-selector)。

"

- Ayman Elshehawy

---

同时，您可以根据需要将 #datapicker id 更改为 .datapicker 类。 - Ayman Elshehawy

是的，您可以使用类(class)代替id。 - Ayman Elshehawy

Answer 5

我也遇到了同样的问题，在经过一天的研究后，我找到了这个解决方案：http://jsfiddle.net/konstantc/4jkef3a1/

// *** (month and year only) ***
$(function() { 
  $('#datepicker1').datepicker( {
    yearRange: "c-100:c",
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,
    closeText:'Select',
    currentText: 'This year',
    onClose: function(dateText, inst) {
      var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
      var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
      $(this).val($.datepicker.formatDate('MM yy (M y) (mm/y)', new Date(year, month, 1)));
    }
  }).focus(function () {
    $(".ui-datepicker-calendar").hide();
    $(".ui-datepicker-current").hide();
    $("#ui-datepicker-div").position({
      my: "left top",
      at: "left bottom",
      of: $(this)
    });
  }).attr("readonly", false);
});
// --------------------------------



// *** (year only) ***
$(function() { 
  $('#datepicker2').datepicker( {
    yearRange: "c-100:c",
    changeMonth: false,
    changeYear: true,
    showButtonPanel: true,
    closeText:'Select',
    currentText: 'This year',
    onClose: function(dateText, inst) {
      var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
      $(this).val($.datepicker.formatDate('yy', new Date(year, 1, 1)));
    }
  }).focus(function () {
    $(".ui-datepicker-month").hide();
    $(".ui-datepicker-calendar").hide();
    $(".ui-datepicker-current").hide();
    $(".ui-datepicker-prev").hide();
    $(".ui-datepicker-next").hide();
    $("#ui-datepicker-div").position({
      my: "left top",
      at: "left bottom",
      of: $(this)
    });
  }).attr("readonly", false);
});
// --------------------------------



// *** (year only, no controls) ***
$(function() { 
  $('#datepicker3').datepicker( {
    dateFormat: "yy",
    yearRange: "c-100:c",
    changeMonth: false,
    changeYear: true,
    showButtonPanel: false,
    closeText:'Select',
    currentText: 'This year',
    onClose: function(dateText, inst) {
      var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
      $(this).val($.datepicker.formatDate('yy', new Date(year, 1, 1)));
    },
    onChangeMonthYear : function () {
      $(this).datepicker( "hide" );
    }
  }).focus(function () {
    $(".ui-datepicker-month").hide();
    $(".ui-datepicker-calendar").hide();
    $(".ui-datepicker-current").hide();
    $(".ui-datepicker-prev").hide();
    $(".ui-datepicker-next").hide();
    $("#ui-datepicker-div").position({
      my: "left top",
      at: "left bottom",
      of: $(this)
    });
  }).attr("readonly", false);
});
// --------------------------------

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />

<div class="container">

  <h2 class="font-weight-light text-lg-left mt-4 mb-0"><b>jQuery UI Datepicker</b> custom select</h2>

  <hr class="mt-2 mb-3">
  <div class="row text-lg-left">
    <div class="col-12">

      <form>

        <div class="form-label-group">
        <label for="datepicker1">(month and year only : <code>id="datepicker1"</code> )</label>
          <input type="text" class="form-control" id="datepicker1" 
                 placeholder="(month and year only)" />
        </div>

        <hr />

        <div class="form-label-group">
        <label for="datepicker2">(year only : <code>input id="datepicker2"</code> )</label>
          <input type="text" class="form-control" id="datepicker2" 
                 placeholder="(year only)" />
        </div>

        <hr />

        <div class="form-label-group">
        <label for="datepicker3">(year only, no controls : <code>input id="datepicker3"</code> )</label>
          <input type="text" class="form-control" id="datepicker3" 
                 placeholder="(year only, no controls)" />
        </div>

      </form>

    </div>
  </div>

</div>

我知道这个问题已经很老了，但我认为我的解决方案可能对其他遇到此问题的人有用。希望能帮到你。

- konstantc

---

这个解决方案对我有效，但是存在一个bug，即focus()事件与datepicker小部件的显示发生冲突，从而阻止了hide()的工作。为了解决这个问题，你应该在beforeShow函数中添加$(input).blur()。 - Creek

Answer 6

use this code for jquery time picker.

$(function() { 
   $('#datepicker1').datepicker( {
        changeMonth: false,
        changeYear: true,
        showButtonPanel: false,
        dateFormat: 'yy',
        onClose: function(dateText, inst) { 
              $(this).datepicker('setDate', new Date('2017'));
        }
    }).focus(function () {
                $(".ui-datepicker-month").hide();
                $(".ui-datepicker-calendar").hide();
            });
});

<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="https://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />

<input type="text" id="datepicker1"/>

- hazan kazim

Answer 7

尝试这样做：
在HTML中添加以下内容

<input type="text" id="datepicker"/>

添加js文件

$(function() {
   $( "#datepicker" ).datepicker({dateFormat: 'yy',  changeYear: true,  changeMonth: false});
});

在CSS中添加

.ui-datepicker-calendar {
       display: none;
    }
    .ui-datepicker-month {
       display: none;
    }
    .ui-datepicker-prev{
       display: none;
    }
    .ui-datepicker-next{
       display: none;
    }

Working Demo

- change_is_necessity

Answer 8

尝试使用这段代码，它对我起作用了。

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

我希望它对你也能有神奇的作用。

- Akhilesh Kumar

Answer 9

您可以使用dateFormat属性来实现，例如：

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

- Rui Jarimba

---

这将仅选择年份，但如何从日期选择器中删除日历和月份？ - Nutan

好的，我误解了你的问题，现在我明白了。 - Rui Jarimba

如果你只需要年份，为什么还需要一个日期选择器呢？只需显示一个文本框并进行一些客户端验证来验证年份。或者使用下拉菜单来选择年份。 - Rui Jarimba

@RuiJarimba 在我的情况下，我有300年可供选择 - 不幸的是，在Mac上，下拉菜单没有滚动条功能，所以要到最后需要很长时间！ - Matthew Wilcoxson

Answer 10

看看这个 jQuery 日历，只显示年份和月份

或者类似这样的东西

$("#datepicker").datepicker( "option", "dateFormat", "yy" );​

- rajesh kakawat