31

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 anything good for this situation.

Any ideas?

danielrvt-sgb
  • 1,118
  • 5
  • 17
  • 33
RickardP
  • 2,558
  • 7
  • 34
  • 42

8 Answers8

30

I suggest Datebox

https://github.com/jtsage/jquery-mobile-datebox

or Mobiscroll

http://mobiscroll.com/

If you want something in an Android flavour, try my very own Mobi Pick

http://mobipick.sustainablepace.net/

Christoph Baudson
  • 1,071
  • 11
  • 12
  • this seems to be broken now, the demo pages. none of demos work anymore – Rubytastic Dec 05 '12 at 19:45
  • @Rubytastic yeah I had to move to another provider... sorry for the inconvenience :-( Back online now :-) – Christoph Baudson Dec 11 '12 at 20:33
  • @sustainableplace: great you resolved the issue, github free quality project hosting :) it looks very good, for now resolved to a default list view – Rubytastic Dec 12 '12 at 01:26
  • 1
    DateBox won't work well if it overlaps any other widget in your page. They kind of solved this out by displaying the popup right above the original input, wich is disabled on display. Any other widget will be triggered by the "Save date" button or any other button that belongs to de datebox. - Not recommended at all. – danielrvt-sgb Dec 21 '12 at 15:53
  • 1
    Datebox has one annoying drawback which is the license: cite "CC 3.0 Attribution. May be relicensed without permission/notification". What does that mean? How can I use this now? – Udo May 23 '13 at 13:04
  • @sustainablepace I tried your date picker It works great :) Is there any timePicker as well or how can I extend this to pick time – Sourabh Saldi Aug 30 '13 at 10:42
19

Try Mobiscroll, a customizable datepicker optimized for touch devices

istvan.halmen
  • 3,320
  • 1
  • 23
  • 29
  • 1
    mobiscroll with jQM Theme integration: http://blog.mobiscroll.com/jquery-mobile-theme-integration/ – Levi Kovacs May 17 '12 at 05:43
  • 1
    Is there a free but more limited version? I just checked their site and the cheapest one costs around $190, and looks like the free one is a 1 month trial money back, so it means you still have to pay – Juan Carlos Alpizar Chinchilla Jun 11 '14 at 16:16
6

Here is the datepicker specially for mobile

http://jquerymobile.com/demos/1.0a4.1/experiments/ui-datepicker/

Tushar Ahirrao
  • 12,669
  • 17
  • 64
  • 96
5

I worked on updating the jquery ui datepicker to latest versions of jquery , jqueryui and jquery mobile so for jq1.9.1 jqui 1.10.2 and jqm 1.3.0. I prefered to leave as is my previous answer so you can see how it evolved.

the changeMonth and changeYear dropdown needed special care to work (unstylying was frequent)

here it is how i updated the experimental jqueryui datepicker for jqmobile :

js bin code snippet

You can link to the datepicker script instead of the whole jqueryui package.

The readonly prop prevents the keyboard to appear on ios

It is just a tweak of the datepicker to make it work on jqm, the goal would be to be able to override the _generatehtml function of datepicker widget and being able to give as input te jquery mobile theme to use. So you'll not need that whole bunch of addClass and avoid unnecessary DOM manipulation

I only tested for ios 6 (iphone, ipad) and desktop (chrome, firefox, safari), let us know about other tests.

Hope it helps as mush as needed it :)

here is all the code separated in html, js and css :

HTML

<!DOCTYPE html> 
<html> 
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Jqueryui 1.10.2 datepicker Integration in jquery mobile 1.3.0 and jquery 1.9.1 by aureltime</title> 
    <link rel="stylesheet" href="//ajax.aspnetcdn.com/ajax/jquery.mobile/1.3.0/jquery.mobile-1.3.0.min.css">
    <script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js"></script>
    <script src="//ajax.aspnetcdn.com/ajax/jquery.mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
</head> 
<body>  
<div data-role="page">
    <div data-role="header">
        <h1>jQuery UI's Datepicker Styled for mobile adapted by Aureltime</h1>      
    </div>
    <div data-role="content">
        <form action="#" method="get" id="form">
            <div data-role="fieldcontain">
                <label for="date">Date:</label>
                <input type="date" name="date" id="date" value=""  />
            </div>      
        </form>
    </div>
