2017-06-11 1 views
0

J'essaie de restreindre un sélecteur en fonction de la valeur d'un autre sélecteur. Je regardais d'autres questions à poser, mais ils semblent être dépassés et ne pas travaillerjquery datepicker date restriction ne fonctionne pas

Ce que je suit

<p><input type="text" id="startdatepicker"></p> 
<p><input type="text" id="enddatepicker"></p> 

$(function() { 
    $("#startdatepicker") 
     .datepicker({ minDate: -1, maxDate:"" }) 
     .datepicker("option", "dateFormat", "dd.mm.yy"); 
}); 

$(function() { 
    $("#enddatepicker") 
     .datepicker({ 
      minDate: $("#startdatepicker").datepicker("getDate"), 
      maxDate: "" 
     }) 
     .datepicker("option", "dateFormat", "dd.mm.yy"); 
}); 

Comment faire correctement?

+0

À moins que vous configurez le deuxième sélecteur après la date du premier est sélectionné, il ne va pas travailler comme ça. Donc, j'utiliserais l'événement 'change' sur l'un pour appeler le paramètre de l'autre, après que la valeur ait été choisie. En outre, je ne vois pas de raison d'appeler 'datapicker()' deux fois, passer l'option 'dateFormat' dans les options du constructeur comme' minDate' et 'maxDate'. –

Répondre

1

C'est assez simple à réaliser:

$(function() { 
    $("#startdatepicker, #enddatepicker") 
     .datepicker({ 
      minDate: -1, 
      dateFormat: "dd.mm.yy", 
     }) 
    ; 

    $('#enddatepicker') 
     .datepicker('option', 'disabled', true); 

    $('#startdatepicker').on('change', function(){ 
     var datestamp = this.value.split('.'); 

     datestamp = new Date(
      +datestamp[2], 
      +datestamp[1], 
      +datestamp[0] 
     ); 

     if (!datestamp) return false; 

     $('#enddatepicker') 
      .datepicker('option', 'disabled', false) 
      .datepicker('option', 'minDate', datestamp) 
     ; 
    }); 
}); 

https://jsfiddle.net/zvc1p8xk/