Forums › Forums › Search & Filter Pro › using date picker on mobile

Viewing 7 posts - 1 through 7 (of 7 total)
  • Trevor
    (Private)  October 21, 2017 at 3:05 pm #137646

    Only by using javascript. StackExchange has many threads, but, in essence, when the datepicker is opened, the date field gets the focus. In turn, this triggers the keyboards. To stop this, you need to capture the focus ON event, and ‘blur’ the field, sort of like this:

    $('datefieldnamehere')
  .on('focus',function() {
    $(this).trigger('blur');
  }
);

    It may need to look like this for WordPress jQuery:

    jQuery('datefieldnamehere')
  .on('focus',function() {
    jQuery(this).trigger('blur');
  }
);

    Where you would put a valid CSS handle for the field where I have put datefieldnamehere.

    Anonymous
    (Private)  October 23, 2017 at 8:50 am #137909
    This reply has been marked as private.
    Trevor
    (Private)  October 23, 2017 at 8:57 am #137911

    Size of the calendar may be an issue, or the library may have a call for it. Do a Google search on StackExchange for ideas. The library is the jQuery UI DatePicker.

    Anonymous
    (Private)  October 23, 2017 at 10:16 am #137931
    This reply has been marked as private.
    Trevor
    (Private)  October 23, 2017 at 10:19 am #137933

    Not really, but, what element on the page has the hasDatePicker class. It might need to be applied to the parent of that element instead.

    Anonymous
    (Private)  October 23, 2017 at 10:39 am #137935

    OK this code does the trick! 🙂 feel free to share or pin this post…

    <script type="text/javascript">
jQuery( document ).ready(function() {

	var ybdDatePick = jQuery( ".hasDatepicker" );

	    jQuery(function() {
	       ybdDatePick.datepicker({ }).attr('readonly','readonly');

	       ybdDatePick.on('focus',function() {
			    jQuery(this).trigger('blur');
			     this.datepicker({ }).attr('readonly','readonly');
			     console.log( "eeeee!" );
			  }
			);

    });
});
</script>

    and regarding the calendar size on mobile – this is what i did so user can see the calendar all over the screen:

    /*calendar*/
@media only screen and (max-width: 768px) {
	#ui-datepicker-div {width: 100% !important;left: 0 !important;}
	table.ui-datepicker-calendar {min-height: 200px;}
}
    Trevor
    (Private)  October 23, 2017 at 10:57 am #137940

    Cool. Thanks for sharing. I edited your post to put code back ticks around the code. I will mark this as resolved and close this for now.

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)