JQuery: сделать выбор даты показать / скрыть через изображение?

Question

Я хочу использовать изображение календаря, чтобы показать / скрыть средство выбора даты jquery. Исходя из документации, похоже, мне нужно установить buttonImage и buttonImageOnly, которые у меня есть. средство выбора даты работает, но оно всегда видно. вот мой код:

<script type="text/javascript">
$(document).ready(function(){
$("#datepicker").datepicker({ 
    altField: '#from', 
    altFormat: 'yymmdd', 
    buttonImage: 'datepicker.png', 
    buttonImageOnly: true, 
    defaultDate: <?=getDaysFromToday($_GET['from'])?>, 
    showOn: 'focus' 
    });
});

$('#datepicker').datepicker({
    onSelect: function(dateText, inst) {
    $("#myform").submit(); 
    }
});
 </script>

Также я пытаюсь заставить ее отправить форму, когда вы выбираете дату, но я не могу заставить ее работать.

Я что-то не так делаю?

Спасибо!

Answer 1

Заменить

showOn: 'focus'

с

showOn: 'button'

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

Не могу сказать, почему отправка формы не работает. Связали ли вы какие-либо события отправки с формой, которая может возвращать false?

Поскольку this ссылается на элемент input внутри обработчика событий, возможно, вы можете попробовать это для отправки:

this.form.submit();

Редактировать после комментария : посмотрите на в этом примере , кнопка добавляется автоматически.

Я только что понял, что у вас есть два отдельных звонка на datepicker. Объединение двух в одно может помочь с проблемами вашего мероприятия:

$("#datepicker").datepicker({ 
    altField: '#from', 
    altFormat: 'yymmdd', 
    buttonImage: 'datepicker.png', 
    buttonImageOnly: true, 
    defaultDate: <?=getDaysFromToday($_GET['from'])?>, 
    showOn: 'focus'.
    onSelect: function(dateText, inst) {
        $("#myform").submit(); 
    }
});

Answer 2

Для тех, кто хочет расположить значок не слишком близко к полю ввода:

http://forum.jquery.com/topic/altering-position-of-datepicker-icon#14737000001522067

.ui-datepicker-trigger {
margin-left : 5px;
vertical-align : top;
}