如何将 jQuery 日期选择器转换为仅选择月份和年份？

Posted 2023-03-30

【中文标题】如何将 jQuery 日期选择器转换为仅选择月份和年份？

【英文标题】：How to convert jQuery date picker to select only month and year?

【发布时间】：2013-12-27 05:56:59

【问题描述】：

我尝试使用日期格式，它工作但也显示日期。我正在尝试一种仅选择月份和年份的方法

我写了代码，

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
   $(function() 
       $( "#datepicker" ).datepicker(dateFormat: 'MM yy');
   );
</script>
<input type="text" id="datepicker">

【问题讨论】：

在***.com/questions/2208480/…上找到这个jsfiddle.net/bopperben/DBpJe

Set date of jQuery UI Datepicker in "MM yy" format 的可能副本

【参考方案1】：

你的答案就在这里。

http://jsfiddle.net/bopperben/DBpJe/

$(function() 
$('.date-picker').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));
    
);
);

从他的帖子中感谢 nitin...jQuery UI DatePicker to show month year only

【讨论】：

这只是 nitin 提供的链接的复制和粘贴，请参阅***.com/questions/2208480/…

此解决方案的问题是，当您需要两个日期选择器时，一个显示所有日期，另一个仅显示年月组合，将覆盖所有日期选择器样式。

【参考方案2】：

这是我为创建下拉列表而不是使用日期选择器所做的。只需要 jQuery。

html：

 <select class="form-control" id="yearMonthInput"></select>

javascript代码：

var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

    for (i = new Date().getFullYear() ; i > 2008; i--) 
        $.each(months, function (index, value) 
            $('#yearMonthInput').append($('<option />').val(index + "_" + i).html(value + " " + i));
        );                
    

而且是这样看的：

【参考方案3】：

$(document).ready(function() 
    $('#txtDate').datepicker(
    changeMonth: true,
    changeYear: true,
    dateFormat: 'MM yy',
    onClose: function() 
    var iMonth = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
    var iYear = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
    $(this).datepicker('setDate', new Date(iYear, iMonth, 1));
    ,
    beforeShow: function() 
    if ((selDate = $(this).val()).length > 0)
    
        iYear = selDate.substring(selDate.length - 4, selDate.length);   
        iMonth = jQuery.inArray(selDate.substring(0, selDate.length - 5),
        $(this).datepicker('option', 'monthNames'));
        $(this).datepicker('option', 'defaultDate', new Date(iYear, iMonth, 1));
        $(this).datepicker('setDate', new Date(iYear, iMonth, 1));
   
 
);

);​

【讨论】：

对我来说缺少一块拼图...日期选择器会更新，但是当我再次打开它时，它不喜欢我的“MM yy”格式，并且会默认为今天的月/年。感谢自定义 beforeShow 功能！