Ich möchte verwandtes Zeitfeld mit datetimepicker machen

Question

ich möchte Beziehung zwischen dem Datumfeld und dem Antherezeitfeld herstellen, also wenn ich Datum vorwähle, gibt es mir gültige Zeit in diesem Datum zur Reservierung und nach ich wähle Startzeit es aus wird mir im thierd Feld Endzeit es Zeit 30 min

HTML-Code ist

<div class="col-1-4 col-1-4-sm"> 
 
       <div class="controls"> 
 
        <input type="date" id="date" class="floatLabel form_date " name="arrive" > 
 
        <label for="arrive" class="label-date"><i class="fa fa-calendar"></i>&nbsp;&nbsp;Day</label> 
 
        <input type="date" class="datetimepicker" id="Linked" value="" readonly> 
 
       </div> 
 

 

 
      </div> 
 
      <div class="col-1-4 col-1-4-sm"> 
 
       <div class="controls"> 
 
        <input type="date" id="Start" class="floatLabel form_time" name="depart" /> 
 
        <label for="depart" class="label-date"><i class="fa fa-calendar"></i>&nbsp;&nbsp;start time</label> 
 
       </div> 
 
      </div> 
 

 
      <div class="col-1-4 col-1-4-sm"> 
 
       <div class="controls"> 
 
        <input type="date" id="End" class="floatLabel" name="depart" /> 
 
        <label for="depart" class="label-date"><i class="fa fa-calendar"></i>&nbsp;&nbsp;end time</label> 
 
       </div> 
 
      </div>

JavaScript starten werden müssen:

var dateToday = new Date(); 
 

 
$(function() { 
 
    
 
    $('.form_date').datetimepicker({ 
 
     //language: 'fr', 
 
     format:'dd/mm/yyyy', 
 
     //startDate: new date(), 
 
     weekStart: 1, 
 
     todayBtn: 1, 
 
     autoclose: 1, 
 
     startDate: dateToday, 
 
     todayHighlight: 1, 
 
     startView: 2, 
 
     minView: 2, 
 
     forceParse: 0, 
 
     linkField: "Linked", 
 
     linkFormat: "DD" 
 
    }); 
 
    $('.form_time').datetimepicker({ 
 
     //language: 'fr', 
 
     format:'H:ii p', 
 
     weekStart: 1, 
 
     todayBtn: 1, 
 
     autoclose: 1, 
 
     startDate: dateToday, 
 
     startView: 1, 
 
     minView: 0, 
 
     maxView: 1, 
 
     forceParse: 1, 
 
     showMeridian: 1, 
 
     minuteStep: 30, 
 

 
     linkField: "End", 
 
     linkFormat: "h:ii+30 p" 
 

 
    }); 
 

 
});

Answer 1

Zeit vor habe ich versucht, etwas Ähnliches und beschlossen, nicht bootrap-Datetime zu verwenden, weil es nicht mein Bedürfnis passen. Y entschied, diese plugin zu verwenden, ist es ein bisschen flexibler. Überprüfen Sie den onChangeDatetime Rückruf und die allowedTimes Eigenschaft. Ich bin mir nicht sicher, ob der Callback ausgelöst wird, wenn sich Datum und Uhrzeit geändert haben oder wenn nur einer von ihnen. Vielleicht hilft es, Felder für Datum und Uhrzeit auseinander zu halten.