jQuery UI Datepicker for jQuery Mobile

Can you guess which datepicker is this?

jQuery UI Datepicker for jQuery Mobile

It is the jQuery UI datepicker tweaked for jQuery Mobile!

I have written a small patch that allows you to use the jQuery UI datepicker with jQuery Mobile 1.4.x. To use the script:

  1. Include jQuery UI datepicker javascript after jQuery Mobile javascript files. You do not need the whole package; just grab the jquery.ui.datepicker.js file from from jQuery UI ZIP downloads.
  2. Include the monkey patch script; it basically replaces jQuery UI CSS classes with jQuery Mobile CSS classes in datepicker HTML.
  3. Add CSS rules to fine tune the appearance of datepicker.
  4. Call $(selector).datepicker() method on pagebeforecreate or pagecreate.

Demo

View source Open in new window

Komentar

Posting Komentar

Postingan populer dari blog ini

StackOverflow Like Pagination

Gambar
Some while ago, I built a pagination system in PHP to display a long list of pagination links. The pagination system showed at most 5 links at a time and additional links were represented by ellipsis (...). However, I was not able to deal with certain edge cases, so I drew some inspiration from the pagination system used on StackOverflow to tackle them. This is what the end result looked like: The first and last page links are always visible The previous and next page links (numeric ones) are always visible At most n page links excluding first and last page links are visible; rest are represented by ellipsis The pagination for first and last n - 1 pages is handled a bit differently Complete PHP source code below. DEMO DISINI Pagination Function <?php /** * Displays pagination links based on given parameters * * @param int $currentPage - current page * @param int $itemCount - number of items to paginate, used to calculate total number of pages * @param int $items
Baca selengkapnya

AdSense Responsive Ads - Why Not?

Gambar
Google telah secara konstan menambahkan fitur-fitur baru ke AdSense, menawarkan penerbit lebih banyak kontrol atas bagaimana iklan ditampilkan di situs web mereka. Berikut adalah beberapa fitur yang terkait dengan penerapan kode iklan yang diluncurkan selama 12 bulan terakhir: Introduction of Asynchronous Ads — July 2013 Introduction of Responsive Ads — July 2013 Introduction of Custom-Sized Ads — December 2013 At this moment, publishers can choose from standard, responsive and custom-sized ad units when creating one. If you have not chosen the ad code implementation method or you are looking forward to change it, I suggest going for responsive ads. The Problem With Standard and Custom-Sized Ads Both standard and custom-sized ads are fixed size which means they do not adapt to fluid or responsive website layout. Web designers understand that fixed size ads influence the layout of a website; and likewise, the website layout dictates the ad sizes to display. For example, conside
Baca selengkapnya

JavaScript Efek Teks Pelangi

Gambar
Pertama-tama masuklah ke halaman tata letak elemen halaman , kemudian tambahkan sebuah elemen halaman HTML/JavaScript . Salin kode ini, kemudian letakkan di dalam formulirnya: <style type="text/css"> #highlight{font:bold 50px Impact,Arial,Sans-Serif;} </style> <script language="javascript" type="text/javascript"> var teks=" EFEK PELANGI " // teks Anda di sini var speed= 20 // atur kecepatan perubahan warna if (document.all||document.getElementById) { document.write('<span id="highlight">' + teks + '</span>') var storetext=document.getElementById? document.getElementById("highlight") : document.all.highlight } else document.write(text) var hex=new Array("00","14","28","3C","50","64","78","8C","A0","B4","C8","DC","F0") var r=1 var g=
Baca selengkapnya