BootstrapSviluppo

Bootstrap: Cambia anno in input con Datepicker

Se stai cercando un modo semplice e veloce per cambiare l’anno in una input text con Datepicker, sei nel posto giusto. Utilizzando Bootstrap e jQuery, è possibile creare una pagina HTML5 con pochi passaggi e richiamare i giusti script per far funzionare il tutto.

Innanzitutto, è necessario creare la pagina index.html (o una a vostra scelta) e includere le librerie Bootstrap e jQuery. Successivamente, possiamo scrivere il codice HTML5 per creare l’input text e l’elemento Datepicker. Utilizzando gli attributi “data-provide” e “data-date-format”, possiamo specificare che vogliamo utilizzare il Datepicker e il formato della data che preferiamo.

Una volta creato l’HTML, dobbiamo richiamare i giusti script per far funzionare il Datepicker. Possiamo farlo includendo i seguenti script nella nostra pagina:

<!DOCTYPE html>
<html>
  <head>
    <title>Land of World: Test Datepicker</title>
    <!-- includiamo lo script jQuery -->
    <script src="jquery.js"></script>
    <!-- includiamo lo script bootstrap con la datepicker -->
    <script src="bootstrap-datepicker.js"></script>
    <!-- includiamo il foglio di stile per la datepicker -->
    <link href="bootstrap-datepicker.css" rel="stylesheet">
    <script>
      $(document).ready(function() {
        $(".anno").datepicker({
          format: "yyyy",
          viewMode: "years",
          minViewMode: "years",
          setDate: "2019"
        });
      });
    </script>
  </head>
  <body>
    <div class="anno">
      <input type="text" class="acquisisciAnno" name="anno" disabled>
    </div>
  </body>
</html> 
/ 5
Grazie per aver votato!

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *