Datepicker Bereich funktioniert nicht

Ich versuche, einen Datumsbereich zu erstellen, in dem nach der Auswahl von start_date der end_date nur dem Benutzer erlaubt, Daten nach dem start_date und umgekehrt auszuwählen. Hier ist ein Code-Schnipsel:Datepicker Bereich funktioniert nicht

main.js 
function set_parameters() { 
    var date_start_input=$('#start_date'); 
    var date_end_input=$('#end_date'); 
    var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body"; 
    var options_start={ 
     format: 'MM dd, yyyy', 
     container: container, 
     todayHighlight: true, 
     autoclose: true, 
     orientation: 'top left', 
     onSelect: function(selectedDate) { 
     date_end_input.datepicker("option", "maxDate", selectedDate); 
     } 
    }; 
    var options_end={ 
     format: 'MM dd, yyyy', 
     container: container, 
     todayHighlight: true, 
     autoclose: true, 
     orientation: 'top left', 
     onSelect: function(selectedDate) { 
     date_start_input.datepicker("option", "minDate", selectedDate); 
     } 
    }; 
    date_start_input.datepicker(options_start); 
    date_end_input.datepicker(options_end); 
}; 

$(document).ready(function() { 
    set_parameters(); 
}); 

index.html 
<head> 
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script> 
    <link rel="stylesheet" href="https://formden.com/static/cdn/bootstrap-iso.css" /> 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/> 
</head> 
... 
<input class="form-control" id="start_date" name="start_date" placeholder="MM DD, YYYY" type="text" style="border-radius: 0;"/> 
<input class="form-control" id="end_date" name="end_date" placeholder="MM DD, YYYY" type="text" style="border-radius: 0;"/> 
...

Ich habe versucht, Lösungen von ein paar Themen noch keiner von ihnen arbeitete für mich. Ich glaube, dass die wichtigsten Dinge sind, Max- und Min-Datum zu setzen, wenn die Änderung in Daten vorgenommen wird.

Quelle

2016-10-26 Godric

Haben Sie versucht, tauschen, wo Sie "MaxDate" und "minDate" verwenden? – HarlemSquirrel

Es funktioniert nicht. Eigentlich funktioniert alles mit der Aufnahme des Datums ABER min/max. – Godric

Es gibt ein paar Fehler im Code ist:

die picker keine andere Wahl hat onSelect, stattdessen müssen Sie
die Datumsauswahl für changeDate Ereignis hören weder minDate noch maxDate Option/Methode, Sie haben setStartDate und setEndDate verwenden

Hier ist ein funktionierendes Beispiel:

function set_parameters() { 
 
    var date_start_input = $('#start_date'); 
 
    var date_end_input = $('#end_date'); 
 
    var container = $('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body"; 
 
    
 
    var options = { 
 
    format: 'MM dd, yyyy', 
 
    container: container, 
 
    todayHighlight: true, 
 
    autoclose: true, 
 
    orientation: 'top left' 
 
    }; 
 

 
    date_start_input.datepicker(options).on('changeDate', function(e){ 
 
    date_end_input.datepicker("setStartDate", e.date); 
 
    }); 
 
    date_end_input.datepicker(options).on('changeDate', function(e){ 
 
    date_start_input.datepicker("setEndDate", e.date); 
 
    }); 
 
}; 
 

 
$(document).ready(function() { 
 
    set_parameters(); 
 
});

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script> 
 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script> 
 

 
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet"/> 
 
<link rel="stylesheet" href="https://formden.com/static/cdn/bootstrap-iso.css" /> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/> 
 

 
<input class="form-control" id="start_date" name="start_date" placeholder="MM DD, YYYY" type="text" style="border-radius: 0;"/> 
 
<input class="form-control" id="end_date" name="end_date" placeholder="MM DD, YYYY" type="text" style="border-radius: 0;"/>

Quelle

2016-10-26 18:43:32 VincenzoC

Es funktioniert! Vielen Dank! – Godric

Ich denke, der Code, den Sie brauchen, ist dies:

<div class="container"> 
<div class='col-md-5'> 
    <div class="form-group"> 
     <div class='input-group date' id='datetimepicker6'> 
      <input type='text' class="form-control" /> 
      <span class="input-group-addon"> 
       <span class="glyphicon glyphicon-calendar"></span> 
      </span> 
     </div> 
    </div> 
</div> 
<div class='col-md-5'> 
    <div class="form-group"> 
     <div class='input-group date' id='datetimepicker7'> 
      <input type='text' class="form-control" /> 
      <span class="input-group-addon"> 
       <span class="glyphicon glyphicon-calendar"></span> 
      </span> 
     </div> 
    </div> 
</div> 
</div> 
<script type="text/javascript"> 
$(function() { 
    $('#datetimepicker6').datetimepicker(); 
    $('#datetimepicker7').datetimepicker({ 
     useCurrent: false //Important! See issue #1075 
    }); 
    $("#datetimepicker6").on("dp.change", function (e) { 
     $('#datetimepicker7').data("DateTimePicker").minDate(e.date); 
    }); 
    $("#datetimepicker7").on("dp.change", function (e) { 
     $('#datetimepicker6').data("DateTimePicker").maxDate(e.date); 
    }); 
}); 
</script>

Das ist nicht mein Code. Ich habe es hier gefunden: https://eonasdan.github.io/bootstrap-datetimepicker/#linked-pickers.

Quelle

2016-10-26 16:48:48 Thanasis

Leider funktioniert es nicht. – Godric

Es sieht aus wie vielleicht waren Sie gerade eine schließende Klammer in Ihrem Dokument bereit Funktion

$(document).ready(function() { 
    set_parameters(); 
}

function set_parameters() { 
 
    var date_start_input=$('#start_date'); 
 
    var date_end_input=$('#end_date'); 
 
    var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body"; 
 
    var options_start={ 
 
     format: 'MM dd, yyyy', 
 
     container: container, 
 
     todayHighlight: true, 
 
     autoclose: true, 
 
     orientation: 'top left', 
 
     onSelect: function(selectedDate) { 
 
     date_end_input.datepicker("option", "maxDate", selectedDate); 
 
     } 
 
    }; 
 
    var options_end={ 
 
     format: 'MM dd, yyyy', 
 
     container: container, 
 
     todayHighlight: true, 
 
     autoclose: true, 
 
     orientation: 'top left', 
 
     onSelect: function(selectedDate) { 
 
     date_start_input.datepicker("option", "minDate", selectedDate); 
 
     } 
 
    }; 
 
    date_start_input.datepicker(options_start); 
 
    date_end_input.datepicker(options_end); 
 
}; 
 

 
$(document).ready(function() { 
 
    set_parameters(); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> 
 

 

 
<head> 
 
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script> 
 
    <link rel="stylesheet" href="https://formden.com/static/cdn/bootstrap-iso.css" /> 
 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script> 
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/> 
 
</head> 
 
... 
 
<input class="form-control" id="start_date" name="start_date" placeholder="MM DD, YYYY" type="text" style="border-radius: 0;"/> 
 
<input class="form-control" id="end_date" name="end_date" placeholder="MM DD, YYYY" type="text" style="border-radius: 0;"/>

Sie auch mehr über jQuery UI Datepicker here lesen fehlen können, wenn Sie nicht bereits wissen, darüber.

Quelle

2016-10-26 16:53:04 HarlemSquirrel

Es tut mir leid, ich habe gerade einen Fehler bemerkt. Ich habe die Klammern nicht kopiert. – Godric

Datepicker Bereich funktioniert nicht

Antwort

Verwandte Themen