jQuery Mobile - Datapicker Widget

Description

The DatePicker function can be used with widgets using JqueryUI in jQuery mobile as it does not support jQuery mobile widget. It is used to focus on the input to open an interactive calendar in a small overlay.

Popup Datapicker

The calender pops up when input is focused to insert date. Add data-role = "date" attribute in the <input> field to include the date, it displays in dd/mm/yy format.

Example

Following example demonstrates the use of popup datapicker in the jQuery Mobile.

Live Demo 
<!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>

Output

Let's carry out the following steps to see how the above code works −

  • Save the above html code as popup_datapicker.html file in your server root folder.

  • Open this HTML file as http://localhost/popup_datapicker.html and the following output will be displayed.

Inline Datapicker

Include data-inline = "true" to display the interactive calendar.

Example

Following example demonstrates the use of inline datapicker in the jQuery Mobile.

Live Demo 
<!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>

Output

Let's carry out the following steps to see how the above code works −

  • Save the above html code as inline_datapicker.html file in your server root folder.

  • Open this HTML file as http://localhost/inline_datapicker.html and the following output will be displayed.

jquery_mobile_widgets.htm
Advertisements