Используйте средство выбора даты пользовательского интерфейса JQuery со значками из темы пользовательского интерфейса Jquery

StackOverflow https://stackoverflow.com/questions/802379

  •  03-07-2019
  •  | 
  •  

Вопрос

У меня есть настройка управления датой с использованием пользовательского интерфейса 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>

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

Это было полезно?

Решение

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

Другие советы

У меня это заработало, сделав это

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

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

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

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

Нравиться

date_picker_example

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

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

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

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

Сначала используйте 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 поможет вам правильно выровнять изображение календаря по вашему желанию.

Просто небольшое продолжение ответа Эвса...(большая помощь и спасибо, Евс!).

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

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

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

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

Заимствовав и расширив ответ Локтара, вы можете попробовать что-то подобное, обратите внимание, что я тестировал это только в 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'));

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

Я использовал этот код 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 });

изменять:показатьВкл.:"оба",//кнопка

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

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

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

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

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

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

$('.datepicker').datepicker({
    showOn: "both",
    buttonText: '<i class="icon-calendar"></i>',
    dateFormat : "DD, MM d"
});
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top