web-dev-qa-db-fra.com

jquery datetime picker set minDate dynamic

J'utilise un datetimepicker de trentrichardson.com.

J'ai un formulaire avec deux champs d'entrée: de et à et je veux pouvoir définir dynamiquement une minDate sur mon "to" champ égal à la valeur de mon "de".

Je sais que je devrais utiliser une option beforShow mais je ne sais pas comment implémenter la fonction.

$('.from,.to').datetimepicker({

    beforeShow: customRange

});

RÉVISÉ/SOLUTION 

function customRange(input) {   
if (input.id == 'to') {     
var x=$('#from').datepicker("getDate");
$( ".to" ).datepicker( "option", "minDate",x ); 
} 
else if (input.id == 'from') {     
var x=$('#to').datepicker("getDate");
$( ".from" ).datepicker( "option", "maxDate",x ); 
} }
jquerydatetimepickermindate
23
luca

vous pouvez définir et obtenir minDate de manière dynamique avec setter et getter:

//getter
var minDate = $( ".selector" ).datepicker( "option", "minDate" );
//setter
$( ".selector" ).datepicker( "option", "minDate", new Date(2007, 1 - 1, 1) );

expliqué ici

24
felixsigl

Si vous avez deux zones de texte avec les ID correspondants from et to et que vous voulez que la minDate de to soit la date sélectionnée de from, procédez comme suit:

$("#from").datepicker({
    minDate: 0, // to disable past dates (skip if not needed)
    onClose: function(selectedDate) {
        // Set the minDate of 'to' as the selectedDate of 'from'
        $("#to").datepicker("option", "minDate", selectedDate);
    }
});

$("#to").datepicker();
15
Tanvir

Vous pouvez restreindre la plage de datepicker .

Mais vous voulez définir cette plage lors de la création du sélecteur de date sur le "à partir de". Je vous ai fait une démo qui semble bien fonctionner pour autant que je comprends la question.

3
andyb

luca: Un petit ajout à ta réponse ...

En utilisant la fonction que vous avez suggérée, le composant heure est ignoré lors du premier affichage du datetimepicker. Si vous fermez le démodulateur de données et le rouvrez à nouveau, le composant heure réapparaîtra mystérieusement. Je ne suis pas tout à fait sûr de ce qui cause ceci, mais cela peut être corrigé avec un peu de bidouille:

function setMinMaxDate ( element )
{
    // Store current date - setting max/min date seems to destroy time component
    var val = $(element).val();

    if (element.id == 'endDate') 
    {     
        var x=$('#startDate').datetimepicker("getDate");
        $( element ).datetimepicker( "option", "minDate",x ); 
    } 
    else if (element.id == 'startDate') 
    {     
        var x=$('#endDate').datetimepicker("getDate");
        $( element ).datetimepicker( "option", "maxDate",x ); 
    }

    // Restore date
    $(element).val(val);
}
2
Matt McDonald

Il y a un exemple sur trentrichardson.com. Ils utilisent "onSelect". Pour moi ça ne marche pas parfaitement. Lors du réglage de minDate ou MaxDate, le composant heure est défini sur 0 et seule la date reste. Et je devais résoudre certains problèmes de localisation.

0
uli78

Aucune des réponses ci-dessus ne m'a aidé du tout. Cela n'a pas fonctionné ou a donné une sorte d'erreur.

Alors, je les ai fusionnées et j'ai créé la mienne. J'ai utilisé moment.js comme mentionné ci-dessus, il suffit de le télécharger et de l'inclure dans votre page.

$("#start_date").datetimepicker({
    format: 'Y-m-d H:00:00',
    onChangeDateTime: function(dp, $input){
        var dt2 = $('#end_date');
        var minDate = $('#start_date').val();
        var currentDate = new Date();
        var targetDate = moment(minDate).toDate();
        var dateDifference = currentDate - targetDate;
        var minLimitDate = moment(dateDifference).format('YYYY/MM/DD');
        var endDate = moment(dt2.val()).toDate();
        if((currentDate - endDate) >= (currentDate - targetDate))
            dt2.datetimepicker({
                'value': minDate
            });
        dt2.datetimepicker({
            'minDate': '-'+minLimitDate
        });
    }
});
$("#end_date").datetimepicker({
    format: 'Y-m-d H:00:00'
});

Je suis sûr qu'il existe un meilleur moyen de le faire mais je ne l'ai pas trouvé. J'espère donc que cela aidera quelqu'un à l'avenir.

0
Chris

Cela a fonctionné pour moi

<input type="date" name="cname" value=""  min="<?php echo date("Y-m-d") ?>"/>
0
Raghuram db