JQuery Datetime picker - нужно выбрать только месяц и год

Я просмотрел этот пост jQuery UI DatePicker, чтобы показать только месяц года, что очень полезно для меня, чтобы взломать пользовательский интерфейс выбора даты и времени в соответствии с моей ситуацией.

Но поскольку у меня есть несколько сборщиков данных в той же форме, это происходит. Css display:none стремится "скрыть" дни, которые не будут показаны. Но если у меня есть несколько сборщиков datetime в одной и той же форме, но только один, я хочу сделать один из них месяцпиккером, как я могу это достичь? С помощью thss css все дни на всем календарном календаре datetime исчезают, так как css изменит атрибут .ui-datepicker-calendar. Любые предложения приветствуются.

Ответы

Ответ 1

В настоящее время datepicker создает только один элемент на странице, который содержит все входы 'datepicker', поэтому почему ответ на связанный вопрос не работает. Событие beforeShow не позволяет редактировать элемент datepicker с .addClass() или .css() (поскольку структура элемента обновляется с datepicker script, когда он показывает.)

Чтобы обойти это, я обнаружил, что событие фокусировки для элемента ввода, похоже, запускает код после отображения даты. Это простой способ решения этой проблемы.

Вот мой код:

<!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>

Ответ 2

Я использовал немного другую версию кода, которую написал Бен. Вместо того, чтобы полагаться на событие фокусировки, я добавил

inst.dpDiv.addClass('monthonly');

в метод beforeShow и

inst.dpDiv.removeClass('monthonly');

в onClose. Это добавляет и удаляет класс в общем div, используемом всеми виджетами datepicker. Затем календарь календаря даты может быть нацелен на css, используя

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

Ответ 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");
}

Я использовал parseDate из datepicker для обработки разных форматов дат и даты возврата из поля в качестве параметра defaultDate.

Необходимый CSS:

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

Ответ 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.

Ответ 5

Я сделал что-то похожее на это, но сделал отдельную "версию" datepicker script и назвал его monthpicker, имея собственные CSS-селектора и CSS файл. Это означало, что вы можете использовать один или оба на одной странице.

Ответ 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);
}

Ответ 7

Этот код работает безукоризненно:

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