web-dev-qa-db-fra.com

jQuery UI Sélection d'une date de début et de fin dans la plage en fonction de la date de début

Je construis un sélecteur de date dans jQuery UI. Ce que j'essaie de faire est de définir une plage. Ainsi, lorsqu'ils sélectionnent la première date, la deuxième date apparaît et donne une fenêtre de 30 jours. J'ai essayé cela mais cela ne fonctionne pas (l'utilisateur a le choix entre 30 jours à compter d'aujourd'hui et non 30 jours à compter de la date de début):

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

Un autre problème que j'ai rencontré est que lorsque je modifie datepickerStart, il ne définira la plage de début qu'une seule fois, mais pas à chaque fois que je la change Je dois actualiser la page pour verrouiller une nouvelle date de début.

jqueryjquery-uijquery-ui-datepicker
11
Matt Coady

Vérifie ça jsfiddle ici. C'est un exemple de travail de votre problème.

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
    });
});

Comme soderslatt déjà mentionné, utilisez l’option onSelect pour définir les dates. Les autres méthodes que j'ai utilisées sont:

Je pense qu'ils sont très explicites et la documentation vous aide à comprendre comment ils fonctionnent. Si vous souhaitez définir la date du deuxième datepicker sur la date de dt1 + 1 jour, procédez de la même manière que dans cette ligne:

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

Mais bien sûr, ajoutez 1 jour et pas 30.

28
SirDerpington

Essayez d’utiliser le rappel onSelect de l’UI au lieu de .change (), http://api.jqueryui.com/datepicker/#option-onSelect

sur 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