Вопрос по jquery, datepicker – Откройте JQuery Datepicker, нажав на изображение без поля ввода

70

Я хочу, чтобы JQuery Datepicker был открыт, когда пользователь нажимает на изображение. Нет поля ввода, в котором выбранная дата появляется позже; Я просто собираюсь сохранить введенную дату на сервере через Ajax.

В настоящее время у меня есть этот код:

<img src='someimage.gif' id="datepicker" />

$(document).ready(function() {
    $("#datepicker").datepicker({
            changeMonth: true,
            changeYear: true,
        }).click(function() { $(this).datepicker('show'); });
 });

Но ничего не происходит, когда я нажимаю на изображение. Я также попытался сохранить результат вызова datepicker () для глобальной переменной, а затем вызвать datepicker ('show' ') из события onclick () изображения, но тот же результат.

Ваш Ответ

8   ответов
8

Чтобы изменить & quot; ... & quot; когда указатель мыши находится над значком календаря, необходимо добавить следующее в параметры выбора даты:

    showOn: 'button',
    buttonText: 'Click to show the calendar',
    buttonImageOnly: true, 
    buttonImage: 'images/cal2.png',
1
$(function() {
   $("#datepicker").datepicker({
       //showOn: both - datepicker will come clicking the input box as well as the calendar icon
       //showOn: button - datepicker will come only clicking the calendar icon
       showOn: 'button',
      //you can use your local path also eg. buttonImage: 'images/x_office_calendar.png'
      buttonImage: 'http://theonlytutorials.com/demo/x_office_calendar.png',
      buttonImageOnly: true,
      changeMonth: true,
      changeYear: true,
      showAnim: 'slideDown',
      duration: 'fast',
      dateFormat: 'dd-mm-yy'
  });
});

Приведенный выше код принадлежитэта ссылка

2

Наличие скрытого поля ввода приводит к проблемам с позиционированием диалога в DatePicker (диалог центрирован по горизонтали). Вы можете изменить границу диалога, но есть лучший способ.

Просто создайте поле ввода и & quot; скрыть & quot; установите непрозрачность на 0 и сделайте его шириной 1 пиксель. Также поместите его рядом (или под) с кнопкой или там, где вы хотите, чтобы появился указатель даты.

Затем прикрепите средство выбора даты к & quot; скрытому & quot; поле ввода и показать его, когда пользователь нажимает кнопку.

HTML:

<button id="date-button">Show Calendar</button>
<input type="text" name="date-field" id="date-field" value="">

CSS:

#date-button {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    height 30px;
}

#date-field {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 1px;
    height: 32px; // height of the button + a little margin
    opacity: 0;
}

JS:

$(function() {
   $('#date-field').datepicker();

   $('#date-button').on('click', function() {
      $('#date-field').datepicker('show');
   });
});

Примечание: не тестируется со всеми браузерами.

23

Если вы используете поле ввода и значок (как в этом примере):

<input name="hasta" id="Hasta"  type="text" readonly  />
<a href="#" id="Hasta_icono" ></a>

Вы можете прикрепить указатель даты к своей иконке (в моем случае внутри тега A через CSS) следующим образом:

$("#Hasta").datepicker();
  $("#Hasta_icono").click(function() { 
   $("#Hasta").datepicker( "show" );
  });
Error: User Rate Limit Exceeded
3

HTML:

<div class="CalendarBlock">
    <input type="hidden">
</div>

КОД:

$CalendarBlock=$('.CalendarBlock');
$CalendarBlock.click(function(){
    var $datepicker=$(this).find('input');
    datepicker.datepicker({dateFormat: 'mm/dd/yy'});
    $datepicker.focus(); });
23

В документации jQuery говорится, что datePicker должен быть присоединен к SPAN или DIV, если он не связан с полем ввода. Вы могли бы сделать что-то вроде этого:

<img src='someimage.gif' id="datepickerImage" />
<div id="datepicker"></div>

<script type="text/javascript">
 $(document).ready(function() {
    $("#datepicker").datepicker({
            changeMonth: true,
            changeYear: true,
    })
    .hide()
    .click(function() {
      $(this).hide();
    });

    $("#datepickerImage").click(function() {
       $("#datepicker").show(); 
    });
 });
</script>
Error: User Rate Limit Exceeded ep4169
Error: User Rate Limit Exceeded ep4169
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
0
<img src='someimage.gif' id="datepicker" />
<input type="hidden" id="dp" />

 $(document).on("click", "#datepicker", function () {
   $("#dp").datepicker({
    dateFormat: 'dd-mm-yy',
    minDate: 'today'}).datepicker( "show" ); 
  });

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

117

Оказывается, что простое скрытое поле ввода делает свою работу:

<input type="hidden" id="dp" />

А затем используйте атрибут buttonImage для вашего изображения, как обычно:

    $("#dp").datepicker({
        buttonImage: '../images/icon_star.gif',
        buttonImageOnly: true,
        changeMonth: true,
        changeYear: true,
        showOn: 'both',
     });

Сначала я попытался ввести текстовое поле, а затем установитьdisplay:none стиль, но это привело к тому, что календарь появился в верхней части браузера, а не там, где пользователь щелкнул. Но скрытое поле работает как нужно.

Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceededjsfiddle.net/pratik24/M9Hj6
Error: User Rate Limit Exceeded
Error: User Rate Limit ExceededalignmentError: User Rate Limit ExceededinputError: User Rate Limit ExceededhiddenError: User Rate Limit Exceeded

Похожие вопросы