ブートストラップを防止する時間の選択ボタンを押したときに日時ピッカーを閉じる

Question

dp.change日付と時刻の変更イベントでdatetime pickerを非表示にしていますが、時刻の上下のボタンで近づけないでください。

私はdatetime Pickerに必要なすべてのライブラリを適切に使用しました。 私はhttps://eonasdan.github.io/bootstrap-datetimepicker/の文書を勉強しましたが、私には何も役に立ちません。

これは私のHTMLコードです：これは日時ピッカーの使う初期

$('#startDate').datetimepicker({ 
     format: 'YYYY-MM-DD HH:mm:ss', 
     collapse:false, 
     sideBySide:true, 
     useCurrent:false, 
     showClose:true, 
     }); 

    $('#endDate').datetimepicker({ 
     format: 'YYYY-MM-DD HH:mm:ss', 
     collapse:false, 
     sideBySide:true, 
     useCurrent:false, 
     showClose:true, 
    }); 

ある

<div class="col-md-4 col-xs-12 center-block"> 
            <div class="col-md-12 col-sm-12"> 
             <div class="col-md-8 col-md-offset-2 col-sm-12"> Date (YYYY-MM-DD)</div> 
            </div> 
            <!-- <div class="col-md-12 col-xs-12 col-sm-12 no-padding"> 
             <label>Start Date</label> 
            </div> 
            --> 
            <div class="col-md-12 col-xs-12 col-sm-12"> 
             <label class="col-md-2 col-xs-12 text-center noPadding"><b>From:</b></label> 
            <div class='input-group date col-md-10 col-md-offset-1 col-xs-12' id='startDate'> 

             <input type='text' class="form-control " placeholder="Start Date" id="startDateInput"/> 
             <span class="input-group-addon"> 
              <span class="glyphicon glyphicon-calendar"></span> 
             </span> 
            </div> 
            </div> 
            <!-- <div class="col-md-12 col-xs-12 col-sm-12 no-padding"> 
             <label>End Date</label> 
            </div> --> 
            <div class="col-md-12 col-xs-12 col-sm-12"> 
             <label class="col-md-2 col-xs-12 text-center noPadding"><b>To:</b></label> 
            <div class="input-group date col-md-10 col-md-offset-1 col-xs-12" id='endDate' > 
             <input type='text' class="form-control" placeholder="End Date" id="endDateInput" /> 
             <span class="input-group-addon"> 
              <span class="glyphicon glyphicon-calendar"></span> 
             </span> 
            </div> 
           </div> 
         </div> 

これは日時ピッカー

$("#startDate").on("dp.change", function (e) { 
      $('#startDate , #endDate').data("DateTimePicker").hide(); 
    }); 

    $("#endDate").on("dp.change", function (e) { 
      $('#endDate').data("DateTimePicker").hide(); 
    }); 

を非表示にするには、イベントです今私の質問は、datetime型でありますピッカーはタイムピッカーの上下のボタンに近づくべきではありません。 私はどこからでも解雇しようとしましたが、それも私に何も与えていません。

これは願いのいずれかが彼ソリューション

Answer 1

のために更新するfiddleある今、私の質問は、アップとダウンボタン近いtimepickerに乗るべきではない日時ピッカーがあります。

あなたは、彼らがdp.changeイベントから無視することができるようにtheeseボタンを処理する必要があり、このachiveするには：あなたは日時を隠すために」イベントを削除した場合

