Как использовать datepicker в Bootstrap popover и запоминать вводимые пользователем данные - PullRequest
Новая
       70

Как использовать datepicker в Bootstrap popover и запоминать вводимые пользователем данные

0 голосов
/ 09 июля 2020

Я решил использовать bootstrap popover и jquery ui datepicker внутри popover. Я пытался погуглить, но я действительно не могу заставить datepicker действительно работать внутри bootstrap popover.

Итак, первая проблема заключается в том, как заставить datepicker инициализировать внутри всплывающего окна (когда отображается всплывающее окно), а во-вторых " функция "как я могу" запомнить "дату пользователя, если она выбрана в всплывающем окне выбора даты. Я имею в виду, когда пользователь нажимает на указанную дату c и закрывает всплывающее окно, я хочу, чтобы выбранное значение (дата) было сохранено, когда пользователь снова откроет всплывающее окно, я не хочу, чтобы он сбрасывался после закрытия всплывающего окна.

Извините за my bad engli sh.

Вот фрагмент кода, который нужно искать.

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