آموزش jQuery Mobile - انتخاب تاریخ (Datepicker)

انتخاب تاریخ (Datepicker):

تابع DatePicker را می توان با ویجت هایی با استفاده از JqueryUI در تلفن همراه جی کوئری استفاده کرد زیرا از ویجت موبایل جی کوئری پشتیبانی نمی کند. برای تمرکز روی ورودی برای باز کردن یک تقویم تعاملی در یک پوشش کوچک استفاده می شود.

Popup Datapicker
زمانی که ورودی برای درج تاریخ متمرکز می شود، تقویم ظاهر می شود. ویژگی data-role = "date" را در فیلد <ورودی> اضافه کنید تا تاریخ را درج کند، در قالب dd/mm/yy نمایش داده می شود.

مثال زیر استفاده از پاپ آپ دیتاپیکر را در جی کوئری موبایل نشان می دهد.

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

دکمه رادیویی (Radiobox) - درس قبلی

درس بعدی - قابل جمع شدن (Collapsible)