如何在 jQuery-Mobile Datepicker Widget 中滑动更改月份

Question

我试图在我的 jQuery-Mobile 项目中实现 DatePicker。这是来源：http://demos.jquerymobile.com/1.4.1/datepicker/

遗憾的是，它默认不支持通过滑动事件更改月份。我确实得到了这个 question ，它（可能）与我有相同的情况，但不知何故它对我的情况不起作用。

这是我试过的：

$('#ui-datepicker-div').on("swipeleft", function () {
    console.log("left");
    var thedate = $("#ui-datepicker-div").date('getDate'); //get date from datepicker ( I can't get anything from here)
    //thedate.setMonth(thedate.getMonth() + 1); //add a month 
    //$(this).datepicker('setDate', thedate); // set the date in datepicker
});

有人知道吗？

Answer 1

我通过将 swipeleft 和 swiperight 事件处理程序添加到我的日期选择器容器来做到这一点：

  $("#datepicker").on("swipeleft", function(){
    $("#datepicker table").first().animate({
      marginLeft: "-100%"
    },{
      duration: "fast",
      complete: function () {
        $.datepicker._adjustDate("#datepicker", +1, "M" );
      }
    });
  });
  $("#datepicker").on("swiperight", function(){
    $("#datepicker table").first().animate({
      marginLeft: "100%"
    },{
      duration: "fast",
      complete: function () {
        $.datepicker._adjustDate("#datepicker", -1, "M" );
      }
    });
  });

两个事件都记录在此处：swipeleft and here: swiperight。

此外，我刚刚使用了来自 SO How to disable text selection using jQuery? to avoid text selection inside my datepicker calendar (credits: Damien) 的答案：

  $(".ui-datepicker").attr('unselectable','on')
     .css({'-moz-user-select':'-moz-none',
           '-moz-user-select':'none',
           '-o-user-select':'none',
           '-khtml-user-select':'none',
           '-webkit-user-select':'none',
           '-ms-user-select':'none',
           'user-select':'none'
     }).bind('selectstart', function(){ return false; });

由于您没有具体说明为什么您提到的答案在您的案例中不起作用，请随时在真实的移动设备上查看我的 Plunker demo，让我知道现在是否适用于你.

编辑： 我做了一个小改动，以避免在选择日期选择器按钮时出现令人讨厌的拖动副作用：

<div id="datepicker" ondragstart="return false;"></div>

现在一切顺利！

学分：SyntaxError from this answer: Disable Drag and Drop on HTML elements?

Answer 2

最终，我得到了这段代码（通过手机测试）：

http://jsbin.com/sezawiguke/edit?html,js,output

$(document).on("mobileinit", function () {
            //reset type="date" to type="text" to prevent default browser calendar
            $.mobile.page.prototype.options.degradeInputs.date = true;


            //optional: finetune swipe options
            $.event.special.swipe.horizontalDistanceThreshold = 20;
            $.event.special.swipe.verticalDistanceThreshold = 100;
            $.event.special.swipe.durationThreshold = 350;
        });

$(document).off('touchstart touchend', '.ui-datepicker')
            .on('touchstart', '.ui-datepicker', function (e) {
                $(this).data('swipebegin', {
                    startEvent: e,
                    startTime: $.now()
                });
            }).on('touchend', '.ui-datepicker', function (e) {
                var swipeData = $.extend($(this).data('swipebegin'),
                    {
                        endEvent: e,
                        endTime: $.now()
                    });
                try {
                    //compute horizontal movement and swipe duration
                    var deltaX = swipeData.startEvent.originalEvent.changedTouches[0].pageX - swipeData.endEvent.originalEvent.changedTouches[0].pageX;
                    var deltaTime = swipeData.endTime - swipeData.startTime;
                    if (Math.abs(deltaX) > $.event.special.swipe.horizontalDistanceThreshold && deltaTime <= $.event.special.swipe.durationThreshold) {
                        if (deltaX < 0) // swiperight
                            $('.ui-datepicker-prev', '.ui-datepicker').triggerHandler('click');
                        else //swipeleft
                            $('.ui-datepicker-next', '.ui-datepicker').triggerHandler('click');
                    }
                } catch (err) {
                    (console.error || console.log).call(console, 'ui-datepicker swipe error: ' + err.stack || err);
                }
                $(this).removeData('swipebegin');
            });

<!DOCTYPE html>
<html>
<head>
  
  
  <title>jQuery Mobile test page</title>
  <meta charset=utf-8 />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  <link rel="stylesheet"  href="http://code.jquery.com/mobile/git/jquery.mobile-git.css" /> 
  <link rel="stylesheet" href="https://rawgithub.com/arschmitz/jquery-mobile-datepicker-wrapper/master/jquery.mobile.datepicker.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
  <script src="https://rawgithub.com/jquery/jquery-ui/1-10-stable/ui/jquery.ui.datepicker.js"></script>
  <script src="http://code.jquery.com/mobile/git/jquery.mobile-git.js"></script> 
  <script src="https://rawgithub.com/arschmitz/jquery-mobile-datepicker-wrapper/master/jquery.mobile.datepicker.js"></script>
  
</head>
  
  
<body>
    
 <div data-role="page">

  <div data-role="header">
    <h1>Mobile Datepicker</h1>
  </div><!-- /header -->

  <div data-role="content">
    
    <input type="text" id="date-input" data-inline="false" data-role="date">
    <input type="text" id="date-input" data-inline="true" data-role="date">
    
    
  </div><!-- /content -->

   <div data-role="footer">
    <h4>Footer</h4>
  </div><!-- /footer -->

</div><!-- /page -->

</body>
</html>

如何在 jQuery-Mobile Datepicker Widget 中滑动更改月份

How to change month with swipe in jQuery-Mobile Datepicker Widget

javascript

jquery

jquery-mobile

datepicker

jquery-ui-datepicker