Exécuter l'événement .bind onLoad pour Jquery Date Picker

Question

J'utilise kelvin lucks jquery date picker. J'ai un sélecteur de dates de début et de fin configuré de telle sorte que lorsque la date de début est sélectionnée, il attribue la même date à la date de fin et la date de fin assure que son calendrier ne permet pas de sélectionner des dates avant la date de début .

Fonctionne parfaitement, sauf si vous sélectionnez la date de fin sans toucher à la date de début, vous pouvez définir une date de fin avant la date de début. Pas bon!

$(function() 
{ 
    $('.date-pick').datePicker({startDate:'2000-01-01', clickInput:true}) 

     $('#start-date').bind('dpClosed', function(e, selectedDates) { 
       var d = selectedDates[0]; 
       if (d) { 
      d = new Date(d); 
      $('#end-date').dpSetStartDate(d.addDays(0).asString()).dpSetSelected(d.asString()).val($(this).val()); 
     } 
    }); 
}); 

Parce que je suis préremplissage les champs d'entrée en utilisant PHP, tout ce que je veux faire est déclencheur $('#end-date').dpSetStartDate de sorte que les mises à jour de la date de fin lorsque le chargement du document. À l'heure actuelle, il ne met à jour que sur $('#start-date').bind('dpClosed', function(e, selectedDates) {

Comment faire?

Merci,

Tim

Answer 1

Vous ne pouvez pas déclencher tout l'événement, malheureusement, parce que vous essayez sur selectedDates des arguments ... mais il y a une autre façon d'obtenir ces données: $('#start-date').dpGetSelected(). En utilisant cela, vous pouvez alors .trigger() l'événement chaque fois que vous voulez (immédiatement) mettre à jour la gamme, comme #end-date ceci:

$(function() { 
    $('.date-pick').datePicker({startDate:'2000-01-01', clickInput:true}); 
    $('#start-date').bind('dpClosed', function(e, selectedDates) { 
     var d = $('#start-date').dpGetSelected()[0]; 
     if (d) { 
     d = new Date(d); 
     $('#end-date').dpSetStartDate(d.addDays(0).asString()).dpSetSelected(d.asString()).val($(this).val()); 
    } 
    }).trigger('dpClosed'); //call that event handler we just bound 
}); 

You can test it out here.

Answer 2

Si je comprends bien, vous essayez de vous assurer que la date à laquelle l'utilisateur entre dans le champ de date de fin est à compter de la date de leur entrée dans le champ de date de début.

Pour ce faire, vous aurez besoin de se lier à l'événement dpClosed pour les deux sélecteurs de date, et exécuter quelque chose comme cette logique (pseudo-code):

var start = getSelectedStartDate(); 
var end = getSelectedEndDate(); //you'll need to write these functions, but you get the idea 
if (end < start) { 
    // set the end date field to the selected start date 
    $("#end-date").dpSetSelected(start); //not sure if this is the only thing you have to do, but again, you get the idea 
} 

L'idée est que si jamais la date de fin tombe avant la date de début lorsque l'utilisateur sélectionne une date dans l'un ou l'autre champ, la date de début sera placée dans le champ de date de fin.