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

Ответ 1

Боюсь, вам придется это делать вручную. По умолчанию плагин 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
});

Ответ 2

Я работал, делая это

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

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

Ответ 3

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

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;
}

Как

Я использовал этот значок из приятных значков танго, также доступных в png

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

• Независимо от javascript
• Загружает мгновенно с помощью DOM
• Ввод будущих дат легко добавить

Ответ 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 поможет вам правильно выровнять изображение календаря, как вам нужно.

Ответ 5

Просто второстепенный ответ на ответ Evs... (отличная помощь и спасибо Evs!).

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

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

Ответ 6

http://jqueryui.com/demos/datepicker/#icon-trigger

Предоставляется очень хороший пример с примером кода.

Ответ 7

Заимствуя и распространяя 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'));

Обратите внимание, что в этом примере кнопки выбора даты и скрытия даты - это мои собственные классы, так как мне не нравится стилизовать классы 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), однако, поскольку она все еще находится поверх значка, щелчок по значку вызывает событие нажатия кнопки.

Ответ 8

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

// 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 });

Ответ 9

change: toOn: "both", //button

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

Ответ 10

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

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

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

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

Ответ 11

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

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