Question

我浏览了这篇帖子jQuery UI DatePicker to show month year only，这对我来说非常有帮助，以便根据我的情况破解日期时间选择器UI。

但是由于我在同一个表单上有几个日期时间选择器，所以会发生这种情况。 css display:none旨在“隐藏”不显示的日子。但是，如果我在同一个表单上有几个日期时间选择器，但只有一个我想制作一个月份选择器，我该如何实现呢？使用thw css，它会使所有日期时间日历UI的所有日子都消失，因为css将更改.ui-datepicker-calendar的属性。欢迎任何建议。

Answer 1

目前，datepicker每页只创建一个所有'datepicker'输入共享的元素，因此为什么链接问题的答案不起作用。 beforeShow事件不允许使用.addClass（）或.css（）编辑datepicker元素（因为元素结构在显示时会从datepicker脚本中刷新。）

为了解决这个问题，我发现输入元素的焦点事件似乎在显示datepicker后运行代码。这是一个令人沮丧的问题的简单解决方法。

这是我的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
    <link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css">
<script type="text/javascript">
$(function() {
    $('.month-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));
        },
        beforeShow : function(input, inst) {
            if ((datestr = $(this).val()).length > 0) {
                year = datestr.substring(datestr.length-4, datestr.length);
                month = jQuery.inArray(datestr.substring(0, datestr.length-5), $(this).datepicker('option', 'monthNames'));
                $(this).datepicker('option', 'defaultDate', new Date(year, month, 1));
                $(this).datepicker('setDate', new Date(year, month, 1));
            }
        }
    });
    $('.date-picker').datepicker();
    $('.month-picker').focus(function () {
        $('.ui-datepicker-calendar').addClass('hideDates');
    });
});
</script>
<style>
.hideDates {
    display: none;
}
</style>
</head>
<body>
    <label for="startDate">Date:</label>
    <input name="startDate" id="startDate" class="date-picker" />
    <label for="endMonth">End Month:</label>
    <input name="endMonth" id="endMonth" class="month-picker" />
</body>
</html>

Answer 2

我使用了Ben发布的稍微不同的代码版本。我没有依赖焦点事件而是添加了

inst.dpDiv.addClass('monthonly');

进入beforeShow方法和

inst.dpDiv.removeClass('monthonly');

进入onClose。这会添加和删除所有datepicker小部件使用的公共div上的类。然后可以使用

在css中定位日历日历div

.monthonly#ui-datepicker-div .ui-datepicker-calendar
{
    display: none;
}

Answer 3

以前的解决方案不适用于不同的格式。 setDate也不会在beforeShow中做任何事情。正确的方法是：

beforeShow: function(input, inst) {
    var dateString = $(this).val();
    var options = new Object();
    if (dateString.length > 0) {
        options.defaultDate = $.datepicker.parseDate("dd-" + $(this).datepicker("option", "dateFormat"), "01-" + dateString);
    }
    inst.dpDiv.addClass("ui-monthpicker");
    return options;
},
onClose: function(dateText, inst) {
    var month = inst.dpDiv.find(".ui-datepicker-month").val();
    var year = inst.dpDiv.find(".ui-datepicker-year").val();
    $(this).datepicker("setDate", new Date(year, month, 1));
    inst.dpDiv.removeClass("ui-monthpicker");
}

我使用了来自datepicker的parseDate来处理不同的日期格式，并将字段作为defaultDate选项从字段返回。

必需的CSS：

#ui-datepicker-div.ui-monthpicker {
    padding: 0.2em;
}
#ui-datepicker-div.ui-monthpicker .ui-datepicker-calendar {
    display: none;
}

Answer 4

我还有另一种解决方案，基于上述内容并做了一些改进。在我的HTML中，我通过添加这个来隐藏日期选择器，因为我在页面上只有一个：

<style>
    .ui-datepicker-calendar {
        display: none;
    }
</style>

然后我初始化了我的datepicker，就像其他人已经这样做了一样，并在onChangeMonthYear事件中添加了一些代码：

$n(this).datepicker({
    defaultDate: 0,
    changeMonth: true,
    changeYear: true,
    onChangeMonthYear: function(year, month, inst) {
        $(this).datepicker('setDate', new Date(year, month - 1, 1));
    }
});

注意：

月 - 1

如果你不添加这个，你会得到一个堆栈溢出，因为这个函数收到一个基于1的索引月，但setDate使用一个正常的0月。

Answer 5

我做了类似的事情，但是制作了一个独立的'版本'的datepicker脚本并称之为monthpicker，拥有它自己的CSS选择器和CSS文件。这意味着您可以在同一页面上使用其中一个或两个。

Answer 6

Ben的解决方案完美无缺，只做了一个小改动，我用onChangeMonthYear而不是onClose：

onChangeMonthYear: function(year, month, inst) {
  var date = new Date(year, month - 1, 1);
  $(this).val($.datepicker.formatDate(format, date));
  $(this).datepicker('setDate', date);
}

Answer 7

这code对我来说是完美无缺的：

$(document).ready(function()
{   
    $(".monthPicker").datepicker({
        dateFormat: 'MM yy,
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,

        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', new Date(year, month, 1)));
        }
    });

    $(".monthPicker").focus(function () {
        $(".ui-datepicker-calendar").hide();
        $("#ui-datepicker-div").position({
            my: "center top",
            at: "center bottom",
            of: $(this)
        });
    });
});

<label for="month">Month: </label>
<input type="text" id="month" name="month" class="monthPicker" />

JQuery日期时间选择器 - 只需选择月份和年份

7 个答案: