[Javascript] Modifica input date

Daniele_Carrara

Nuovo Utente
20 Apr 2018
12
0
1
23
Buongiorno a tutti,
ho bisogno di un consiglio per risolvere una scomoda situazione...
ho 2 calendari per la selezione della data all'interno del mio sito, creato con il tag input date
HTML:
<input id='ret' type='date' value='".$data_min."' name='data_ritorno' min='".$data_min."' required>
il tag è inserito da una funzione in PHP che inserisce dinamicamente la data minima selezionabile (ecco perchè ci sono delle variabili all'interno del tag).
Il problema che sto riscontrando è: c'è la possibilità tramite javascript di creare una funzione che modifica il valore minimo di uno dei 2 calendari in base alla data selezionata nell'altro?
Spero di essere stato chiaro, grazie in anticipo.
 

marlev

Utente Attivo
19 Apr 2018
80
1
6
marlev.it
Ciao, ti allego la funzione in jQuery supponendo che hai due campi cosi
PHP:
echo "<input id='arr' type='date' value='" . $data_min . "' name='data_arrivo' min='" . $data_min . "' required>";
echo "<input id='ret' type='date' value='" . $data_min . "' name='data_ritorno' min='" . $data_min . "' required>";
Questo e' il codice da inserire
HTML:
   <script>
            jQuery(document).ready(function () {
                function min_date_fix() {
                    if (jQuery("#ret").length) {
                        jQuery("#ret, #arr").on("input propertychange", function () {
                            var cur_val = jQuery(this).val();
                            jQuery("#ret, #arr").val(cur_val).attr("min", cur_val);
                        });
                    }
                }
                min_date_fix();
            });
        </script>
Se non hai la libreria jQuery nella tua pagina, puoi includere in questo modo. Ma controlla prima...
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 

Daniele_Carrara

Nuovo Utente
20 Apr 2018
12
0
1
23
Ciao Marlev, grazie per la risposta, ma alla fine sono riuscito a risolverla con una semplice funzione Javascript tramite evento onchange.
Grazie comunque!
 

Daniele_Carrara

Nuovo Utente
20 Apr 2018
12
0
1
23
HTML:
<script  type="text/javascript">
function update(){
            document.getElementById("rit").min = document.getElementById("part").value; 
            document.getElementById("rit").value = document.getElementById("part").value; 
        }
</script>

<label>Departing date</label></br><input type='date' id='part' value="<?php echo $data_min ?>" name='data_partenza' min="<?php echo $data_min ?>" onchange="update();" required></td>
<?php  echo "<td width='50%''><div id='ret'><label>Returning date </label></br><input id='rit' type='date' value='".$data_min."' name='data_ritorno' min='".$data_min."' required></div></td>";
In questo modo ogni volta che si seleziona una data nel primo calendario la data minima del secondo viene settata pari a quella selezionata nel primo.
Alla fine la soluzione è stata piuttosto semplice, il problema principale è stato il fatto che il campo date sembra avviare le funzioni js solo tramite onchange
 
Ultima modifica:

marlev

Utente Attivo
19 Apr 2018
80
1
6
marlev.it
In effetti si lancia quando e' nel focus... Prova con setinterval e richiama la tua funzione da li, espandendola un po' oppure edita js di calendario in maniera tale che lancia la tua funzione update() dopo il cambio