jQuery UI DatePicker仅显示年份

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

Answer 1

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

工作演示

Answer 2

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

HTML

  Start Year:   

jQuery的

Answer 3

在2018年，

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

Answer 4

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

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

Answer 5

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

添加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; } 

工作演示

Answer 6

将此代码用于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(); }); }); 

Answer 7

检查这个jquery 日历只显示年和月

或类似的东西

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

Answer 8

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

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

CSS

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

DEMO

Answer 9

            
 
 Select Year   
 
 
    
 
 
 
 
 
   

//将上面给出的html粘贴到.html文件中，然后将给定的jquery代码粘贴到.js文件＃中，您可以使用自定义jquery，html和css年份选择器。

  $(document).ready(function(){ // initial value of the start year for the dynamic binding of the picker. var startRange = 2000; // given the previous sixteen years from the current start year. $(".btnPrev").click(function(){ endRange = startRange; startRange = startRange - 16; $("#yearBetween").text(''); // finding the current div var container = event.currentTarget.nextElementSibling.parentElement.nextElementSibling.nextElementSibling; // find the values between the years from the textbox in year picker. createButtons(container); //bind the click function for the dynamically created buttons. bindButtons(); var rangeValues = startRange+ " - "+(endRange-1) ; $("#yearBetween").val(rangeValues); }); // given the next sixteen years from the current end year. $(".btnNext").click(function(){ startRange = endRange; endRange = endRange + 16; //clearing the cuurent values of the picker $("#yearBetween").text(''); // finding the current div var container = event.currentTarget.parentElement.nextElementSibling.nextElementSibling; createButtons(container); //bind the click function for the dynamically created buttons. bindButtons(); // find the values between the years from the textbox in year picker. var rangeValues = startRange+ " - "+(endRange-1) ; // writes the value in textbox shows above the button div. $("#yearBetween").val(rangeValues); }); $("#txtYear1,#yearImage").click(function(){ debugger; $("#divYear1").toggle(); endRange = startRange + 16; //clearing the cuurent values of the picker $("#yearBetween").text(''); var container = "#yearContainer"; // Creating the button for the years in yearpicker. createButtons(container); //bind the click function for the dynamically created buttons. bindButtons(); // find the values between the years from the textbox in year picker. var rangeValues = startRange+ " - "+(endRange-1) ; // writes the value in textbox shows above the button div. $("#yearBetween").val(rangeValues); }); // binding the button for the each dynamically created buttons. function bindButtons(){ $(".button").bind('click', function(evt) { debugger; $(this).css("background","#ccc"); $("#txtYear1").val($(this).val()); $('#divYear1').hide(); }); } // created the button for the each dynamically created buttons. function createButtons(container){ var count=0; $(container).empty(); for(var i= startRange; i< endRange; i++) { var btn = ""; count = count + 1; $(container).append(btn); if(count==4) { $(container).append("
"); count = 0; } } } $("#yearBetween").focusout(function(){ var yearValue = $("#yearBetween").val().split("-"); startRange = parseInt(yearValue[0].trim()); if(startRange>999 && startRange < 9985){ endRange = startRange + 16; $("#yearBetween").text(''); var container = "#yearContainer"; createButtons(container); bindButtons(); var rangeValues = startRange+ " - "+(endRange-1) ; $("#yearBetween").val(rangeValues); } else { $("#yearBetween").focus(); } }); $("#yearBetween, #txtYear1").keydown(function (e) { // Allow: backspace, delete, tab, escape, enter and . if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 || // Allow: Ctrl+A, Command+A (e.keyCode === 65 && (e.ctrlKey === true || e.metaKey === true)) || // Allow: home, end, left, right, down, up (e.keyCode >= 35 && e.keyCode <= 40)) { // let it happen, don't do anything return; } // Ensure that it is a number and stop the keypress if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) { e.preventDefault(); } }); }); 

Answer 10

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

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