Javascript jQuery UI DatePicker 只显示年份

jQuery UI DatePicker to show year only

提问by Nutan

I am using jQuery datepicker to display calender.I want to know if I can use it to Display only 'Year'and not Complete Calender ??

我正在使用 jQuery datepicker 来显示日历。我想知道我是否可以使用它来仅显示“年份”而不是完整的日历？？

采纳答案by Talha

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

Style should be

风格应该是

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

working demo

工作演示

回答by Engr Zardari

**NOTE :**If anyone have objection that "why i have answered this Question now !" Because i tried all the answers of this post and got no any solution.So i tried my way and got Solution So i am Sharing to next comers****

** NOTE :**如果有人反对“为什么我现在回答这个问题！” 因为我尝试了这篇文章的所有答案，但没有任何解决方案。所以我尝试了我的方法并得到了解决方案所以我分享给下一个来者****

HTML

HTML

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

jQuery

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>

回答by Esteban Castro Sola

In 2018,

2018 年，

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

回答by change_is_necessity

Try this:
add in html following

试试这个：
在html中添加以下内容

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

Add in js file

在js文件中添加

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

Add in css

在css中添加

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

Working Demo

工作演示

回答by Ayman Elshehawy

You can use this bootstrap datepicker

您可以使用此引导程序日期选择器

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

"your-selector" you can use id(#your-selector) OR class(.your-selector).

“您的选择器”您可以使用 id(#your-selector) 或 class(.your-selector)。

回答by hazan kazim

use this code for jquery time picker.

将此代码用于 jquery 时间选择器。

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

回答by Rui Jarimba

You can use the dateFormat attribute for that, something like:

您可以为此使用 dateFormat 属性，例如：

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

回答by konstantc

I had the same problem and, after a day of research, I came up with this solution: http://jsfiddle.net/konstantc/4jkef3a1/

我遇到了同样的问题，经过一天的研究，我想出了这个解决方案：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>

I know this question is pretty old but I thought that my solution can be of use to others that encounter this problem. Hope it helps.

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

回答by rajesh kakawat

check this out jquery calendarto show only year and month

看看这个 jquery日历只显示年和月

or something like this

或类似的东西

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

回答by Sibu

Try this way it will hide the calendar and show year only

试试这种方式，它会隐藏日历并只显示年份

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

CSS

CSS

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

DEMO?

演示？