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，而不是jQuery datepicker，我使用jQuery datepicker做了这个答案。

你需要添加两个库（jquery然后jquery UI，检查代码片段以获取链接），之后，只需使用下面的代码并在onSelect函数中，将日期作为参数，它已包含选择。

我做了一些小改动，删除了input type='hidden'，并添加了一个空的div，这样日历就会以内联方式显示。

我的例子也让日历消失，点击后重新出现，看看。

＆＃13;
＆＃13;
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); } }); } }
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

Answer 2

使用bootstrap-datepicker，在datepicker（）和$scope.gridOptions = { showGridFooter: true, showColumnFooter: true, enableFiltering: true, columnDefs: [ { field: 'name', width: '13%' }, { field: 'address.street',aggregationType: uiGridConstants.aggregationTypes.sum, width: '13%' }, { field: 'age', aggregationType: uiGridConstants.aggregationTypes.avg, aggregationHideLabel: true, width: '13%' }, { name: 'ageMin', field: 'age', aggregationType: uiGridConstants.aggregationTypes.min, width: '13%', displayName: 'Age for min' }, { name: 'ageMax', field: 'age', aggregationType: uiGridConstants.aggregationTypes.max, width: '13%', displayName: 'Age for max' }, { name: 'customCellTemplate', field: 'age', width: '14%', customTreeAggregationFn : function( aggregation, fieldValue, numValue, row ) { if(row.entity.name.value === 'Terry Clay' || row.entity.name.value === 'Nieves Mack'){ aggregation.value += row.entity.age; } }, customTreeAggregationFinalizerFn: function( aggregation ) { aggregation.rendered = aggregation.value; } }, { name: 'registered', field: 'registered', width: '20%', cellFilter: 'date', footerCellFilter: 'date', aggregationType: uiGridConstants.aggregationTypes.max } ], data: data, onRegisterApi: function(gridApi) { $scope.gridApi = gridApi; } };之后添加autoHide:true。使用时单击按钮，模式将显示，并在单击外部时隐藏

.datepicker("show");

<强> JS

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

单击按钮时jQuery / bootstrap显示datepicker，并为没有输入文本的变量赋值

2 个答案: