如何在 jQuery-Mobile Datepicker 小部件中通过滑动更改月份答案

【问题标题】：How to change month with swipe in jQuery-Mobile Datepicker Widget如何在 jQuery-Mobile Datepicker 小部件中通过滑动更改月份
【发布时间】：2017-01-25 14:31:40
【问题描述】：

我尝试在我的 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
});

有人知道吗？

【问题讨论】：

标签： javascript jquery jquery-mobile datepicker jquery-ui-datepicker

【解决方案1】：

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

  $("#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 和此处：swiperight。

此外，我刚刚使用来自 SO How to disable text selection using jQuery? 的这个答案来避免在我的日期选择器日历中选择文本（学分：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 来自此答案：Disable Drag and Drop on HTML elements?

【讨论】：

感谢您的回答。但我认为有不同的事情。就我而言，我将我的日期选择器定义为<input type="text" data-role="date">，如demos.jquerymobile.com/1.4.1/datepicker 中所述。可能是我错过了选择器。您知道如何以正确的方式选择日期选择器对话框吗？
@YusrilMaulidanRaji：它是一样的。在幕后它始终是相同的 jquery-ui datepicker，只是在 on.("pagecreate") 中手动初始化。我只是更喜欢 Salman 的风格，恕我直言，并使用它而不是 jQuery Mobile 演示中使用的风格。无论如何，您也可以使用来自github.com/arschmitz/jquery-mobile-datepicker-wrapper 的 jquery-ui/datepicker.js，没关系，我使用了来自 jQuery-UI 的那个，因为我猜它是最新的。只需给它一个id 并删除data-role：plnkr.co/edit/ibf2PfItC3isEjdYaVFR?p=preview

【解决方案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>

【讨论】：