jQuery Mobile 日期选择器

Posted 2023-05-09

技术标签:

【中文标题】jQuery Mobile 日期选择器【英文标题】：jQuery Mobile date picker 【发布时间】：2011-11-11 08:17:48 【问题描述】：

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

我要让用户选择“开始”日期和“结束”日期，但我没有找到适合这种情况的任何东西。

有什么想法吗？

【问题讨论】：

【参考方案1】：

我建议日期框

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

或移动滚动

http://mobiscroll.com/

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

http://mobipick.sustainablepace.net/

【讨论】：

这似乎被打破了，演示页面。没有演示工作了 @Rubytastic 是的，我不得不转移到另一个提供商...抱歉给您带来的不便:-(现在重新上线 :-) @sustainableplace: 太好了，你解决了这个问题，github 免费质量项目托管 :) 它看起来非常好，现在已解决为默认列表视图 DateBox 如果与页面中的任何其他小部件重叠，它将无法正常工作。他们通过在原始输入上方显示弹出窗口来解决这个问题，该窗口在显示时被禁用。任何其他小部件将由“保存日期”按钮或属于日期框的任何其他按钮触发。 - 完全不推荐。 Datebox 有一个令人讨厌的缺点，那就是许可证：引用“CC 3.0 Attribution。可能在未经许可/通知的情况下重新授权”。那是什么意思？我现在如何使用它？【参考方案2】：

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

【讨论】：

mobiscroll 与 jQM 主题集成：blog.mobiscroll.com/jquery-mobile-theme-integration 有免费但更受限制的版本吗？我刚刚查看了他们的网站，最便宜的要 190 美元左右，而且看起来免费的是 1 个月的试用期退款，所以这意味着你仍然需要付费【参考方案3】：

这里是移动端的日期选择器

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

【讨论】：

【参考方案4】：

我致力于将 jquery ui datepicker 更新到最新版本的 jquery 、 jqueryui 和 jquery mobile 以便用于 jq1.9.1 jqui 1.10.2 和 jqm 1.3.0。我更愿意按照我之前的回答离开，以便您了解它是如何演变的。

changeMonth 和 changeYear 下拉菜单需要特别小心才能工作（经常出现不样式）

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

js bin code snippet

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

readonly 属性防止键盘出现在 ios 上

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

我只测试了 ios 6（iphone、ipad）和桌面（chrome、firefox、safari），请告诉我们其他测试。

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

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

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

这是与 jqm 1.4 一起使用的更新版本：jsbin jqm 1.4.0

考虑到 jquery mobile 1.4.0 的变化，需要少一点 dom 操作

【讨论】：

【参考方案5】：

这是我对另一个帖子的回答的副本，与如何在 jquerymobile 框架中集成 jqueryui datepicker 相关。希望它有所帮助，如果它存在的话会对我有所帮助:)

在互联网上进行了大量搜索后，特别是比较了 datebox 和 jqueryui datepicker（mobiscroll 和 mobipick 对我没有好处，因为我正在寻找日历视图，我到了决定使用 ui datepicker 的地步原因：

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

我用它：

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

使用最新版本的日期选择器会破坏月/年更改的布局。

来自here，我得到了我需要的文件。我使用了我在不同的 *** 问题上找到的几个答案来进行以下更改：

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

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

我是这样使用它的：

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

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

这种方式对我有用，我现在只需要添加事件以仅在日期输入获得焦点时显示日历。

A link to jsbin example

【讨论】：

【参考方案6】：

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

【讨论】：

我无法让它工作，它出现在屏幕上，可以选择值但不能最初设置某个日期！笨拙的控制 IMO【参考方案7】：

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

感谢 Gajotres 提供初步帮助

【讨论】：

【参考方案8】：

这是来自 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>`

注意事项： DateFormat 有 5 个选项：

1.mm/dd/yy

2.yy-mm-dd

3.d M, y

4.d 毫米，是的

5.DD, d MM, yy

6.'day'd'of'MM'在这一年'yy

【讨论】：

以上是关于jQuery Mobile 日期选择器的主要内容，如果未能解决你的问题，请参考以下文章

jquery mobile中的日期选择器在第二页中添加时重复

JQuery Mobile 日期选择器未在 Chrome 中显示日期

用于Web的响应式jQuery日期时间选择器插件&；可移动的

jQuery 日期选择器。 2个日期选择器。限制范围。默认日期当前日期

jQuery 多日期选择器问题

带有手动输入和动态最小日期的 jQuery UI 日期选择器