jQuery Mobile date picker

Question

Is there someone out there that has a good date picker for jQuery mobile?

I\'m going to let the user select a \"from\" date and a \"to\" date and I haven\'t found anythi

Answer 1

here is a copy of my answer to another post here, related to how integrate jqueryui datepicker in jquerymobile framwework..hope it helps, like it would have helped me if it was existing :)

after a lot of search on Internet, especially comparing datebox and jqueryui datepicker (mobiscroll and mobipick are no good to me as i'am looking for a calendar view, i got to the point where i decided to use ui datepicker for few reasons :

• i use it from longtime, i know it well enough
• i needed the beforeShowDay (event if it is certainly possible to have similar fonction using datebox and events/callbacks) to customize days with classes
• i needed a header with possibilities to change month and year (also possible in datebox)
• with this experiment i already had a datepicker with a jquerymobile feel & look

I used it with :

• jquery 1.8.3
• jquery mobile 1.2.0
• jqueryui datepicker 1.8.21 (get it from here)

using datepicker with more recent versions breaks the layout on month/year change.

from here, i got the files i needed. I used several answers i found on different stackoverflow questions, to make the following changes :

• no change on jquery.ui.datepicker.mobile.css

• jquery.ui.datepicker.mobile.js new code :

  (function ($, undefined) {
  
  //cache previous datepicker ui method
  var prevDp = $.fn.datepicker;
  
  //rewrite datepicker
  $.fn.datepicker = function (options) {
  
  var dp = this;
  
  //call cached datepicker plugin
  var retValue = prevDp.apply(this, arguments);
  
  //extend with some dom manipulation to update the markup for jQM
  //call immediately
  function updateDatepicker() {
      $(".ui-datepicker-header", dp).addClass("ui-body-c ui-corner-top").removeClass("ui-corner-all");
      $(".ui-datepicker-prev, .ui-datepicker-next", dp).attr("href", "#");
      $(".ui-datepicker-prev", dp).buttonMarkup({ iconpos: "notext", icon: "arrow-l", shadow: true, corners: true });
      $(".ui-datepicker-next", dp).buttonMarkup({ iconpos: "notext", icon: "arrow-r", shadow: true, corners: true });
      $(".ui-datepicker-calendar th", dp).addClass("ui-bar-c");
      $(".ui-datepicker-calendar td", dp).addClass("ui-body-c");
      $(".ui-datepicker-calendar a", dp).buttonMarkup({ corners: false, shadow: false });
      $(".ui-datepicker-calendar a.ui-state-active", dp).addClass("ui-btn-active"); // selected date
      $(".ui-datepicker-calendar a.ui-state-highlight", dp).addClass("ui-btn-up-e"); // today"s date
      $(".ui-datepicker-calendar .ui-btn", dp).each(function () {
          var el = $(this);
          // remove extra button markup - necessary for date value to be interpreted correctly
          // only do this if needed, sometimes clicks are received that don't require update
          // e.g. clicking in the datepicker region but not on a button.
          // e.g. clicking on a disabled date (from next month)
          var uiBtnText = el.find(".ui-btn-text");
          if (uiBtnText.length)
              el.html(uiBtnText.text());
      });
  };
  
  //update after each operation
  updateDatepicker();
  
     $( dp ).on( "click change", function( event, ui)
  {
  $target=$(event.target);
  if(event.type=="click" && ($target.hasClass("ui-datepicker-month") || $target.hasClass("ui-datepicker-year")))          
      event.preventDefault();
  else
      updateDatepicker( event);
  });
  
  //return jqm obj 
  if (retValue) {
      if (!retValue.jquery) return retValue;
  }
  return this;
  };
  
  })(jQuery);
  

i use on() instead of click event and i preventDefault on click on month/year select menu.

And i use it this way :

$form
    .trigger( "create" )
    .find( "input[type='date'], input:jqmData(type='date')")
    .each(function()
        {
        $(this)
            .after( $( "
" ).datepicker(
                {
                altField            : "#" + $(this).attr( "id" ),
                altFormat           : "dd/mm/yy",
                showOtherMonths     : true,
                selectOtherMonths           : true,
                showWeek            : true,
                changeYear          : true,
                changeMonth         : true,
                beforeShowDay       : beforeShowDay
                }));
        });

with beforeShowDay being a function returning an array (see jqueryui datepicker manual).

It works for me this way and i now i just need to add events to only show calendar when date input got focus.

A link to jsbin example