</div>
</body>
</html>

JS

//reset type=date inputs to text
$.mobile.page.prototype.options.degradeInputs.date = true;

$("#form").trigger("create");
$( document )
  .on( "pageinit", function(){

$("#date")
    .prop("readonly", "true")
    .on("click", function(){
$input=$(this);
$next=$input.next();

if($next.hasClass("hasDatepicker"))
  $next.hide();

$input
      .hide()
      .after( $( "<div />", {   id  :   "datepicker_"+$input.attr("id")}).datepicker(
        {
          altField          : "#" + $input.attr( "id" ),
          altFormat         : "dd/mm/yy",
          defaultDate       : $input.val(),
          showOtherMonths   : true,
          selectOtherMonths : true,
          //showWeek        : true,
          changeYear        : true,
          changeMonth       : true,
          //showButtonPanel : true,
          //beforeShowDay   : beforeShowDay,
          onSelect          : function( dateText, inst)
          {             $("#datepicker_"+$input.attr("id")).hide();
$input.show();
          }
        }));
    });
        });


(function($, undefined ) {

    //cache previous datepicker ui method
    var prevDp = $.fn.datepicker;

    //rewrite datepicker
    $.fn.datepicker = function( options ){

        var dp = this;

        //call cached datepicker plugin
        prevDp.call( this, options );

        //extend with some dom manipulation to update the markup for jQM
        //call immediately
        function updateDatepicker(event){

          $( ".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

            if(typeof event != "undefined")
                {
                var classe= $(event.target).attr("class");
                //alert(classe);
                }
          $( ".ui-datepicker-calendar .ui-btn", dp ).each(function(){
                    var el = $(this);
                    var buttonText = el.find( ".ui-btn-text" );
                    // remove extra button markup - necessary for date value to be interpreted correctly
                    if(buttonText.length)
                        el.html( el.find( ".ui-btn-text" ).text() ); 
                    });
        //      }

        $( dp )
            .off()
            .on( "click", updateDatepicker)
            .find("select")
            .on( "change", function(event){updateDatepicker(event);});
        }

        //update now
        updateDatepicker();

        //return jqm obj 
        return this;
    };
})( jQuery );

CSS 

div.hasDatepicker{ display: block; padding: 0; overflow: visible;  margin: 8px 0; }
.ui-datepicker {  overflow: visible; margin: 0; max-width: 500px;  }
.ui-datepicker .ui-datepicker-header { position:relative; padding:.4em 0; border-bottom: 0; font-weight: bold; }
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { padding: 1px 0 1px 2px; position:absolute; top: .5em; margin-top: 0; text-indent: -9999px; }

.ui-datepicker .ui-datepicker-prev { left:6px; }
.ui-datepicker .ui-datepicker-next { right:6px; }
.ui-datepicker .ui-datepicker-title { margin: 0 2.3em; line-height: 1.8em; text-align: center; }
.ui-datepicker .ui-datepicker-title select { font-size:1em; margin:1px 0; }
.ui-datepicker select.ui-datepicker-month-year {width: 100%;}
.ui-datepicker select.ui-datepicker-month, 
.ui-datepicker select.ui-datepicker-year { width: 49%;}
.ui-datepicker table {width: 100%; border-collapse: collapse; margin:0; }
.ui-datepicker td { border-width: 1px; padding: 0; text-align: center; }
.ui-datepicker td span, .ui-datepicker td a { display: block; padding: .2em 0; font-weight: bold; margin: 0; border-width: 0; text-align: center; text-decoration: none; }

.ui-datepicker-calendar th { padding-top: .3em; padding-bottom: .3em; }
.ui-datepicker-calendar th span, .ui-datepicker-calendar span.ui-state-default { opacity: .3; }
.ui-datepicker-calendar td a { padding-top: .5em; padding-bottom: .5em; }

Here is the updated version to work with jqm 1.4 : jsbin jqm 1.4.0

It is taking account of changes of jquery mobile 1.4.0 and needs a little bit less of dom manipulation

Aureltime
  • 373
  • 3
  • 10
3

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( $( "<div />" ).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

Aureltime
  • 373
  • 3
  • 10
1

By this time you may know, jquery mobile 1.4.5 has one (with a plugin): http://demos.jquerymobile.com/1.4.5/datepicker/

Alain Gauthier
  • 820
  • 1
  • 12
  • 14
  • i can't make it works, it appears on screen, possible to pick value but not to initially set some date! Clumsy control IMO – Ludus H Mar 01 '18 at 16:49
1

Try Mobiscroll Plugin. Its an awesome plugin. My experience with it has really been good. I have a live example of it with respect to setting a "start date" and "end date". You can check this example on jsFiddle

Here is source code for start and end date example
HTML:
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0;      maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<link rel="stylesheet" href="http://example.gajotres.net/iscrollview/mobiscroll-2.4.custom.min.css" />    
<link rel="stylesheet" href="http://www.fajrunt.org/mobiscroll.custom-2.5.1.min.css"/>    
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>    
<script src="http://example.gajotres.net/iscrollview/mobiscroll-2.4.custom.min.js"></script>        
</head>
<body>
<div data-role="page" id="index">
   <div data-role="content">
        <input name="demo" id="demo" class="i-txt" />
   </div>

     <div data-role="content">
        <input name="demo2" id="demo2" class="i-txt" />
    </div>
</div>    
</body>
</html>   

Javascript & Jquery:
$(document).on('pagebeforeshow', '#index', function(){       
$('#demo').mobiscroll().date({
   //invalid: { daysOfWeek: [0, 6]},
    theme: 'android-ics',
    display: 'inline',
    mode: 'scroller',
    dateOrder: 'mm dd yy',
    dateFormat : "mm-dd-yy",
    minDate: new Date(2015,03,16),
    maxDate: new Date(2015,11,03),


});  

$('#demo2').mobiscroll().date({
   // invalid: { daysOfWeek: [0, 6]},
    theme: 'android-ics',
    display: 'inline',
    mode: 'scroller',
    dateOrder: 'mm dd yy',
    dateFormat : "mm-dd-yy",
    minDate: new Date(2015,3,21),
    maxDate: new Date(2015,11,3) 

});  
$("#demo").change(function(){
 getNextdate();
  });
$("#demo2").change(function(){
 getPdate();
  });
});



function getNextdate() {
var tt = document.getElementById('demo').value;

var date = new Date(tt);
var newdate = new Date(date);

newdate.setDate(newdate.getDate()+5);

var dd = newdate.getDate();
 if(dd<10) {dd='0'+dd}
var mm = newdate.getMonth()+1;
 if(mm<10) {mm='0'+mm}
var y = newdate.getFullYear();

var someFormattedDate = mm + '-' + dd + '-' + y;
document.getElementById('demo2').value = someFormattedDate;
}

function getPdate() {
var tt = document.getElementById('demo2').value;

var date = new Date(tt);
var newdate = new Date(date);

newdate.setDate(newdate.getDate()-5);

var dd = newdate.getDate();
 if(dd<10) {dd='0'+dd}
var mm = newdate.getMonth()+1;
 if(mm<10) {mm='0'+mm}
var y = newdate.getFullYear();

var someFormattedDate = mm + '-' + dd + '-' + y;
document.getElementById('demo').value = someFormattedDate;
}

Thanks to Gajotres for providing initial help

Eggineer
  • 214
  • 5
  • 16
0

Here is the full code from Juery document:

    <!doctype html>
     <html lang="en">
     <head>
     <meta charset="utf-8">
     <title>jQuery UI Datepicker - Format date</title>
     <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
     <script src="//code.jquery.com/jquery-1.10.2.js"></script>
     <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
     <link rel="stylesheet" href="/resources/demos/style.css">
     <script>
     $(function() {
           $( "#datepicker" ).datepicker();
           $( "#format" ).change(function() {
           $( "#datepicker" ).datepicker( "option", "dateFormat", 'yy-mm-dd' ); // I am using the internationl date format, you can choose yours following below six options.
    });
     });
    </script>
    </head>
    <body>

    <p>Date: <input type="text" id="datepicker" size="30"></p>
    <p>Format options:<br>

    </body>
    </html>`

Notices: DateFormat have 5 options :

1.mm/dd/yy

2.yy-mm-dd

3.d M, y

4.d MM, y

5.DD, d MM, yy

6.'day' d 'of' MM 'in the year' yy

li bing zhao
  • 1,388
  • 13
  • 12