Verhindern Bootstrap Datetime Picker schließen auf Auswahl Zeit hoch und runter Taste

Question

Ich habe die versucht dp.change, um die Datetime Picker bei Änderung Ereignis von Datum und Uhrzeit zu verstecken, aber es sollte nicht rechtzeitig auf der Zeit hoch und runter Knopf.

Ich richtig verwendet jede Bibliothek für datetime Picker benötigt. Ich studierte das Dokument https://eonasdan.github.io/bootstrap-datetimepicker/, aber nichts ist hilfreich für mich.

dies mein HTML-Code ist:

<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> 

Dies ist intialization von Datetime-Picker

$('#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, 
    }); 

Dieses Ereignis des Datetime-Picker

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

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

Jetzt Date Meine Frage zu verstecken Picker sollte nicht auf Zeitpicker auf und ab Knopf nah kommen. Ich habe versucht, das zu bekommen, wo sogar gefeuert wird, aber das gibt mir auch nichts.

Dies ist fiddle, wo jeder auf Wunsch nach ihm-Lösung sollte

Answer 1

Jetzt Meine Frage ist Datetime-Picker nicht auf Timepicker nahe kommt nach oben und unten-Taste zu aktualisieren.

Um dies achive Sie so theese Tasten behandeln müssen, dass sie von der dp.change Ereignis ignoriert werden kann:

$(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>