Как запустить date picker на первом событии onclick?

Я использую этот выбор даты из jqueryui.
Если вы посмотрите на эту страницу, то обнаружите, что они только что написали в одной функции:

    $(function() {
        $("#datepicker").datepicker();
    });
    </script>

но я хочу открыть свой выбор даты на одном событии щелчка текстового поля.
Вот что я написал:--7--> 

$("#datepicker").datepicker();

в одной функции, которую я вызываю в событии textbox onclick.
Но в этом есть одна проблема.

Я только получаю дату picker на второй раз я нажимаю на текстовое поле.
Если я нажму первый раз после загрузки страницы, то выбор даты не появится, но как только я нажму второй раз, то выбор даты придет.

почему? И могу ли я сделать это при первом щелчке?

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

EDIT:
Сейчас я вам всем объясню, что именно это я и делаю.

Мое требование таково:

1) Когда я выбираю дату в первый раз. Даты до сегодняшней даты должны быть отключены в календаре.
2) Теперь, когда я выбираю дату во второй раз в календаре, дата должна начинаться через день после предыдущей даты.

Я писал вот так....

$(function() {
                   $('#from').datepicker({
                            defaultDate: "+5d",
                            changeMonth: true,
                            numberOfMonths:1 ,
                            minDate:"+0d",
                            dateFormat: 'DD, MM d, yy',
                            onSelect: function(selectedDate) {
                                    var option = this.id == "from" ? "minDate" : "maxDate";

                                   var instance = $(this).data("datepicker");

                                    var date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);


                                    dates.not(this).datepicker("option", option, date);

                            }
                    });

});

Это отлично работает по одному требованию,
но для второго требования мне нужно сначала проверить, есть ли какие-либо значение текстового поля. Если есть, то
он должен выбрать direct +1 к этой дате, а предыдущие даты должны быть отключены.

как это сделать?

7
datepicker jquery jquery-ui

7 ответов

причина, по которой он не отображается при первом щелчке, заключается в том, что в момент первого щелчка он не зарегистрирован как datepicker. Поэтому у него нет события onclick, говорящего ему, что он должен показывать любой datepicker при нажатии на него.

при втором щелчке, однако, вы установили его как datepicker во время первого щелчка (и теперь он имеет событие onclick, где datepicker будет показан). Событие onclick datepicker срабатывает, показывая выбор.

As упомянутый в других ответах, это не рекомендуемый способ сделать это. Но если вы действительно хотите привязать его onclick, а не onload, вы можете показать выбор при первом щелчке мыши, выполнив

$(function() {
    $("#datepicker").click(function() {
        $(this).datepicker().datepicker( "show" )
    });
});

это зарегистрирует элемент как datepicker и покажет, а затем покажет его одновременно.

16

убедитесь, что вы вызываете datepicker при загрузке страницы, а не с событием onclick.

$(document).ready(function() {
    $("#datepicker").datepicker();
});
3

Если кто-то хочет показать datepicker в значок glyphicon и на поле ввода я сделал следующее:

html часть:

<div class="form-group">
   <label>Fecha:<font color="#FF0000">*</font></label>
 <div class='input-group date' id='datepicker1'>
   <input id="fecha" name="fecha" type="text" class="form-control" />
    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
    </span>
</div>

часть javascript:

$(function() {
         $("#fecha").datepicker();
         });//this enable the call to datepicker when click on input field

         $(function() {
            $("#datepicker1").click(function() {
                $('#fecha').datepicker().datepicker( "show" )
            });
        });//this one enables the onclick event on the glyphicon
1

Я думаю, вы неправильно поняли значение:

$(function() { 
   $("#datepicker").datepicker();      
});

что то же самое, что:

$(document).ready(function() { 
    $("#datepicker").datepicker(); 
});

и

jquery(document).ready(function() { 
    $("#datepicker").datepicker(); 
});

, заключив $("#datepicker").datepicker(); вы просто скажите браузеру, чтобы добавить .datepicker() событие в поле дата указывается #datapicker ID во время события готовности документа (когда документ загружен и готов к обработке).

не заключая его, вы не добавите обработчик событий до тех пор, пока документ не будет готов, во время загрузка javascript (или когда он вызывается), или вызов функции, если вы вложили его туда.

имейте в виду, что если вы:

function mystuff()
{
$("#datepicker").datepicker(); 
};
mystuff();

вы получите обработчик добавлен, когда эта функция работает, что может вызвать проблемы, если вы затем вызвать его снова:

 mystuff();
0

я использовал это из @Simen Echholt answer

<input onclick="$(this).datepicker().datepicker('show')" class="validate[required,custom[date]] text-input" ...
0

Я вызвал его в функции js, и он работает. См. фрагмент кода:

Шаг 1: в файле: элемента управления datepicker.jsp

  <input class="time ui-timepicker-input" id="dcma_day_start"  type="text" autocomplete="off" 
     placeholder="End time" onClick="dcmaTimePicker('dcma_day_start', 'dcma_durationId');">

Шаг 2:в файле элемента управления datepicker.js

function dcmaTimePicker( id, durationId)
{   
    var d = document.getElementById(durationId);

    if(!d.value)
    {
        d.value = 15;
    }

    jQuery('input#'+id).timepicker({ 'step': d.value }).timepicker('show');
}

Шаг-3: суть: вызов .timepicker ('show'), показывая сам хронометр в первый раз.

0

добавьте функцию в div onclick= "removeFocus ()" и добавьте скрипт удаления фокуса.

<script>
    function removeFocus() {
        $('input').blur();
    }
</script>
0