jQuery UI - Datepicker - 隐藏年份答案

【问题标题】：jQuery UI - Datepicker - Hide yearjQuery UI - Datepicker - 隐藏年份
【发布时间】：2010-04-23 11:14:30
【问题描述】：

我正在使用 jQuery UI 1.8，我想在弹出窗口和文本框中对用户隐藏年份。本质上，我希望用户只选择日和月，而不是选择日、月和年。

在文本框中隐藏年份很容易，下面显示的代码将做到这一点。我不知道如何从弹出窗口中隐藏年份 - 所以它会说“4 月”而不是“2010 年 4 月”。

$(function() {
        $("#beginDateRange").datepicker({ dateFormat: 'mm/dd' });
});

<input type="text" name="beginDateRange" id="beginDateRange" />

任何帮助将不胜感激。

【问题讨论】：

标签： jquery-ui

【解决方案1】：

我在寻找一个好的方法时遇到了这个线程，这就是我想出的。

在我的css中我有一个

.BirthdayDatePicker .ui-datepicker-year
{
 display:none;   
}

这就是我设置我不想显示年份的日期选择器的方式：

$('.DateTextBox.NoYear').datepicker({
            beforeShow: function (input, inst) {

                inst.dpDiv.addClass('BirthdayDatePicker');
            },
            onClose: function(dateText, inst){
                inst.dpDiv.removeClass('BirthdayDatePicker');
            }
        });

基本上我在它显示之前添加类，并在隐藏它时将其移除，这样页面上的其他日期选择器就不会受到它的影响。

以防万一任何人只需要在页面上的特定选择器上隐藏年份，并且不想弄乱 jQuery 的内部结构。

【讨论】：

优秀。正是我所追求的。
谢谢帕特里夏！正是我需要的！

【解决方案2】：

我认为这个选项不会暴露在 api 中。我相信最简单的方法是更改样式表。将 ui-datepicker-year 类更改为 display: none 另一种选择是编辑源代码，使其根本不渲染，为此，您可以删除这部分代码：

// year selection
if (secondary || !changeYear)
    html += '<span class="ui-datepicker-year">' + drawYear + '</span>';
else {
    // determine range of years to display
    var years = this._get(inst, 'yearRange').split(':');
    var thisYear = new Date().getFullYear();
    var determineYear = function(value) {
        var year = (value.match(/c[+-].*/) ? drawYear + parseInt(value.substring(1), 10) :
    (value.match(/[+-].*/) ? thisYear + parseInt(value, 10) :
    parseInt(value, 10)));
    return (isNaN(year) ? thisYear : year);
    };
    var year = determineYear(years[0]);
    var endYear = Math.max(year, determineYear(years[1] || ''));
    year = (minDate ? Math.max(year, minDate.getFullYear()) : year);
    endYear = (maxDate ? Math.min(endYear, maxDate.getFullYear()) : endYear);
    html += '<select class="ui-datepicker-year" ' +
        'onchange="DP_jQuery_' + dpuuid + '.datepicker._selectMonthYear(\'#' + inst.id + '\', this, \'Y\');" ' +
        'onclick="DP_jQuery_' + dpuuid + '.datepicker._clickMonthYear(\'#' + inst.id + '\');"' +
        '>';
    for (; year <= endYear; year++) {
        html += '<option value="' + year + '"' +
            (year == drawYear ? ' selected="selected"' : '') +
            '>' + year + '</option>';
    }
    html += '</select>';
}

我没有尝试删除代码，但它应该可以工作。我确实尝试使用 css 隐藏它并且确实有效（无论如何在 Firefox 中:)）

HTH

【讨论】：

如果我希望某些日期选择器有年份而其他日期选择器没有年份怎么办？
在这种情况下，我会尝试扩展插件，提供一个您可以设置的选项，然后如果（辅助 || ！changeYear）在此行附近的某个位置使用该选项。另一种方法是使用现有的日期选择器和您自己的版本，并删除年份的代码，在这种情况下，您需要重命名您的黑客小部件以具有不同的名称，我没有尝试过，但它可能是这个属性：var PROP_NAME = '日期选择器';

【解决方案3】：

非常老的问题，但我只需要自己做这个，这是一种可能对某人有用的替代方法；一个快速而肮脏的修复，可以让您的其他日期选择器继续工作，前提是您不需要 changeYear 功能是在您不希望显示年份的日期选择器上将 changeYear 设置为 true，然后添加 CSS ：

select.ui-datepicker-year { display:none }

【讨论】：

【解决方案4】：

VIKSME Hide year http://jsfiddle.net/tocv/e5cvA/

CSS

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

HTML

    <div id="datepicker"></div>

</div>

JavaScript

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

【讨论】：

【解决方案5】：

属性

changeYear:false;

select.ui-datepicker-year { display:none }

有时将下拉菜单更改为 span.<span></span> 所以添加这个 css 代码。

span.ui-datepicker-year { display:none }

【讨论】：