webentwicklung-frage-antwort-db.com.de

jQuery UI Auswählen eines Start- und Enddatums innerhalb des Bereichs basierend auf Startdatum

Ich baue eine Datumsauswahl in jQuery ui. Was ich versuche zu tun, ist, einen Bereich festzulegen. Wenn sie das erste Datum auswählen, wird das zweite Datum angezeigt und ein Fenster von 30 Tagen angezeigt. Ich habe es versucht, aber es funktioniert nicht (es erlaubt dem Benutzer, 30 Tage ab heute auszuwählen, nicht 30 vom Startdatum an):

var pickDate;
$( "#datepickerEnd" ).hide();
$( "#datepickerStart" ).datepicker();
$( "#datepickerStart" ).change(function(){
    var pickDate = $( "#datepickerStart" ).val();
    $( "#datepickerEnd" ).datepicker({ minDate: pickDate, maxDate: +30 });
    $( "#datepickerEnd" ).show();
})

Ein anderes Problem ist, dass ich beim Ändern von datepickerStart den Startbereich einmal festlegt, aber nicht jedes Mal, wenn ich ihn ändere. Ich muss die Seite aktualisieren, um ein neues Startdatum zu speichern.

11
Matt Coady

Überprüfen Sie dies jsfiddle Hier. Es ist ein funktionierendes Beispiel für Ihr Problem.

HTML

<input type="text" id="dt1">
<input type="text" id="dt2">

JS

$(document).ready(function () {
    $("#dt1").datepicker({
        dateFormat: "dd-M-yy",
        minDate: 0,
        onSelect: function () {
            var dt2 = $('#dt2');
            var startDate = $(this).datepicker('getDate');
            //add 30 days to selected date
            startDate.setDate(startDate.getDate() + 30);
            var minDate = $(this).datepicker('getDate');
            var dt2Date = dt2.datepicker('getDate');
            //difference in days. 86400 seconds in day, 1000 ms in second
            var dateDiff = (dt2Date - minDate)/(86400 * 1000);

            //dt2 not set or dt1 date is greater than dt2 date
            if (dt2Date == null || dateDiff < 0) {
                    dt2.datepicker('setDate', minDate);
            }
            //dt1 date is 30 days under dt2 date
            else if (dateDiff > 30){
                    dt2.datepicker('setDate', startDate);
            }
            //sets dt2 maxDate to the last day of 30 days window
            dt2.datepicker('option', 'maxDate', startDate);
            //first day which can be selected in dt2 is selected date in dt1
            dt2.datepicker('option', 'minDate', minDate);
        }
    });
    $('#dt2').datepicker({
        dateFormat: "dd-M-yy",
        minDate: 0
    });
});

Wie bereits erwähnt, können Sie mit der Option onSelect die Daten einstellen. Andere Methoden, die ich verwendet habe, sind:

Ich denke, sie sind alle sehr selbsterklärend und die Dokumentation hilft Ihnen zu verstehen, wie sie funktionieren. Wenn Sie das Datum der zweiten Datumsauswahl auf das Datum von dt1 + 1 Tag setzen möchten, gehen Sie wie folgt vor:

startDate.setDate(startDate.getDate() + 30);

Aber natürlich 1 Tag und nicht 30 hinzufügen.

28
SirDerpington

Verwenden Sie das ui onSelect-Callback anstelle von .change (), http://api.jqueryui.com/datepicker/#option-onSelect

auf init: 

var $datepickerStart = $("#datepickerStart");
$datepickerStart.datepicker({
    onSelect: function( selectedDate ) {
        $datepickerStart.datepicker( "option", "minDate", selectedDate );
    }
});
2
anderssonola
$("#start_date").datepicker().on('changeDate', function(selected){
        startDate = new Date(selected.date.valueOf());
        $('#end_date').datepicker('setStartDate', startDate);
    });  

    $("#end_date").datepicker().on('changeDate', function(selected){
        startDate = new Date(selected.date.valueOf());
        $('#start_date').datepicker('setEndDate', startDate);
    });
0
Saurabh