bugfix> javascript > 投稿

両方のカレンダーをインラインで並べて表示し、入力をクリックしてもポップアップしないようにします。ブートストラップスライダーの使用

$('.input-daterange input').each(function() {
  $(this).datepicker({
    format: "yyyy",
    viewMode: "years", 
    minViewMode: "years",
    updateViewDate: false
  });
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.min.css" rel="stylesheet" type="text/css" media="screen">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
 <div class="input-group input-daterange">
   <input type="text" class="form-control" value="2012-04-05">
   <div class="input-group-addon">to</div>
   <input type="text" class="form-control" value="2012-04-19">
</div>

これは、単一のカレンダーでインラインを使用する方法ですが、日付範囲と2つのカレンダーでインラインを作成することはできません:

<div id="sandbox-container"><div></div></div>
$('#sandbox-container div').datepicker({
  format: "yyyy",
  viewMode: "years", 
  minViewMode: "years",
  updateViewDate: false
});

私は次のことを試しましたが、3つのカレンダーを配置しました。最初のdivには2つのカレンダーが隣り合っており、2番目のdivには1つのカレンダーしかありません

$('.input-daterange div').each(function() {
  $(this).datepicker({
    format: "yyyy",
    viewMode: "years", 
    minViewMode: "years",
    updateViewDate: false
  });
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.min.css" rel="stylesheet" type="text/css" media="screen">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
  <div class="input-group input-daterange">
    <div></div>
    <div></div>
    <input type="hidden" class="form-control" value="2012-04-05">
    <div class="input-group-addon">to</div>
    <input type="hidden" class="form-control" value="2012-04-19">
  </div>

回答 2 件
  • お役に立てれば。一部のCSSファイルが欠落しています。

    注:役立つ場合は、こちらの回答を参照して、1つの日付ピッカーで範囲を選択してください。

    $('.input-daterange input').each(function() {
        $(this).datepicker({
            format: "yyyy",
            viewMode: "years", 
            minViewMode: "years",
            updateViewDate: false
        });
    });
    
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>
    <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="https://uxsolutions.github.io/bootstrap-datepicker/bootstrap-datepicker/css/bootstrap-datepicker3.min.css" rel="stylesheet"/>
    <div class="input-group input-daterange">
        <input type="text" class="form-control" value="2012-04-05">
        <div class="input-group-addon">to</div>
        <input type="text" class="form-control" value="2012-04-19">
    </div>
    
    

  • これは私が最終的にそれを解決した方法です:

    $('#sandbox-container').datepicker({ 
      format: "yyyy", 
      startView: 1, 
      viewMode: "years", 
      minViewMode: "years", 
      minViewMode: "years", 
      multidate: true, 
      multidateSeparator: ", ", 
      autoClose: true, 
    }).on("changeDate",function(event){ 
      var dates = event.dates, elem = $('#sandbox-container'); 
      if(elem.data("selecteddates") == dates.join(",")) return; //To prevernt recursive call, that lead to lead the maximum stack in the browser. 
      if(dates.length>2) dates=dates.splice(dates.length-1); 
      dates.sort(function(a,b){return new Date(a).getTime() - new Date(b).getTime()}); 
      elem.data("selecteddates",dates.join(",")).datepicker('setDates', dates); 
    });
    
    
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.min.css" rel="stylesheet" type="text/css" media="screen">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
    
        <div id="sandbox-container">
          <input name="usp-custom-14" id="usp-custom-14" type="text">
        </div>
    
    

あなたの答え