时间戳

首页 > 解决方案 > jQuery / bootstrap在单击按钮时显示日期选择器并将值分配给没有输入文本的变量

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

问题描述

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

但是当我单击按钮时日期选择器不显示。

它在其他输入框中正常显示。

标签： javascriptjquerydatepicker

解决方案

使用 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");
}

推荐阅读