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容器中来实现的：

  $("#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，并告诉我这是否适用于您。

修改当选择了一个datepicker按钮时，我做了一个小改动以避免讨厌的拖拽副作用：

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

现在它运作得很顺利！

来自此答案的致谢：SyntaxError：Disable Drag and Drop on HTML elements?

Answer 2

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

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

＆＃13;

$(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');
            });

＆＃13;

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

＆＃13;

如何在jQuery-Mobile Datepicker小部件中使用滑动更改月份

2 个答案: