javascript - jQuery/bootstrap 在单击按钮时显示日期选择器并将值分配给变量而不输入文本

Question

对 jQuery 很陌生，所以请耐心等待...

我想在单击按钮时显示日期选择器。日期选择器应显示为弹出窗口并将所选日期分配给变量。

到目前为止我的尝试

<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，而不是 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>