スパンクリック時の日付選択ツール

Question

私の検索フォームは次のとおりです。

<div class="search-bar-wrapper container-fluid"> 
     <div class="row"> 
      <div class="col-md-2"></div> 
      <div class="col-md-8 search-bar"> 
       <span class="col-md-5 mag-name-field" contenteditable> 
       </span> 
       <span class="col-md-5 date-field datepicker fa fa-calendar open-datetimepicker" contenteditable> 
       </span> 
       <span class="col-md-2 btn-front">SEARCH</span> 
      </div> 
      <div class="col-md-2"></div> 
     </div> 
</div> 

私は「オープン-のDateTimePicker」のクリック、ブートストラップ日付ピッカーやjQueryのDatePickerのいずれかの日付ピッカーを開きたいです。

私はいくつかの答えを試しました。何もうまくいきませんでした。誰もこれを行う方法を知っていますか？

Answer 1

入力フィールドを使用してみてください。すべてのライブラリが含まれていることを確認し、jQueryを追加してください。運が良かった！

<link rel="stylesheet"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script> 
<div class="search-bar-wrapper container-fluid"> 
     <div class="row"> 
      <div class="col-md-2"></div> 
      <div class="col-md-8 search-bar"> 
       <span class="col-md-5 mag-name-field" contenteditable> 
       </span> 
       <input id="date" class="col-md-5 date-field datepicker fa fa-calendar open-datetimepicker" contenteditable/> 
       <span class="col-md-2 btn-front">SEARCH</span> 
      </div> 
      <div class="col-md-2"></div> 
     </div> 
</div> 
<script> 
$("#date").datepicker(); 
</script>