web-dev-qa-db-fra.com

Jquery datepicker restreindre les dates dans le deuxième champ de date en fonction de la date sélectionnée dans le premier champ de date

J'utilise le sélecteur de date Jquery et j'ai le code suivant où lorsque l'utilisateur sélectionne une date, le champ ci-dessous est rempli avec la date +1

$('#dt2').datepicker({
        dateFormat: "dd-M-yy" 
    });

$("#dt1").datepicker(
    {dateFormat: "dd-M-yy", 
    minDate:  0,
onSelect: function(date){
var date2 = $('#dt1').datepicker('getDate');
            date2.setDate(date2.getDate()+1);
            $('#dt2').datepicker('setDate', date2);

Je voudrais limiter les dates dans dt2 champ qui ne doit pas être inférieur à la date dans dt1 champ. Par exemple. Si la date est sélectionnée dans dt1 est 01-May-2013, puis l'utilisateur est autorisé à choisir la date après 01-May-2013, pas moins que 02-May-2013

Comment puis-je restreindre la sélection de date dans le champ de date 2?

jqueryhtmldatepickerjquery-ui-datepicker
11
Jåcob

J'ai créé un jsfiddle pour vous. Je ne suis pas sûr à 100% si c'est "infaillible" mais pour empêcher les utilisateurs de taper manuellement une date, vous pouvez définir les entrées sur readonlye.g.

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

En ce moment, je vérifie le dt2 onClose et si sa date est inférieure à la date de dt1, je le corrige. De plus, si une date est sélectionnée dans dt1, le minDate de dt2 est réglé sur dt1 date +1.

$(document).ready(function () {

    $("#dt1").datepicker({
        dateFormat: "dd-M-yy",
        minDate: 0,
        onSelect: function (date) {
            var date2 = $('#dt1').datepicker('getDate');
            date2.setDate(date2.getDate() + 1);
            $('#dt2').datepicker('setDate', date2);
            //sets minDate to dt1 date + 1
            $('#dt2').datepicker('option', 'minDate', date2);
        }
    });
    $('#dt2').datepicker({
        dateFormat: "dd-M-yy",
        onClose: function () {
            var dt1 = $('#dt1').datepicker('getDate');
            var dt2 = $('#dt2').datepicker('getDate');
            //check to prevent a user from entering a date below date of dt1
            if (dt2 <= dt1) {
                var minDate = $('#dt2').datepicker('option', 'minDate');
                $('#dt2').datepicker('setDate', minDate);
            }
        }
    });
});

Voir le jsfiddle

40
SirDerpington

Voici comment je le fais -

DÉMO

Et le code est le suivant

$('#dt2').datepicker({
    dateFormat: "dd-M-yy" 
});

$("#dt1").datepicker({
    dateFormat: "dd-M-yy", 
    minDate:  0,
    onSelect: function(date){            
        var date1 = $('#dt1').datepicker('getDate');           
        var date = new Date( Date.parse( date1 ) ); 
        date.setDate( date.getDate() + 1 );        
        var newDate = date.toDateString(); 
        newDate = new Date( Date.parse( newDate ) );                      
        $('#dt2').datepicker("option","minDate",newDate);            
    }
});
18
SachinGutte

je viens de changer votre code, de sorte que la date min pour la date2 soit définie automatiquement et si la date1 est supérieure à la date2, elle a défini la date2 = date1

  $("#dt1").datepicker({
            dateFormat: "dd/mm/yy",
            onSelect: function (date) {
                var dt1 = $('#dt1').datepicker('getDate');
                var dt2 = $('#dt2').datepicker('getDate');
                if (dt1 > dt2) {
                    $('#dt2').datepicker('setDate', dt1);
                }
                $('#dt2').datepicker('option', 'minDate', dt1);
            }
        });
        $('#dt2').datepicker({
            dateFormat: "dd/mm/yy",
            minDate: $('#dt1').datepicker('getDate'),
            onClose: function () {
                var dt1 = $('#dt1').datepicker('getDate');
                var dt2 = $('#dt2').datepicker('getDate');
                //check to prevent a user from entering a date below date of dt1
                if (dt2 <= dt1) {
                    var minDate = $('#dt2').datepicker('option', 'minDate');
                    $('#dt2').datepicker('setDate', minDate);
                }
            }
        });
4
kannan