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

Question

I tried to implement DatePicker in my jQuery-Mobile project. Here is the source: http://demos.jquerymobile.com/1.4.1/datepicker/

Unfortunately, it doesn't support changing the month with swipe event by default. I did get this question that (probably) has the same case with me, but somehow it doesn't work in my case.

This is what I have tried:

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

Is there anyone knows about it?

Answer 1

I did it by adding swipeleft and swiperight event handlers to my datepicker container:

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

Both events are documented here: swipeleft and here: swiperight.

In addition, i just used this answer from 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; });

As you don't specify why the answer mentioned by you hasn't worked in your case, feel free to check my Plunker demo also in a real mobile device and let me know if this works now for you.

EDIT: I made a small change to avoid a nasty drag side effect when a datepicker button is selected:

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

Now it works nice and smoothly!

Credits: SyntaxError from this answer: Disable Drag and Drop on HTML elements?

Answer 2

Eventually, I end up with this code (test it via mobile):

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>