it-swarm.com.ru

Как установить размер и положение jquery Выбор даты Значок календаря Значок запуска

я использую Jquery Date Picker, значок запуска календаря рядом с текстовым полем по умолчанию находится сверху. Я хочу установить размер изображения (высоту), такой же, как высота текстового поля, пожалуйста, дайте мне несколько советов.

$(#textbox1).datepicker({
    showOn: "button",
    buttonImage: "calendar_1.png",
    buttonImageOnly: true
)};
22
UMAIR ALI

Осмотрев элемент с помощью firebug , я получил это:

<img class="ui-datepicker-trigger" src="http://xxxxx/officeprime/assets/img/calendar.gif" alt="..." title="..."/>

Затем вы можете работать с этим классом CSS ui-datepicker-trigger.

29
Gerep

Добавить собственный CSS на вашей странице

<style>
.ui-datepicker-trigger { position:relative;top:{}px ;right:{}px ; height:{}px }
 /* {} is the value according to your need */
</style>
27
diEcho

Вы можете редактировать класс .ui-datepicker-trigger с помощью jQuery, но важно выполнить редактирование после функции datepicker.

Пример:

$(#textbox1).datepicker({
        showOn: "button",
        buttonImage: "calendar_1.png",
        buttonImageOnly: true )};

$(".ui-datepicker-trigger").css("margin-bottom","-6px");
11
Adnan Mulalic

Ничто из этого не сработало для меня. Похоже, что jQuery устанавливает свойство высоты кнопки изображения при выходе из функции готовности. Поэтому, если вы попытаетесь установить свойство height в функции ready, оно будет перезаписано на 26 пикселей. Поэтому я создал отдельную функцию для запуска в событии onload тега body. Это обновляет свойство высоты кнопки до того, что я хочу, как это:

// sample jQuery datepicker button tag: <img style="margin: 0px; padding: 2px; height: 26px; vertical-align: bottom;" class="ui-datepicker-trigger" >
var oDateCell = oTableRow.cells[2];
var sDateCellHTML = oDateCell.innerHTML;
var sRevisedHTML = sDateCellHTML.replace("height: 26px;", "height: 13px;");
oDateCell.innerHTML = sRevisedHTML;

Я проделал дополнительную работу над этим и обнаружил, что в приведенном выше коде есть ошибка. Это приводит к сбою события нажатия, и календарь не отображается при нажатии на изображение. Я не знаю почему, но я нашел лучший способ, который работает. Метод выше был неуклюжим (ленивым?) Способом изменения стиля. Правильный путь таков:

            var oTableRow = oTable.rows[iRow];
            if (oTableRow.cells.length > 2)
            {
                var oDateCell = oTableRow.cells[2];
                if (oDateCell.childNodes.length > 1)
                {
                    var oImage = oDateCell.childNodes[1];
                    oImage.style.height = "13px";
                }
            }
1
Dallas Steve

Примените этот CSS:

.ui-datepicker-trigger {
   position: absolute;
}
0
Ronak Patel

Если вы используете собственное персонализированное изображение для значка календаря, вы можете просто сделать изображение нужного размера. Для моего случая высота моего поля ввода была 24px, а размер иконки был 16X16. Я просто отредактировал размер изображения и сделал его 24X24, и проблема была решена.

0
Bodhisatwa Ghosh