using date picker on mobile

Trevor

#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

#137909

This reply has been marked as private.

Trevor

#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

#137931

This reply has been marked as private.

Trevor

#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

#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

#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