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

Question

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

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

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

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

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

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

Почему? И можно ли сделать это по первому клику?

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

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

                            }
                    });

});

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

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

Answer 1

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

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

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

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

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

Answer 2

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

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

Answer 3

Если по какой-либо причине кто-то захочет отобразить средство выбора даты в значке глифа и в поле ввода, я сделал следующее:

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

Answer 4

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

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

Answer 5

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

Шаг-1: В файле: timepicker.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: В файле timepicker.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') , показывающий средство выбора времени в первый раз.

Answer 6

я так использовал от ответа @Simen Echholt

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

Answer 7

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

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

, что совпадает с:

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

и

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

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

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

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

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

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

 mystuff();