jQuery Mobile - Widget Datapicker

Descrizione

La funzione DatePicker può essere utilizzata con i widget che utilizzano JqueryUI in jQuery mobile poiché non supporta il widget jQuery mobile. Viene utilizzato per concentrarsi sull'input per aprire un calendario interattivo in una piccola sovrapposizione.

Popup Datapicker

Il calendario si apre quando l'input è focalizzato per inserire la data. Inseriscidata-role = "date"attributo nel campo <input> per includere la data, viene visualizzato nel formato gg / mm / aa .

Esempio

L'esempio seguente mostra l'uso del datapicker popup in jQuery Mobile.

<!DOCTYPE html>
<html>
   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <link rel = "stylesheet" href = "https://rawgithub.com/arschmitz/jquery-mobile-datepicker-wrapper/master/jquery.mobile.datepicker.css" />
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
      <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
      <script src = "https://rawgithub.com/jquery/jquery-ui/1-10-stable/ui/jquery.ui.datepicker.js"></script>
      <script src = "https://rawgithub.com/arschmitz/jquery-mobile-datepicker-wrapper/master/jquery.mobile.datepicker.js"></script>
   </head>
      
   <body>
      <h2>Popup Datapicker Example</h2>
      <form>
         <input type = "text" data-role = "date">
      </form>
   </body>
</html>

Produzione

Eseguiamo i seguenti passaggi per vedere come funziona il codice sopra:

  • Salva il codice html sopra come popup_datapicker.html file nella cartella principale del server.

  • Apri questo file HTML come http: //localhost/popup_datapicker.html e verrà visualizzato il seguente output.

Datapicker in linea

Includere data-inline = "true" per visualizzare il calendario interattivo.

Esempio

L'esempio seguente mostra l'uso del datapicker inline in jQuery Mobile.

<!DOCTYPE html>
<html>
   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <link rel = "stylesheet" href = "https://rawgithub.com/arschmitz/jquery-mobile-datepicker-wrapper/master/jquery.mobile.datepicker.css" />
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
      <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
      <script src = "https://rawgithub.com/jquery/jquery-ui/1-10-stable/ui/jquery.ui.datepicker.js"></script>
      <script src = "https://rawgithub.com/arschmitz/jquery-mobile-datepicker-wrapper/master/jquery.mobile.datepicker.js"></script>
   </head>
   
   <body>
      <h2>Popup Datapicker Example</h2>
      <form>
         <input type = "text" data-role = "date" data-inline = "true">
      </form>
   </body>
</html>

Produzione

Eseguiamo i seguenti passaggi per vedere come funziona il codice sopra:

  • Salva il codice html sopra come inline_datapicker.html file nella cartella principale del server.

  • Apri questo file HTML come http: //localhost/inline_datapicker.html e verrà visualizzato il seguente output.