jQuery Mobile date picker

问题

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?

回答1:

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/

回答2:

Try Mobiscroll, a customizable datepicker optimized for touch devices

回答3:

Here is the datepicker specially for mobile

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

回答4:

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>

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

回答5:

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

回答6:

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

回答7:

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

回答8:

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

来源：https://stackoverflow.com/questions/7320600/jquery-mobile-date-picker

标签

jquery

jquery-mobile