デフォルトの時間でTimePickerを使用する（事前定義された時間がタイムピッカーを無効にする）

Question

私のフォームに日付/時刻ピッカーを必要とする3つの要素があります。各要素には、適用する必要がある別のデフォルト時間があります。

config/formatオプションでデフォルトの時刻を設定すると、時刻を選択する機能がdatepickerから消えます。私はオプションで有効な時間形式を入力した場合、私はその後timepickerを使用することですが、新しい日付を選択すると、現在の時刻に要素の値を設定します：私は達成したい何

$(function() { 
     $('#datetimepicker_earliest').datetimepicker({ 
      locale: 'en-gb', 
      format: 'DD/MM/YYYY 16:00', 
      extraFormats: ['DD/MM/YYYY H:MM'] 
     }); 
    }); 

時間が選択されていない場合は、デフォルトの時間が使用されます。時間ピッカーを使用して新しい時間を選択すると、これが使用されます。これは可能ですか？

Answer 1

dp.changeイベントを使用すると、ユーザーが1日を選択したときのカスタム時間を設定できます。

イベントをパラメータとしてdateとoldDateを受け取り、あなたのニーズに応じて、ピッカー時間を更新するために、それらに一瞬のセッター（hour、minute）を使用することができます。

date機能を使用してdatetimepickerの日付を変更することができます。ここで

作業例：

$('#datetimepicker_earliest').datetimepicker({ 
 
    locale: 'en-gb', 
 
    format: 'DD/MM/YYYY HH:mm', 
 
    extraFormats: ['DD/MM/YYYY H:mm'] 
 
}).on('dp.change', function(e){ 
 
    if(!e.oldDate || !e.date.isSame(e.oldDate, 'day')){ 
 
    e.date.hour(16).minute(0); 
 
    $(this).data("DateTimePicker").date(e.date); 
 
    } 
 
});

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet"/> 
 
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.42/css/bootstrap-datetimepicker.css" rel="stylesheet"/> 
 

 
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/locale/en-gb.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.42/js/bootstrap-datetimepicker.min.js"></script> 
 

 
<div class="input-group date" id="datetimepicker_earliest"> 
 
    <input type="text" class="form-control" /> 
 
    <span class="input-group-addon"> 
 
    <span class="glyphicon glyphicon-calendar"></span> 
 
    </span> 
 
</div>