今日以外の日付を選択するとタイムピッカーをダウングレードできないのはなぜですか？このような

Question

私のhtmlコード：

<div class="container"> 
    <div class="row"> 
     <div class='col-sm-6'> 
      <div class="form-group"> 
       <input type='text' class="form-control" id='datepicker' data-date-format="DD-MM-YYYY" /> 
      </div> 
     </div> 

     <div class='col-sm-6'> 
      <div class="form-group"> 
       <input type='text' class="form-control" id='timepicker' data-date-format="HH:mm" /> 
      </div> 
     </div> 
    </div> 
</div> 
<button id="btnSubmit"> 
    Submit 
</button> 

このような私のJavaScriptコード：このような

$(function() {  
    $('#datepicker').datetimepicker(); 

    $('#timepicker').datetimepicker({ 
     minDate: moment().startOf('minute').add(300, 'm'), 
    }); 
}); 
$("#btnSubmit").click(function() { 
    value = document.getElementById('datetimepicker').value; 
    console.log(value) 
}); 

デモ：https://jsfiddle.net/8jpmkcr5/89/

私はtimepickerをクリックして、デクリメント時間のアイコンをクリックすると、その動作しません。私はそれが起こることを知っているので、このコード：minDate: moment().startOf('minute').add(300, 'm')。私は、この日だけコードが動作するようにしたい。今日以外のコードは機能しません

どうすればいいですか？

Answer 1

あなたと#timepickerが無関係ある日ピッカーに制限を設定する必要があり、彼らは完全に独立しており、 はがそれらを関連付けるにあなた次第です。あなたはminDateの#timepickerをdicamically minDate機能を使用して設定することができます。

あなたはdp.changeイベントのためのリスナーを追加し、選択した日は、（momentjs isSameを使用して）現在の日の場合#timepicker chcekingためminDateを有効または無効にすることができます。

コメントに記載されているように、過去の日付を無効にする場合は、minDateオプションもに追加する必要があります。ここで

ワーキングサンプル：にデフォルトを前に述べた#timepickerあなたは、単に時間を選択しているとので、と#timepickerは、関係ない、というよう

$(function() {  
 
    $('#datepicker').datetimepicker({ 
 
    minDate: moment().startOf('day') 
 
    }).on('dp.change', function(e){ 
 
    if(e.date && e.date.isSame(moment(), 'd')){ 
 
     var min = moment().startOf('minute').add(300, 'm'); 
 
     $('#timepicker').data("DateTimePicker").minDate(min); 
 
    } else { 
 
     $('#timepicker').data("DateTimePicker").minDate(false); 
 
    } 
 
    }); 
 
    
 
    $('#timepicker').datetimepicker({ 
 
    minDate: moment().startOf('minute').add(300, 'm'), 
 
    }); 
 
}); 
 

 

 
$("#btnSubmit").click(function() { 
 
    value = document.getElementById('datepicker').value; 
 
    console.log(value) 
    valueTime = document.getElementById('timepicker').value; 
 
    console.log(valueTime) 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script> 
 

 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
     <div class='col-sm-6'> 
 
      <div class="form-group"> 
 
        <input type='text' class="form-control" id='datepicker' data-date-format="DD-MM-YYYY" /> 
 
      </div> 
 
     </div> 
 
     
 
     <div class='col-sm-6'> 
 
      <div class="form-group"> 
 
       <input type='text' class="form-control" id='timepicker' data-date-format="HH:mm" /> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div> 
 

 
<button id="btnSubmit"> 
 
    Submit 
 
</button>

は、ご注意ください現在の日（を使用して、選択した日との自動関係はありません）。

Answer 2

今日のみ入力を制限する場合は、時間ピッカーの制限を設定しようとしているのはなぜですか？あなたは