Ok, oggi voglio partecipare la soluzione di un problema che si presenta con una certa frequenza quando si ha a che fare con le date ed è poco documentato in rete (io non ho trovato niente in proposito).
Il problema è il seguente: legare due campi di tipo datepicker affinché la data immessa nel primo sia la data minima selezionabile del secondo.
Ovviamente stiamo utilizzando la libreria JQuery e l'oggetto datepicker.
Facciamo un esempio che aiuti la comprensione.
Voglio registrare in due campi la data di partenza e la data di arrivo di una nave, ovviamente la data di partenza sarà inferiore alla data di arrivo e, per evitare errori da parte dell'operatore che registrerà le date, pretendo che non appena sia stata inserita la data di partenza, la data di arrivo sia maggiore o uguale di quella di partenza.
Come possiamo fare con JQuery e datepicker?
Il codice qui sotto vi fornisce tutto quello di cui avete bisogno, in testa alla pagina:
<script type="text/javascript">
//cambio dinamico del mindate
$(document).ready(function()
{
$("input.datepicker").datepicker({maxDate:"today"});
$("input#data_partenza").change(function()
{
var valore_data = $(this).val();
if(valore_data)$("input#data_arrivo").datepicker("option","minDate",valore_data);
}
);
});
</script>
E nel corpo di essa:
<table> <thead> <tr> <th colspan="2"> Gestione date </th> </tr> </thead> <tbody> <tr> <td> Data di partenza </td> <td> <input type="text" class="datepicker" id="data_partenza" /> </td> </tr> <tr> <td> Data di arrivo </td> <td> <input type="text" class="datepicker" id="data_arrivo" /> </td> </tr> </tbody> <tfoot> <tr> <td colspan="2"> <a href="https://www.unmoscerinonelweb.com/blog" target="_blank">unmoscerinonelweb.com</a> </td> </tr> </tfoot> </table>
In ogni caso potete visualizzare l'esempio funzionante e trarne spunto.
Spero di essere stato di aiuto.