Использование JQuery UI Datepicker с иконками из темы Jquery UI

Question

У меня есть настройка элемента управления DatePicker, использующая интерфейс JQuery, я также использую темы интерфейса JQuery, которые предоставляют набор значков по умолчанию, которые я хочу использовать.

DatePicker позволяет указывать конкретное изображение, т. Е .:

<script type="text/javascript">
  $(document).ready(function() {
    $("#DateFrom").datepicker({ showOn: 'button', buttonImageOnly: true, buttonImage: 'images/ui-icon-calendar.png' });
  });
</script>  

Для отображения значка из набора значков вы используете что-то вроде:

<span class="ui-icon ui-icon-calendar"></span>

Легко ли интегрировать эти два элемента или мне просто нужно вручную оформить стили / изображения?

Answer 1

Я получил это, сделав это

$("#DateFrom").datepicker({
    showOn: 'button'
}).next('button').button({
    icons: {
        primary: 'ui-icon-calendar'
    }, text:false
});

Просто изменяет кнопку, которую он вставляет рядом с вашим вводом для календаря. По умолчанию они выделяют три эллипса в тексте, поэтому я тоже это убираю.

Answer 2

Предлагаю положить изображение на вход

input.date_picker {
  text-align: center;
  background-image: url("images/ui-icon-calendar.png");
  background-position: right center;
  background-repeat: no-repeat;
  padding-right: 18px;
  width: 78px;
}

Как

I used этот значок из хороших иконок танго проект также доступен в png

Преимущества:

• Не зависит от JavaScript
• Мгновенно загружается с DOM
• Вводимые даты можно легко добавить

Answer 3

Боюсь, вам придется сделать это вручную. По умолчанию плагин Datepicker использует следующий HTML-код для вставки указанного buttonImage:

<img title="..." alt="..." src="images/ui-icon-calendar.png" class="ui-datepicker-trigger">

Кстати, вы можете использовать ...

$(function() {
 // your code here
});

... вместо ...

$(document).ready(function() {
 // your code here
});

Answer 4

Лучший способ был бы;

Сначала используйте JavaScript, как вы уже использовали.

 <script type="text/javascript">
   $(document).ready(function() {
        $("#DateFrom").datepicker({ showOn: 'button', buttonImageOnly: true, buttonImage: 'images/ui-icon-calendar.png' });
   });
 </script>

Затем добавьте следующий код CSS;

<style type="text/css">
.ui-datepicker-trigger
{
        padding:0px;
        padding-left:5px;
        vertical-align:baseline;

        position:relative;
        top:4px;
        height:18px;
}
</style>

Этот CSS поможет вам правильно выровнять изображение календаря.

Answer 5

Небольшое следование ответу Эвса ... (большая помощь и спасибо, Эвс!).

Это работает и в IE8, и я добавил CSS для изменения курсора при наведении курсора:

button.date-picker-button-hidden:hover
{
    cursor: pointer; 
}

Answer 6

Я получил это для работы, добавив HTML-код для моей кнопки со значком непосредственно в параметр buttonText и отключив параметр buttonImage.

$('.datepicker').datepicker({
    showOn: "both",
    buttonText: '<i class="icon-calendar"></i>',
    dateFormat : "DD, MM d"
});

Answer 7

При выборе маршрута для ручной настройки кнопки / значка, вы можете использовать этот пример из Как объединить триггер значка jQueryUI DatePicker с входными группами Bootstrap 3 , чтобы событие JS click установило фокус в соответствующем поле ввода даты, тем самым вызывая функциональность даты jQueryUI.

Или, как гласит документация , вы можете использовать метод show для отображения средства выбора даты (обратите внимание, что «Если средство выбора даты присоединено к входу, вход должен быть видимым для средства выбора даты) будет показано. ").

$( ".selector" ).datepicker( "show" );

Это позволяет вам использовать любую кнопку / изображение / значок рядом с полем ввода и иметь возможность щелкнуть кнопку / изображение / значок, чтобы активировать функцию даты для поля ввода.

Answer 8

изменить: показывать: "оба", // кнопка

<input type="text" name="date_from" id="date_from" />        
<input type="text" name="date_to" id="date_to" />

$(function() {
$("#date_from").datepicker({
    changeMonth: true,
    changeYear: true,
    numberOfMonths: 1,
    showOn: "both",//button
    buttonImageOnly: false,
    showAnim: "slideDown",
    dateFormat: "yy-mm-dd",
    onClose: function(selectedDate) {
        $("#date_to").datepicker("option", "minDate", selectedDate);
    }
});
$("#date_to").datepicker({
    changeMonth: true,
    changeYear: true,
    numberOfMonths: 1,
    showOn: "both",//button
    buttonImageOnly: false,
    showAnim: "slideDown",
    dateFormat: "yy-mm-dd",
    onClose: function(selectedDate) {
        $("#date_from").datepicker("option", "maxDate", selectedDate);
    }
});
});

http://jsfiddle.net/wimarbueno/fpT6q/

Answer 9

Я использовал этот код jquery, чтобы получить указатель даты для поля ввода текста и значок пользовательского интерфейса jquery для работы в качестве изображения на кнопке выбора даты.

// Apply jQuery UI DatePicker to all controls with class = datepicker
    $('.datepicker').datepicker({
        showWeek: true,
        dateFormat: "yy-mm-dd",
        buttonImage: "ui-icon-calendar",
        regional: "sv",
        minDate: "-10Y",
        maxDate: "+10Y",
        showButtonPanel: true,
        buttonImageOnly: false,
        showWeekNumber: true,
        firstDay: 1,
        showOtherMonths: true,
        selectOtherMonths: true,
        changeMonth: true,
        changeYear: true,
        showOn: "both"

    }).next('button').text('Show calendar').button({ icons: { primary: 'ui-icon-calendar' }, text: false });

Answer 10

Заимствуя и расширяя ответ Loktar, вы можете попробовать что-то вроде этого, заметьте, я проверял это только в FF10, но я не понимаю, почему это не будет работать в других браузерах.

$('.date-picker').datepicker({showOn: 'button'})
    .next('button').addClass('date-picker-button-hidden')
    .after($('<span/>')
        .addClass('ui-icon').addClass('ui-icon-calendar').addClass('date-picker-icon'));

Обратите внимание, что в этом примере date-picker-button-hidden и date-picker-icon являются моими собственными классами, так как я не люблю стилировать классы jQuery CSS непосредственно. Примените следующий CSS:

span.date-picker-icon
{
    display: inline-block;
    z-index: -1;
    position: relative;
    left: -16px;
}

button.date-picker-button-hidden
{
    opacity: 0.0;
    filter: alpha(opacity=0);
    height: 16px;
    width: 16px;
    margin: 0;
    padding: 0;
}

Эффективно размещает обычный значок диапазона jQuery за кнопкой. Кнопка является полностью прозрачной / непрозрачной (через CSS), однако, поскольку она все еще находится над значком, нажатие значка вызывает событие нажатия кнопки.