jQuery / bootstrap показывает дату выбора при нажатии кнопки и присваивает значение переменной без ввода текста

Question

Совершенно новичок в jQuery, поэтому, пожалуйста, потерпите меня ...

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

Моя попытка до сих пор

<button type="button" class="btn btn-primary" onclick='snapshot_btn()'>
  Snapshot 
</button><input type="hidden" id="button_snapshot" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script>

и в main.js

function snapshot_btn() {
    $("#button_snapshot").datepicker({
        showOn: 'both',
        onSelect: function () {
            var dateObject = $(this).datepicker('getDate');
            alert(dateObject);
        }
    });    
}

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

Обычно отображается в других полях ввода.

Answer 1

С помощью bootstrap-datepicker добавьте autoHide:true внутри datepicker () и .datepicker("show"); сразу после.При использовании нажмите кнопку, модал будет отображаться и скрываться при нажатии за пределами

<button type="button" class="btn btn-primary" onclick='snapshot_btn()'>Snapshot </button>
<input type="hidden" id="button_snapshot" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script>

JS

function snapshot_btn() {
    $("#button_snapshot").datepicker({
        autoHide:true,
        showOn: 'both',
        onSelect: function () {
            var dateObject = $(this).datepicker('getDate');
            alert(dateObject);
        }
    });  
    $("#button_snapshot").datepicker("show");
}

Answer 2

РЕДАКТИРОВАТЬ
Поскольку в исходном вопросе вы не сказали, что это загрузчик даты, а не jQuery datepicker, я сделал этот ответ с помощью jQuery datepicker.

Вам нужнодобавьте две библиотеки (jquery, а затем jquery UI, проверьте фрагмент, чтобы получить ссылки), после этого просто используйте приведенный ниже код и в функции onSelect получите дату в качестве параметра, она уже содержит выбор.

Я внес небольшое изменение, удалив input type='hidden' и добавив пустой div, чтобы календарь выглядел как встроенный.

В моем примере календарь также исчезает и снова появляетсянажмите, посмотрите.

function snapshot_btn() {
  var btnOpenCalendar = $("#btnOpenCalendar");
  
  if (btnOpenCalendar.hasClass('calendar-open')){
    btnOpenCalendar.removeClass("calendar-open");
    $("#button_snapshot").datepicker("destroy");
    
  }else{
    btnOpenCalendar.addClass("calendar-open");
    $("#button_snapshot").datepicker({
        showOn: 'both',
        onSelect: function (date) {
            alert(date);
        }
    });  

  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<button type="button" id='btnOpenCalendar' class="btn btn-primary" onclick='snapshot_btn()'>
  Snapshot 
</button>
<div id="button_snapshot"></div>