I have a form with an date field with a jquery datepicker attached to it.
When I select the date field the datepicker pops up but then the iPad keyboard slides into view and obscures the datepicker.
How do I prevent the keyboard from popping up in this situation?
I used a slightly modified version of Rob Osborne's solution and it successfully prevented the keyboard from popping up on the iPad and iPhone.
$(".datePicker").datepicker({
showOn: 'button',
onClose: function(dateText, inst)
{
$(this).attr("disabled", false);
},
beforeShow: function(input, inst)
{
$(this).attr("disabled", true);
}
});
Instead of disabling the input give it a "readonly" property. This is better then disabling it because you can save the form without changing it.
Here is more info about readonly.
That's how I managed to deal with this problem by making the browser think the user blured the input so it hides the keyboard before it has time to show :
$('blabla')
.datepicker(
{
/* options */
})
.on('focus',function()
{
$(this).trigger('blur');
});
Works well for me where many of the other solutions I found didn't !
If you're using the date-timepicker the 'beforeShow' option is not available. Only adding the 'readonly' attribute to the input filed will completely disable the date picker.
Solution is to use the 'readonly' attribute on the element and add 'ignoreReadonly: true' as an option for the date picker.
$(function() {
$('#datetimepicker1').datetimepicker({
format: 'MM-DD-YYYY',
minDate: moment(),
ignoreReadonly: true
});
});<div class='input-group date' id='datetimepicker1'>
<input type='text' id="date" readonly style="cursor: default; background-color: #fff" class="form-control" />
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
I used a combination of CDeutsch and Rob's answers to disable the input field when the user clicks the calendar and then enable the field after the date picker closes as follows:
$(".date").datepicker({
showOn: "button",
onClose: function(dateText, inst) { $(this).attr("disabled", false); },
beforeShow: function(dateText, inst) { $(this).attr("disabled", true); },
buttonImage: "/images/calendar.png",
buttonImageOnly: true
});
The benefit is that this allows the user to edit the date manually by clicking in the input field which brings up the iPad's keyboard or use the date picker by clicking on the date button.
Again thanks for all of the great input on this problem, I was stuck on this same issue until reading the above posts.
Didn't discover a way to do this but I ended up using an acceptable work around of using the buttonImage feature with buttonImageOnly and then disabling the date field.
$("#id_date").datepicker({
dateFormat: 'yy/mm/dd',
showOn:"button",
buttonImage: "/icons/calendar.gif",
buttonImageOnly: true });
$('#id_date').attr("disabled", true);
If you are doing this on a form, make sure you re-enable the field before submitting or serializing the form or the value won't be sent (on iPad at least). I do the following in my submit function:
$('#id_date').attr("disabled", false);
var dataString = $('#the_form').serialize();
$.ajax({
type: "POST",
url: 'myurl',
data: dataString,
...
Three hours in now and getting nowhere. I don't have an Iphone so i'm trying the above on an android phone running 2.3.
On my phone I still get the keypad everytime, nothing stops it and I can't use 'read only' as it stops my asp.net4 / C# code behind firing, which is a bit cr#p but that's how it is.
So my initial question is do these ideas only work on Iphones?
cheers
I've found a way to make the above answers work for ASP.Net 4. so thought I would share.
Seems that < asp:TextBox ID="something" ...> doesn't fire Javascript or JQuery as it's assigned a 'special' ID like "ctl00_content....." on the server side, which isn't the same as "#something" in the JQuery code. But thanks to trial and error using this posting:-
Retrieve value from asp:textbox with JQuery
I worked out that using the following (with thanks to above poster) will blur the focus and stop mobile phones showing the keyboard (atleast my Android anyway :)
$("#<%=sDatepicker.ClientID%>").focus(function () {
$(this).blur();
});
so the following simple example code used with the JQuery above should hopefully help others:
<asp:TextBox ID="sDatepicker" OnTextChanged="sDatepicker_changed" AutoPostBack="True" ReadOnly="False"></asp:TextBox>
Of course 'sDatepicker_changed' is your code behind code.
protected void sDatepicker_changed(object sender, EventArgs e)
{//do stuff here..}
I can also run the datepicker pop up still and use my code behind function to populate another textbox with an end date 7 days from this one.
It would seem this only works in mobile phones! in a browser it throws an "Object reference not set to an instance of an object" because asp.net has decided the TextBox doesn't exist after a postback but runs JavaScript. Getting off topic so won't say anymore.
All sorted now :) , have surrounded my <script>..</script> with a <Div> and only make it visible if need to run the JavaScript code, when I have detected it is a mobile device, by using:
bool IsMobile = Page.Request.Browser.IsMobileDevice;
and
if (IsMobile == true)
{
mobileScript.Visible = true;
}
cheers
Trev.
I believe this solution could work for all different date time pickers, but I have only tested it with the date picker from XDSoft.
The idea is to disable mouse events (pointer-events: 'none') on the input element so that the keyboard won't appear, and then add a onclick event on a parent div that wraps around the input element. The onclick event should then open the date time picker.
Code Example
This demonstrates how to fix the issue when using XDSoft's datetimepicker.
The solution assumes that the input element is wrapped inside a div element.
(function($){
var originalDateTimePicker = $.fn.datetimepicker;
$.fn.datetimepicker = function(args){
this.each(function(i, dateTimePicker){
dateTimePicker = $(dateTimePicker);
dateTimePicker.closest('div').on('click', function(e){
dateTimePicker.trigger('open');
});
dateTimePicker.css({ 'pointer-events': 'none' });
});
return originalDateTimePicker.apply(this, arguments);
};
})(window.jQuery||window.$);
I have used this code and it works great... ".hasDatepicker" class is for my input that hold the date picker
<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');
}
);
});
});
I believe the better way to do this in modern browsers is to use inputmode="none". Here's the HTML code:
<input type="text" ... inputmode="none" />
At least on Android Chrome this is allowing my datepicker (obviously separately initialized via jQuery) to come up on my phone and the soft keyboard does not come up.
This prevents the issues that are possible with making the field readonly (not being able to clear the value, etc)
Using the latest version of the DatePicker, it's possible to do it like this:
//for tablets / phones
$('#yourElement').datepicker().on('show', function (e) {
$(this).trigger('blur');
})
Please note however, the keyboard may flash at the bottom of the screen for a second until the blur() is enacted.
