jQuery Mobile 日期选择器

Question

提问by RickardP

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

有没有人有一个很好的 jQuery 移动日期选择器？

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?

有任何想法吗？

Answer 1

回答by Christoph Baudson

I suggest Datebox

我建议日期框

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

or Mobiscroll

或 Mobiscroll

http://mobiscroll.com/

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

如果你想要安卓风格的东西，试试我自己的 Mobi Pick

http://mobipick.sustainablepace.net/

Answer 2

回答by istvan.halmen

Try Mobiscroll, a customizable datepicker optimized for touch devices

试试Mobiscroll，一个针对触摸设备优化的可定制日期选择器

Answer 3

回答by Tushar Ahirrao

Here is the datepicker specially for mobile

这是专门用于移动设备的日期选择器

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

Answer 4

回答by Aureltime

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.

我致力于将 jquery ui datepicker 更新到最新版本的 jquery、jqueryui 和 jquery mobile，以便 jq1.9.1 jqui 1.10.2 和 jqm 1.3.0。我更愿意像我之前的答案一样离开，这样你就可以看到它是如何演变的。

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

changeMonth 和 changeYear 下拉菜单需要特别小心才能工作（不美观很常见）

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

这是我为 jqmobile 更新实验性 jqueryui datepicker 的方式：

js bin code snippet

js bin 代码片段

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

您可以链接到 datepicker 脚本而不是整个 jqueryui 包。

The readonly prop prevents the keyboard to appear on ios

readonly 道具防止键盘出现在 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

这只是 datepicker 的一个调整，使其在 jqm 上工作，目标是能够覆盖 datepicker 小部件的 _generatehtml 功能，并能够将 jquery 移动主题作为输入提供使用。所以你不需要那一大堆 addClass 并避免不必要的 DOM 操作

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

我只测试了 ios 6（iphone、ipad）和桌面（chrome、firefox、safari），让我们知道其他测试。

Hope it helps as mush as needed it :)

希望它可以根据需要提供帮助:)

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

这里是用 html、js 和 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

这是与 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

它考虑到 jquery mobile 1.4.0 的变化并且需要更少的 dom 操作

Answer 5

回答by Aureltime

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 :)

这是我对另一篇文章的回答的副本，与如何在 jquerymobile framwework 中集成 jqueryui datepicker 相关。希望它有所帮助，就像如果它存在一样会对我有所帮助:)

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 :

在互联网上进行了大量搜索后，尤其是比较了 datebox 和 jqueryui datepicker（mobiscroll 和 mobipick 对我来说没有好处，因为我正在寻找日历视图，我决定使用 ui datepicker 有几个原因：

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

我长期使用它，我很了解它
我需要 beforeShowDay （事件，如果使用日期框和事件/回调肯定可以有类似的功能）来自定义带有课程的日期
我需要一个可以更改月份和年份的标题（也可以在日期框中）
通过这个实验，我已经有了一个带有 jquerymobile 感觉和外观的日期选择器

I used it with :

我用它：

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

jQuery 1.8.3
jQuery 移动版 1.2.0
jqueryui datepicker 1.8.21（从这里获取）

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

使用带有更新版本的 datepicker 会破坏月/年更改的布局。

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

从这里，我得到了我需要的文件。我使用了在不同 stackoverflow 问题上找到的几个答案，以进行以下更改：

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);

jquery.ui.datepicker.mobile.css 没有变化

jquery.ui.datepicker.mobile.js 新代码：

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

我使用 on() 而不是点击事件，并且我在点击月/年选择菜单时阻止默认。

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).

beforeShowDay 是一个返回数组的函数（参见 jqueryui datepicker 手册）。

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

jsbin 示例的链接

Answer 6

回答by Eggineer

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

试试 Mobiscroll 插件。它是一个很棒的插件。我对它的体验真的很好。我有一个关于设置“开始日期”和“结束日期”的现场示例。您可以在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

感谢 Gajotres 提供初步帮助

Answer 7

回答by li bing zhao

Here is the full code from Juery document:

这是 Juery 文档中的完整代码：

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

注意：DateFormat 有 5 个选项：

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

Answer 8

回答by Alain Gauthier

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

这时候你可能知道，jquery mobile 1.4.5 有一个（带插件）：http: //demos.jquerymobile.com/1.4.5/datepicker/

jQuery Mobile 日期选择器

提问by RickardP

回答by Christoph Baudson

回答by istvan.halmen

回答by Tushar Ahirrao

回答by Aureltime

回答by Aureltime

回答by Eggineer

回答by li bing zhao

回答by Alain Gauthier

相关推荐

最近更新

标签

jQuery Mobile 日期选择器

提问by RickardP

回答by Christoph Baudson

回答by istvan.halmen

回答by Tushar Ahirrao

回答by Aureltime

回答by Aureltime

回答by Eggineer

回答by li bing zhao

回答by Alain Gauthier

相关推荐

jQuery 在等待 ajax 响应时显示加载 gif

jQuery 如何格式化 JQueryUI 自动完成响应？

jQuery 根据多个分隔符拆分字符串

添加 jquery 移动滑动事件

相关推荐

最近更新

标签