$(function() { 
 
    $('#startDate').datetimepicker({ 
 
    format: 'YYYY-MM-DD HH:mm:ss', 
 
    collapse:false, 
 
    sideBySide:true, 
 
    useCurrent:false, 
 
    showClose:true 
 
    }); 
 

 
    $('#endDate').datetimepicker({ 
 
    format: 'YYYY-MM-DD HH:mm:ss', 
 
    collapse:false, 
 
    sideBySide:true, 
 
    useCurrent:false, 
 
    showClose:true 
 
    }); 
 

 

 
    $("#startDate, #endDate").on("dp.show", function (e) { 
 
    $('table.table-condensed a.btn').on('click', function(e) { 
 
     e.stopImmediatePropagation(); 
 
     var selector = 'seconds'; 
 
     var op = '+'; 
 
     switch ($(this).attr('data-action')) { 
 
     case "incrementSeconds": 
 
      break; 
 
     case "incrementMinutes": 
 
      selector = 'minutes'; 
 
      break; 
 
     case "incrementHours": 
 
      selector = 'hours'; 
 
      break; 
 
     case "decrementHours": 
 
      op = '-'; 
 
      selector = 'hours'; 
 
      break; 
 
     case "decrementMinutes": 
 
      op = '-'; 
 
      selector = 'minutes'; 
 
      break; 
 
     case "decrementSeconds": 
 
      op = '-'; 
 
      selector = 'seconds'; 
 
      break; 
 
     } 
 
     var cachedEle = $(this).closest('table.table-condensed').find('span[data-time-component="' + selector + '"]'); 
 
     var resultValue = ((op == '+') ? +cachedEle.text() + 1 : (+cachedEle.text() == 0) ? 59 : +cachedEle.text() - 1) % 60; 
 
     cachedEle.text((resultValue < 10) ? '0' + resultValue : resultValue); 
 
     var originalTargetId = $(this).closest('#startDate, #endDate').attr('id'); 
 
     var seconds = $(this).closest('table.table-condensed').find('span[data-time-component="seconds"]').text(); 
 
     var minutes = $(this).closest('table.table-condensed').find('span[data-time-component="minutes"]').text(); 
 
     var hours = $(this).closest('table.table-condensed').find('span[data-time-component="hours"]').text(); 
 

 
     $('#' + originalTargetId).attr('changedHHMMSS', hours + ':' + minutes + ':' + seconds); 
 

 
     $('#' + originalTargetId).trigger("dp.change", {'originalTargetId': originalTargetId, 'hours': hours, 'minutes': minutes, 'seconds': seconds}) 
 
    }); 
 
    }); 
 

 
    $("#startDate, #endDate").on("dp.hide", function (e) { 
 
    $('table.table-condensed a.btn').off('click'); 
 
    }); 
 

 
    $("#startDate, #endDate").on("dp.change", function (e, originalTargetId) { 
 
    if (originalTargetId === undefined) { 
 
     var changedHHMMSS = $(this).attr('changedHHMMSS'); 
 
     $(this).removeAttr('changedHHMMSS'); 
 
     if (changedHHMMSS !== undefined) { 
 
     var inputVal = $(this).children('input').val(); 
 
     $(this).children('input').val(inputVal.substring(0, inputVal.length - changedHHMMSS.length) + changedHHMMSS); 
 
     } 
 
     $(this).data("DateTimePicker").hide(); 
 
    } else { 
 
     if (originalTargetId instanceof Object && 'originalTargetId' in originalTargetId) { 
 
     console.log('Discard events coming from hh:mm:ss: ' + originalTargetId.originalTargetId); 
 
     } 
 
    } 
 
    }); 
 
});

<link rel="stylesheet" href="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/d004434a5ff76e7b97c8b07c01f34ca69e635d97/build/css/bootstrap-datetimepicker.css"> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script> 
 
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script> 
 
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/js/bootstrap-transition.js"></script> 
 
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/js/bootstrap-collapse.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<script src="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/d004434a5ff76e7b97c8b07c01f34ca69e635d97/src/js/bootstrap-datetimepicker.js"></script> 
 

 

 
<div class="col-md-4 col-xs-12 center-block"> 
 
    <div class="col-md-12 col-sm-12 reportCriteriaHead"> 
 
     <div class="reportCriteriaTitle col-md-8 col-md-offset-2 col-sm-12"> Date (YYYY-MM-DD)</div> 
 
    </div> 
 
    <!-- <div class="col-md-12 col-xs-12 col-sm-12 no-padding"> 
 
      <label>Start Date</label> 
 
     </div> 
 
--> 
 
    <div class="col-md-12 col-xs-12 col-sm-12"> 
 
     <label class="col-md-2 col-xs-12 text-center noPadding linehgt"><b>From:</b></label> 
 
     <div class='input-group date col-md-10 col-md-offset-1 col-xs-12 selectSumary ' id='startDate'> 
 

 
      <input type='text' class="form-control " placeholder="Start Date" id="startDateInput"/> 
 
       \t \t \t \t \t \t \t <span class="input-group-addon"> 
 
        \t \t \t \t \t \t \t <span class="glyphicon glyphicon-calendar"></span> 
 
       \t \t \t \t \t \t \t </span> 
 
     </div> 
 
    </div> 
 
    <!-- <div class="col-md-12 col-xs-12 col-sm-12 no-padding"> 
 
      <label>End Date</label> 
 
     </div> --> 
 
    <div class="col-md-12 col-xs-12 col-sm-12"> 
 
     <label class="col-md-2 col-xs-12 text-center noPadding linehgt"><b>To:</b></label> 
 
     <div class="input-group date col-md-10 col-md-offset-1 col-xs-12 selectSumary " id='endDate' \t > 
 
      <input type='text' class="form-control" placeholder="End Date" id="endDateInput" /> 
 
       \t \t \t \t \t \t \t <span class="input-group-addon"> 
 
        \t \t \t \t \t \t \t <span class="glyphicon glyphicon-calendar"></span> 
 
       \t \t \t \t \t \t \t </span> 
 
     </div> 
 
    </div> 
 
</div>