[Javascript] Modifica input date

Discussione in 'Javascript' iniziata da Daniele_Carrara, 23 Aprile 2018.

  1. Daniele_Carrara

    Daniele_Carrara Nuovo Utente

    Registrato:
    20 Aprile 2018
    Messaggi:
    12
    Mi Piace Ricevuti:
    0
    Punteggio:
    1
    Sesso:
    Maschio
    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.
     
  2. marlev

    marlev Utente Attivo

    Registrato:
    19 Aprile 2018
    Messaggi:
    80
    Mi Piace Ricevuti:
    1
    Punteggio:
    6
    Sesso:
    Maschio
    Home Page:
    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>
    
     
  3. Daniele_Carrara

    Daniele_Carrara Nuovo Utente

    Registrato:
    20 Aprile 2018
    Messaggi:
    12
    Mi Piace Ricevuti:
    0
    Punteggio:
    1
    Sesso:
    Maschio
    Ciao Marlev, grazie per la risposta, ma alla fine sono riuscito a risolverla con una semplice funzione Javascript tramite evento onchange.
    Grazie comunque!
     
  4. marlev

    marlev Utente Attivo

    Registrato:
    19 Aprile 2018
    Messaggi:
    80
    Mi Piace Ricevuti:
    1
    Punteggio:
    6
    Sesso:
    Maschio
    Home Page:
    Posta qui la tua soluzione )
     
  5. Daniele_Carrara

    Daniele_Carrara Nuovo Utente

    Registrato:
    20 Aprile 2018
    Messaggi:
    12
    Mi Piace Ricevuti:
    0
    Punteggio:
    1
    Sesso:
    Maschio
    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: 23 Aprile 2018
  6. marlev

    marlev Utente Attivo

    Registrato:
    19 Aprile 2018
    Messaggi:
    80
    Mi Piace Ricevuti:
    1
    Punteggio:
    6
    Sesso:
    Maschio
    Home Page:
    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
     
Sto caricando...

Condividi questa Pagina