javascript - 如何在 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在这里: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?