prevent keyboard from popping up on datepicker mobile - javascript

I have this page with a booking widget and date picker here:
http://anivillas.com/
(Book your stay)
The following code is set to try and prevent the keyboard from coming up on mobile devices when choosing the datepicker.
<script type="text/javascript">
jQuery(function() {
jQuery( ".hasDatepicker" ).hasDatepicker({
}).attr('readonly','readonly');
});
</script>
This is working on desktop but not mobile devices. Does someone know how to prevent the keyboard from popping up on mobile?

Try this (taken from ipad web application: How do I prevent the keyboard from popping up on jquery datepicker):
$(".datePicker").datepicker({
showOn: 'button',
onClose: function(dateText, inst)
{
$(this).attr("disabled", false);
},
beforeShow: function(input, inst)
{
$(this).attr("disabled", true);
}
});

For others looking for this answer, this is answered here:
prevent iphone default keyboard when focusing an <input>
Either of these worked for me - edit the HTML tag as follows, rather than adding JS or jQuery:
<input ... readonly="readonly">
<input ... inputmode='none'>

Simply add the 'readonly' attribute to the form filed:
<input id="datepicker" type="text" name="name" required="" readonly>

Related

jQuery datepicker maxDate issue

I have the following code for jQuery datepicker
$('#startDate').datepicker({
format: "dd/mm/yyyy",
maxDate: '0'
})
.on('changeDate', function (ev) {
$('#startDate').datepicker('hide');
});
It launches in a Bootstrap modal. It is working as expected apart from the maxDate - I want to restrict user from entering any date in the future - is there something I am missing? I also tried maxDate : new Date() which also did not work. And I did a hard reload and have checked Dev Tools and I can see the java-script in the rendered markup is as expected.
Updated with full html markup.
<input id="startDate" placeholder="Select Date" data-provide="datepicker" class="datepicker ng-valid ng-touched ng-dirty ng-valid-parse" readonly="readonly" style="cursor:auto; background-color:white" ng-model="item.startDate" ng-change="startDateChanged(item.startDate)">
Using jQuery 1.10.2 and Angular 1.4.1
Hope this will work for you
$( "#datepicker" ).datepicker({
format: "dd/mm/yyyy",
maxDate: 0
});
Do you want to Prevent the user from typing a date into the text box then add readonly='true' in your Textbox.
HTML
<input id="Datepicker" type="text" readonly='true' />
Demo : Click here
Lesson learned is to search what libraries other devs add to the project and dont assume its the one you have used in the past - I have used jQuery Datepicker in nearly every other place I have developed. This particular Dev had included bootstrap js datepicker. The options for it were endDate and also there is an option for autoclose so I can even get rid of the 'on' event handler which was doing the hiding
https://bootstrap-datepicker.readthedocs.io/en/latest/options.html

Best way to remove default IOS date picker

I currently have the jQuery datepicker implemented which is working great on all browsers but when I view in mobile (iPad) the IOS default date picker comes up too. What is the best way to remove it? CSS? change input type?
This is what my input element looks like:
<input type="date" name="payment_Received" class="form-control datepicker" />
<script>
j$(document).ready(function(e) {
j$('.datepicker').datepicker({
dateFormat:'yy-mm-dd'
});
});
</script>
Just use type="text" instead of type="date"
You could also add readonly="readonly" to prevent the keyboard from appearing.

Multiple Datepicker fileds id

I have a long html document with like a hundred of datepickers. Surely each has its own id in the form of (DueDate'num'), like "DueDate401":
<div id="DueDate">
<label for="DueDate">Due date:<br></label>
<input name="DueDate" type="date" id="DueDate401"/>
</div>
JS for processing event is as follows:
$(function() {
$( "#DueDate401" ).datepicker({
dateFormat:"d-M-yy",
showButtonPanel:true,
changeMonth:true,
changeYear:true
});
});
I have a vague idea that something like this should be used:
document.getElementById("DueDate"+id)
but not sure. Would appreciate assistance.
UPDATE: Oh yeh, the question)))) The above JS example shows how a reference is made to a SPECIFIC datepicker field. Since every next datepicker changes its id, I do not know how to change this Javascript to address all datepickers.
use class as well. name the input's class names as DueDate,
then you can use like this
$(function() {
$( ".DueDate" ).datepicker({
dateFormat:"d-M-yy",
showButtonPanel:true,
changeMonth:true,
changeYear:true
});
});
<input name="DueDate" class="DueDate" type="date" id="DueDate401"/>

Can't set correct date using jquery datepicker

this is my problem i've this :
<script>$(function() {$( "#dataInizioBook" ).datepicker();});</script>
<input type="text" id="dataInizioBook" value="01/01/2013"/>
The datepicker will show another date selected when i click the input text.
Thank's for the help.
Try this in case your browser is configured to use different culture:
$(function() {$( "#dataInizioBook" ).datepicker({ dateFormat: 'dd/mm/yy' });});

Jeditable + Datepicker query plugins to get the data on div element

The datepicker is tied to a standard form input field.
I would like to use Jeditable in order to tie datepicker to div element.
Some hints how to make it?
//html code
<input type="text" id="datepicker">
<div id="datepickerDiv"> get date </div>
--
// javascript script code
$(function() {
$( "#datepicker" ).datepicker(); // it works
$( "#datepickerDiv" ).datepicker(); // it does not work
});
References:
Jeditable
Datepicker

Categories