jQuery Mobile: widget de selector de datos

Descripción

La función DatePicker se puede usar con widgets que usan JqueryUI en jQuery mobile ya que no es compatible con el widget jQuery mobile. Se utiliza para centrarse en la entrada para abrir un calendario interactivo en una pequeña superposición.

Selector de datos emergente

El calendario aparece cuando la entrada se enfoca para insertar la fecha. Añadirdata-role = "date"atributo en el campo <input> para incluir la fecha, se muestra en formato dd / mm / aa .

Ejemplo

El siguiente ejemplo demuestra el uso del selector de datos emergente en 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>

Salida

Realicemos los siguientes pasos para ver cómo funciona el código anterior:

Guarde el código html anterior como popup_datapicker.html archivo en la carpeta raíz de su servidor.
Abra este archivo HTML como http: //localhost/popup_datapicker.html y se mostrará el siguiente resultado.

Selector de datos en línea

Incluir data-inline = "true" para mostrar el calendario interactivo.

Ejemplo

El siguiente ejemplo demuestra el uso del selector de datos en línea en 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>

Salida

Realicemos los siguientes pasos para ver cómo funciona el código anterior:

Guarde el código html anterior como inline_datapicker.html archivo en la carpeta raíz de su servidor.
Abra este archivo HTML como http: //localhost/inline_datapicker.html y se mostrará el siguiente resultado.

↰ Previous page