web-dev-qa-db-fra.com

Changer minDate et maxDate à la volée avec jQuery DatePicker

J'ai un problème particulier avec jQuery Datepicker. Je peux facilement ajouter une plage de dates, mais je souhaite que la plage sélectionnable change en fonction de l'événement sélectionné par l'utilisateur.

Par conséquent, s’ils choisissent l’événement 1, ils ne peuvent choisir que les dates de la plage de dates de cet événement.

J'ai écrit une petite fonction simple qui est appelée chaque fois que l'utilisateur sélectionne un nouvel événement, mais elle n'affiche que les valeurs minDate/maxDate initialement définies.

function datepicker(startDate, endDate) {
  $( "#date" ).datepicker({
    inline: true,
    minDate: new Date(startDate),
    maxDate: new Date(endDate),
    dateFormat: 'dd/mm/yy' 
  });
}

J'ai essayé d'appeler $('#date').datepicker('remove'); avant d'appeler à nouveau la fonction ci-dessus pour voir si elle crée une nouvelle instance avec les dates correctes, mais cela ne semble pas fonctionner.

J'ai vérifié toutes les données via des outils de développement et tout est appelé et transmis correctement. Y a-t-il quelque chose que je puisse faire pour que cela fonctionne comme je le veux?

jqueryjquery-uidatepicker
24
Chuck Le Butt

Vous avez plusieurs options...

1) Vous devez appeler la méthode destroy() pas remove() donc ...

$('#date').datepicker('destroy');

Appelez ensuite votre méthode pour recréer l'objet datepicker.

2) Vous pouvez mettre à jour la propriété de la object existante via

$('#date').datepicker('option', 'minDate', new Date(startDate));
$('#date').datepicker('option', 'maxDate', new Date(endDate));

ou...

$('#date').datepicker('option', { minDate: new Date(startDate),
                                  maxDate: new Date(endDate) });
57
Jared

Pour de/à ce jour, voici comment j'ai implémenté la restriction des dates en fonction de la date entrée dans l'autre datepicker. Ça marche plutôt bien:

function activateDatePickers() {
    $("#aDateFrom").datepicker({
        onClose: function() {
            $("#aDateTo").datepicker(
                    "change",
                    { minDate: new Date($('#aDateFrom').val()) }
            );
        }
    });
    $("#aDateTo").datepicker({
        onClose: function() {
            $("#aDateFrom").datepicker(
                    "change",
                    { maxDate: new Date($('#aDateTo').val()) }
            );
        }
    });
}
8
MattC
$(document).ready(function() {
$("#aDateFrom").datepicker({
    onSelect: function() {
        //- get date from another datepicker without language dependencies
        var minDate = $('#aDateFrom').datepicker('getDate');
        $("#aDateTo").datepicker("change", { minDate: minDate });
    }
});

$("#aDateTo").datepicker({
    onSelect: function() {
        //- get date from another datepicker without language dependencies
        var maxDate = $('#aDateTo').datepicker('getDate');
        $("#aDateFrom").datepicker("change", { maxDate: maxDate });
    }
});
});
2
Gregorio Marciano

Je sais que vous utilisez Datepicker, mais pour certaines personnes qui n'utilisent que la date de saisie au format HTML5, voici un exemple qui explique comment faire de même: JSFiddle Link

$('#start_date').change(function(){
  var start_date = $(this).val();
  $('#end_date').prop({
    min: start_date
  });
});


/*  prop() method works since jquery 1.6, if you are using a previus version, you can use attr() method.*/
0
Matias Seguel

J'ai changé la propriété date min du sélecteur de date et heure en utilisant cette

$('#date').data("DateTimePicker").minDate(startDate);

J'espère que cette aide à quelqu'un!

0
Mustufa