ブートストラップ日時ピッカーに「追加」ボタンを追加する方法

Question

インラインブートストラップ日時ピッカーに「追加」ボタンを追加しようとしています。私たちがボタンを追加するために実装しようとしていたから、私はこれで私を助けてください。前もって感謝します。

Answer 1

これはその方法の1つです。

日付時刻が既に1つの入力フィールドに表示されているため、あなたが話していた入力フィールドがわからないのですが、私は他の入力フィールドに同じデータを表示するボタンをインラインで追加しました。ポップアップカレンダー。

以下のコードでは、他の入力フィールドに書式設定することなく、日付/時刻値を表示するだけです。

$('#datetimepicker1').datetimepicker(); 
 
$('.add').on('click', function(e) { 
 
    e.stopImmediatePropagation(); 
 
    let elem = $('#datetimepicker1 input[type=text]'); 
 
    let display = $('#date'); 
 
    let popup = $('.bootstrap-datetimepicker-widget'); // calendar popup class 
 
    let value = $(elem).val(); 
 

 
    $(popup).remove(); 
 
    $(display).val(value).focus(); 
 
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" /> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.0.0/css/bootstrap-datetimepicker.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.0.0/js/bootstrap-datetimepicker.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class='col-sm-6'> 
 
     <div class="form-group"> 
 
     <div class='input-group date' id='datetimepicker1'> 
 
      <input type='text' class="form-control" /> 
 
      <span class='input-group-addon'> 
 
      <span class="glyphicon glyphicon-calendar"></span> 
 
      </span> 
 
      <span class="input-group-addon add"> 
 
      <span class="glyphicon glyphicon-plus add"></span> 
 
      </span> 
 
     </div> 
 
     <div class="form-group" style='margin-top: 20px;'> 
 
      <input class='form-control' type='text' id='date'> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

希望、あなたはこのコードからいくつかのアイデアを得る可能性があります。 :)