Modifier l'affichage des mois dans le datepicker de jQuery, selon une autre instance datepicker

J'ai deux datepicker les champs, on est " date de début' l'autre 'end_date'.

Je voudrais avoir la fonction qui, après que l'utilisateur a sélectionné 'date de début', puis sur 'date de fin calendrier devrait afficher par défaut le mois contenir le " date de début'.

Vice-versa, si le premier utilisateur de sélectionner date de fin, le calendrier de l' date de début devrait afficher le mois contenir sélectionné date de fin.

comment mettre en œuvre à l'intérieur de datepicker de jQuery? Quel est le datepicker options je doit la définir?

$("#start_date").datepicker({
  //which datepicker options should put here?
})
Vous pourriez vouloir vérifier la semi-officiel de jQuery UI date sélecteur de gamme. Ce n'est pas exactement ce que vous demandez, mais il peut être une bonne alternative. Il propose quelques fonctionnalités qui est une sorte de gentil.
Je vais avoir un coup d'oeil à semi-officielle, mais maintenant, je voudrais faire cette après ce que j'ai 🙂
Essayez d'utiliser le "onSelect la fonction" modifier "defaultDate" option.

OriginalL'auteur Mellon | 2011-03-15

  1. 6

    Cela définit la date par défaut de l'autre calendrier que vous le souhaitez. Si une date est déjà sélectionné, il ne change pas.

        $(document).ready(function() {
        $( "#datepicker" ).datepicker({onSelect: function(dateText, inst) {
            $( "#datepicker2" ).datepicker( "option", "defaultDate", dateText );
        }});
        $( "#datepicker2" ).datepicker({onSelect: function(dateText, inst) {
            $( "#datepicker" ).datepicker( "option", "defaultDate", dateText );
        }});
    });

    Si vous voulez forcer l'autre sélecteur de date pour réinitialiser c'est déjà sélectionné date pour les autres calendriers mois, utilisez ceci:

    $(document).ready(function() {
        $( "#datepicker" ).datepicker({onSelect: function(dateText, inst) {
            $( "#datepicker2" ).datepicker( "setDate" , dateText )
        }});
        $( "#datepicker2" ).datepicker({onSelect: function(dateText, inst) {
            $( "#datepicker" ).datepicker( "setDate" , dateText )
        }});
});
    cool, un code élégant à l'approche de l'objectif. merci!
    parfois, le datepicker1 définit la valeur de la currentDate, il y a probablement une assignation au cours de la "ensemble defaultDate" événement

    OriginalL'auteur AlfaTeK

  2. 1

    Vous pouvez essayer ce pour éviter que l'utilisateur en sélectionnant end-date moins de start-date et start-date plus de end-date.

        $("#start_date").datepicker({
        defaultDate: '-7d',
        changeMonth: true,
        changeYear: true,
        onSelect: function (dateStr) {
            $("end-date").datepicker('option', 'minDate', $(this).datepicker('getDate') || '-1m');
        }
    });
    $("end-date").datepicker({
        defaultDate: new Date(),
        changeMonth: true,
        changeYear: true,
        onSelect: function (dateStr) {
            $("#start_date").datepicker('option', 'maxDate', $(this).datepicker('getDate') || 0);
        }
    });

    OriginalL'auteur Aivan Monceller

  3. 0

    Ma suggestion est d'enregistrer la date sélectionnée dans datepicker1 et, avant de montrer la datepicker2, ensemble mannually la même date. Donc, datepicker1.date == datepicker2.date. J'espère que cela vous aide.

    var dateselected = '';

$( "#datepicker1" ).datepicker({
  onSelect: function(dateText, inst) {
    dateselected = dateText;
  } 
});
$( "#datepicker2" ).datepicker({
  beforeShow: function(input, inst) {
    if(dateselected != '')
       $( "#datepicker2" ).datepicker('setDate',dateselected);
  } 
});

    Vous pouvez le voir courir dans le lien suivant: http://jsbin.com/orizi4

    OriginalL'auteur Fran Verona