Changer minDate et maxDate à la volée à l'aide de jQuery DatePicker

Je vais avoir un problème particulier avec le Datepicker de jQuery. Je peux facilement ajouter une plage de dates, mais je veux la plage de sélection de changer en fonction du cas où l'utilisateur a choisi.

Donc, si ils prennent de l'event #1, ils peuvent choisir les dates de l'événement #1 plage de dates.

J'ai écrit une petite fonction qui est appelée à chaque fois que l'utilisateur sélectionne un nouvel événement, mais il ne montre jamais le premier set minDate/maxDate valeurs.

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 la fonction ci-dessus à nouveau, pour voir si elle crée une nouvelle instance avec les dates correctes, mais il ne semble pas fonctionner.

J'ai vérifié toutes les données grâce à des outils de développement et tout ce qui est appelé et est passé correctement. Est-ce que je peux faire pour que cela fonctionne, la façon dont je le souhaite?

Avez-vous essayé $('#date').datepicker('option', {minDate: new Date(startDate)}); par api.jqueryui.com/datepicker/#method-option Qui vous permet de modifier les options à la volée.
Je ne savais pas que l'. Merci, il a travaillé un régal! Le mettre dans une réponse si vous le souhaitez.

InformationsquelleAutor Chuck Le Butt | 2013-04-28

57

Vous avez quelques options...

1) Vous devez appeler la destroy() méthode pas remove() donc...
```
$('#date').datepicker('destroy');
```
Appeler la méthode de recréer le datepicker objet.

2) Vous pouvez mettre à jour la propriété de l'existant object 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) });
```
- Les nouveaux appels de l'API pour "minDate" ou "maxDate" plutôt que "minValue" ou "maxValue". M'a pris 10 minutes pour réaliser cela (face à la paume).
- merci pour les intégrer dans le commentaire!
- J'ai essayé ce code mais j'obtiens erreur non Interceptée Type d'Erreur: datepicker est pas une fonction. =S
- cela signifie que vous n'avez pas les bons fichiers inclus sur la page. Assurez-vous que vous avez de jQuery UI inclus.
- Oui j'ai nettoyé le cache de mon navigateur, les cookies ect tout le contenu et mis à jour mes fichiers js et, enfin, en mesure d'atteindre cet. Ouf 🙂
InformationsquelleAutor Jared

À partir de /à ce jour, voici comment j'ai mis en place limitant les dates basées sur la date d'entrée dans l'autre datepicker. Fonctionne assez 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()) }
            );
        }
    });
}

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

InformationsquelleAutor Gregorio Marciano

Je sais que vous êtes en utilisant Datepicker, mais pour certaines personnes qui sont juste en utilisant HTML5 date d'entrée comme moi, il est un exemple de comment vous pouvez faire de même:
JSFiddle Lien

$('#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.*/

InformationsquelleAutor Matias Seguel

0

J'ai changé min date de la propriété de la date time picker en utilisant ce
```
$('#date').data("DateTimePicker").minDate(startDate);
```
J'espère que cela vous aide à quelqu'un !

InformationsquelleAutor Mustufa

Vous devez vous connecter pour publier un commentaire.