jquery UI datepicker только месяц и год проблема с позиционированием css

Я реализовал обсуждаемое здесь решение: JQuery Datetime picker - Нужно выбрать только месяц и год. и это работает хорошо. Единственная проблема, которую я нахожу, заключается в том, что когда средство выбора даты появляется над полем ввода (например, когда внизу недостаточно места), позиция средства выбора неверна (оно слишком высоко, оставляя зазор между средством выбора и вводом поле).

Предположительно, это связано с тем, что я динамически скрываю дни месяца в средстве выбора после, jquery вычисляет его высоту, поэтому он позиционируется так, как будто он все еще является полным средством выбора даты. У кого-нибудь есть идеи, как это исправить?


datepicker jquery css jquery-ui jquery-ui-datepicker
person benb    schedule 28.04.2011    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Вы можете манипулировать datepicker перед его отображением, но помните, что его необходимо сбросить, если на странице есть другие средства выбора даты, поскольку существует только 1 фактическое средство выбора даты <div>.

Я создал демонстрацию, которая может делать то, что вы хотите. Надеюсь, поможет.

HTML

Normal: <input type="text">
<p>No days: <input type="text" class="noDays"></p>

CSS

p {
    position:absolute;
    bottom:5px;
}

div.noDays table {
    display:none;
}

JavaScript (требуются jQuery и jQueryUI)

$('input').datepicker({
    showButtonPanel: true,
    changeMonth: true,
    changeYear: true,
    dateFormat:'MM yy',
    beforeShow: function(input, inst) {
        if ($(input).hasClass('noDays')) {
            $('#ui-datepicker-div').addClass('noDays');
        } else {
            $('#ui-datepicker-div').removeClass('noDays');
            $(this).datepicker('option', 'dateFormat', 'yy-mm-dd');
        }
    },
    onClose: function(dateText, inst) {
        if ($('#ui-datepicker-div').hasClass('noDays')) {
            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));
        }
    }
});
person andyb    schedule 28.04.2011
comment
Спасибо, Энди, ваш подход решил проблему. - person benb; 28.04.2011