JQuery UI DatePicker только месяц и год проблема позиционирования CSS - PullRequest
Новая
       9

JQuery UI DatePicker только месяц и год проблема позиционирования CSS

5 голосов
/ 28 апреля 2011

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

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

1 Ответ

4 голосов
/ 28 апреля 2011

Вы можете манипулировать 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));
        }
    }
});
...