Question

我决定在popover中使用bootstrap popover和jquery ui datepicker。我尝试用Google搜索它，但实际上无法使datepicker真正在bootstrap popover内部工作。

因此，第一个问题是如何强制日期选择器在弹出窗口内部进行初始化（当弹出窗口显示时），第二个“功能”是在弹出窗口日期选择器中选择用户日期后，如何“记住”用户日期。我的意思是，当用户单击特定日期并关闭弹出窗口时，我希望在用户再次打开弹出窗口时保存选择的值（日期），我不希望在弹出窗口关闭后重置该值。

对不起，我英语不好。

这是要查找的小提琴代码。

https://jsfiddle.net/ribosed/f0arxw5h/16/

$(document).ready(function(){

$("[data-toggle=popover]").each(function(i, obj) {

$(this).popover({
   container: 'body',
    html: true,
    placement: 'right',
    sanitize: false,
  content: function() {
    var id = $(this).attr('id')
    return $('#popover-content-' + id).html();
  }
});

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

});

 
 
/*
I tried to add this code but doesnt work
 
 $('[data-toggle=popover]').on('show.bs.popover', function () {
  $('#startdate').datepicker();
})

*/

});

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link href="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.5.0/css/bootstrap4-toggle.min.css" rel="stylesheet">  
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
 
   <!-- JS ------jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
 
 
    <!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div class="container">
  <div class="row">
  
     <div class="input-group col-md-3 mb-3">
     <button id="dates" class="btn btn-outline-secondary btn-sm" type="button" data-toggle="popover" data-container="body" data-placement="right" data-html="true">Dates</button>
     </div>
     
     <div id="popover-content-dates" class="d-none">
    
     <div class="form-group" style="margin-bottom:0.5rem!important;">
     <input id="startdate" type="text" class="form-control form-control-sm hasDatepicker" placeholder="Start date" aria-describedby="datumpresude">
     <small class="text-muted">Start Date</small>
     </div>
    
     </div>
 </div>  
</div>
<br/>

<p>Date: <input type="text" id="startdate2"></p>

如何在Bootstrap弹出窗口中使用datepicker并记住用户输入

0 个答案: