This issue is apparent on mobile Safari on an iPhone (I haven't tested on other iOS devices) but I have not been able to reproduce on Windows or Android.
A simple version can be found at https://jsfiddle.net/DaveParsons/havwgb2u/
I'm unable to use the native <input type="date"> as I require the flexibility of the datepicker.
To reproduce simply select a different month from the datepicker control then click on a day in the calendar or the random element - the iOS picker wheel re-appears.
Is there some way of letting iOS know it doesn't need to keep popping the picker up.
$("#date").datepicker({
changeYear: true,
changeMonth: true
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<form>
<div id="date">
</div>
<button type="submit">
Test
</button>
<div>
<p>
random element with link
</p>
</div>
</form>
Related
I have been using the input type="date" form element but have found that the "Clear" option visible on the iOS datepicker behaves like a "reset" and that there is actually no way to clear a date value.
This happens with both Chrome & Safari on iOS.
I created a codepen that illustrates this (providing you access it with an iOS device or simulator) here:
https://codepen.io/ajwgibson/pen/oPGvBB
<html>
<body>
<form>
<label for="the_date">The date:</label>
<br/>
<input type="date"
value="2018-09-06"
placeholder="dd/mm/yyyy"
name="the_date"
id="the_date">
</form>
</body>
</html>
Is there a workaround for this or do I need to revert to a JavaScript datepicker rather than relying on the HTML5 date input type for iOS users?
I'm using Material Design Lite (http://getmdl.io) along with dialog-polyfill (https://github.com/GoogleChrome/dialog-polyfill) for the modal dialog boxes.
Everything works great on my desktop browsers (Chrome, Safari, etc.), but on iOS (both Chrome and Safari), I can't tap inside the modal dialog boxes. It just doesn't respond.
I've tried the suggestion I've seen posted several places to put "cursor: pointer" in the CSS, but either I'm not doing it correctly, or it's not working.
Here's a typical modal dialog from my code:
<dialog class="mdl-dialog" id="delete_alias_confirm_dialog">
<h4 class="mdl-dialog__title">
Delete alias
</h4>
<div class="mdl-dialog__content" id="delete_alias_confirm_dialog_content">
<p>
Alias [ALIAS NAME] has been successfully deleted.
</p>
<form action="#">
<div class="mdl-dialog__actions">
<button type="button" class="mdl-button mdl-button--raised mdl-button--colored" onClick="delete_alias_confirm_dialog.close()" id="delete_alias_confirm_dialog_ok_button">OK</button>
</div>
</form>
</div>
</dialog>
<script>
var delete_alias_confirm_dialog = document.querySelector('#delete_alias_confirm_dialog');
if (! delete_alias_confirm_dialog.showModal) {
dialogPolyfill.registerDialog(delete_alias_confirm_dialog);
}
var delete_alias_curr_name=""
function show_delete_alias_confirmation(clicked_element) {
delete_alias_curr_name=((clicked_element.parentNode).parentNode).parentNode.parentNode.querySelector('#alias_name').innerText
var delete_alias_dialog_delete_button=document.querySelector('#delete_alias_dialog_delete_button');
var delete_alias_dialog_alias_name=document.querySelector('#delete_alias_dialog_alias_name');
delete_alias_dialog_alias_name.innerHTML=delete_alias_curr_name
delete_alias_dialog.showModal();
delete_alias_dialog_delete_button.blur();
}
</script>
Check the order in which you load the CSS.
If you are loading dialog-polyfll.css before material.min.css that might be the source of the problem.
Also check if you don't have a dialog duplicate, this also results on a dialog that can't be closed on IOS.
I'm using standard JQM date picker with input tag like this
<input type="date" data-clear-btn="false" id="dp" value="2006-09-14">
on request here is jsfiddle example: http://jsfiddle.net/GardenOfEmuna/47VUw/
Now I want to display value in a trigger button and open datepicker upon clicking on it.
Has anyone idea how to open datepicker with a trigger button?
You are not using a jqm datepicker, since there is none. You are using the native browser datepicker control and you can't trigger it as proved in this thread
Possible solution:
I've created a jsFiddle, it uses the datepicker from jquery ui with a wrapper class as shown in the jqm documentation (link)
html
<div data-role="page" id="foo">
<div data-role="content">
<input id='myDatePicker' type="text" data-role="date">
<button id='myButton' class="ui-btn">Button</button>
</div>
</div>
js
$(document).on('pageinit',function(){
$('#myButton').click(function() {
$('#myDatePicker').datepicker( "show" );
});
});
resources
jquery.mobile-1.4.2.min.css
jquery-1.9.1.min.js
jquery.mobile-1.4.2.min.js
jquery.ui.datepicker.js
Iam using phonegap 2.2.0 and jQuery mobile 1.2.0.
Here is my Date picker html,
<input class="dateField entry-time ui-input-text ui-body-d ui-shadow-inset ui-corner-all ui-icon-datebox" type="text" data-role="datebox" data-options="{"mode": "flipbox", "useNewStyle": true, "useFocus": true, "beforeToday": true}" readonly="readonly">
When I tested in iOS7 and 6 I got native text input keyboard for a moment, then got the native datepicker keyboard.
how to fix this?
Is Simpledialog2 not supported select menu in jQuery Mobile ?
Because when I use select menu in Simpledialog2, I get error like as under,
"Uncaught TypeError: Cannot read property 'jQuery1910010748725151643157' of undefined"
And if I do not use select menu than it's working fine, how strange it is.
I am trying without select menu as under, It's working fine.
<div id="inlinecontent" style="display:none;">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<label>My Label</label>
<input value="myval" type="text">My Value</input>
</fieldset>
<a rel='close' data-role='button' href='#'> Close </a>
</div>
</div>
And now I am trying with select menu, I get Uncaught Type Error in console and it's not working :(
<div id="inlinecontent" style="display:none;">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<select>
<option value="1">One</option>
<option value="2">Two</option>
</select>
</fieldset>
<a rel='close' data-role='button' href='#'> Close </a>
</div>
</div>
My js code as under,
$(self.el).find('#inlinecontent').simpledialog2({
mode: 'blank',
headerText: 'My header text',
headerClose: true,
blankContentAdopt: true,
blankContent : true
});
Can any one help me to fix this?
Any help appreciated.
If possible dont use Simpledialog2 with jQuery Mobile. Last version was made to work with jQuery Mobile 1.0.1. That was a long time ago and a jQuery Mobile has changed a lot since then.
You should use jQuery Mobile native dialog or native popup instead. You will get same functionality and unlike Simpledialog2 these are not 3rd party plugins.
One of possible reasons why this is not working because jQuery Mobile don't support 2 popups at the same time. When select is opened its will show a popup (unless it is turned off, but default state is popup select) and because Simpledialog2 is already a popup it will throw an error.