this is how i'm trying
<script type="text/javascript">
$(document).ready(function(){
$('#dateIn,#dateOut').click(function(e){
e.preventDefault();
});
});
</script>
but the input stills 'launching' iphone's keyboard
ps: i want to do this because i'm using datepicker plugin for date
By adding the attribute readonly (or readonly="readonly") to the input field you should prevent anyone typing anything in it, but still be able to launch a click event on it.
This is also usefull in non-mobile devices as you use a date/time picker
inputmode attribute
<input inputmode='none'>
The inputmode global attribute is an enumerated attribute that hints at the type of data that might be entered by the user while editing the element or its contents. It can have the following values:
none -
No virtual keyboard. For when the page implements its own keyboard input control.
I am using this successfully (Tested on Chrome/Android)
CSS-Tricks: Everything You Ever Wanted to Know About inputmode
You can add a callback function to your DatePicker to tell it to blur the input field before showing the DatePicker.
$('.selector').datepicker({
beforeShow: function(){$('input').blur();}
});
Note: The iOS keyboard will appear for a fraction of a second and then hide.
Below code works for me:
<input id="myDatePicker" class="readonlyjm"/>
$('#myDatePicker').datepicker({
/* options */
});
$('.readonlyjm').on('focus',function(){
$(this).trigger('blur');
});
I asked a similar question here and got a fantastic answer - use the iPhone native datepicker - it's great.
How to turn off iPhone keypad for a specified input field on web page
Synopsis / pseudo-code:
if small screen mobile device
set field type to "date" - e.g. document.getElementById('my_field').type = "date";
// input fields of type "date" invoke the iPhone datepicker.
else
init datepicker - e.g. $("#my_field").datepicker();
The reason for dynamically setting the field type to "date" is that Opera will pop up its own native datepicker otherwise, and I'm assuming you want to show the datepicker consistently on desktop browsers.
Since I can't comment on the top comment, I'm forced to submit an "answer."
The problem with the selected answer is that setting the field to readonly takes the field out of the tab order on the iPhone. So if you like entering forms by hitting "next", you'll skip right over the field.
Best way to solve this as per my opinion is Using "ignoreReadonly".
First make the input field readonly then add ignoreReadonly:true.
This will make sure that even if the text field is readonly , popup will show.
$('#txtStartDate').datetimepicker({
locale: "da",
format: "DD/MM/YYYY",
ignoreReadonly: true
});
$('#txtEndDate').datetimepicker({
locale: "da",
useCurrent: false,
format: "DD/MM/YYYY",
ignoreReadonly: true
});
});
So here is my solution (similar to John Vance's answer):
First go here and get a function to detect mobile browsers.
http://detectmobilebrowsers.com/
They have a lot of different ways to detect if you are on mobile, so find one that works with what you are using.
Your HTML page (pseudo code):
If Mobile Then
<input id="selling-date" type="date" placeholder="YYYY-MM-DD" max="2999-12-31" min="2010-01-01" value="2015-01-01" />
else
<input id="selling-date" type="text" class="date-picker" readonly="readonly" placeholder="YYYY-MM-DD" max="2999-12-31" min="2010-01-01" value="2015-01-01" />
JQuery:
$( ".date-picker" ).each(function() {
var min = $( this ).attr("min");
var max = $( this ).attr("max");
$( this ).datepicker({
dateFormat: "yy-mm-dd",
minDate: min,
maxDate: max
});
});
This way you can still use native date selectors in mobile while still setting the min and max dates either way.
The field for non mobile should be read only because if a mobile browser like chrome for ios "requests desktop version" then they can get around the mobile check and you still want to prevent the keyboard from showing up.
However if the field is read only it could look to a user like they cant change the field. You could fix this by changing the CSS to make it look like it isn't read only (ie change border-color to black) but unless you are changing the CSS for all input tags you will find it hard to keep the look consistent across browsers.
To get arround that I just add a calendar image button to the date picker. Just change your JQuery code a bit:
$( ".date-picker" ).each(function() {
var min = $( this ).attr("min");
var max = $( this ).attr("max");
$( this ).datepicker({
dateFormat: "yy-mm-dd",
minDate: min,
maxDate: max,
showOn: "both",
buttonImage: "images/calendar.gif",
buttonImageOnly: true,
buttonText: "Select date"
});
});
Note: you will have to find a suitable image.
I have a little generic "no keyboard" script - works for me with Android and iPhone:
$('.readonlyJim').on('focus', function () {
$(this).trigger('blur')
})
Simply attach add class readonlyJim to the input tag and voila.
(*Sorry too much StarTrek here)
Related
I have an input with a datepicker. It works properly, but when I insert a date before 01/01/100 it shows me 19xx.
For example, if I insert 01/01/0001 the calendar shows me 01/01/1901
I have read that I have to use yearRange in my script, but it doesn't work for me :(
<script type="text/javascript">
$( document ).ready(function() {
$("#fromDatePickerEnabled_input").datepicker({
yearRange: '1:9999'
});
});
</script>
How can I make that it shows me the year right?
It's already reported / discussed bug in the jQuery forums, since 2016, and unfortunately there aren't any fixes yet ...
In short: Looks like jQuery Datepicker doesn't work correctly with dates which years are less than 1000.
I tried passing different options to Datepicker (as changeYear, shortYearCutoff, yearRange), but no one fixes the problem. Even enabling changeYear: true and manually selecting the year, doesn't result in a correct Date.
It's an option to switch to bootstrap-datepicker, which doesn't have such problems with lower years.
Here you can play with it: bootstrap-datepicker playground
I have a simple html form with 3 inputs
<input id="dateBegin" type="text" placeholder="Begin">
<input id="dateEnd" type="text" placeholder="End">
<input id="datePrice" type="text" placeholder="Ex. : 220.00">
On the first two, I've added a datepicker
$("#dateBegin").datepicker({ dateFormat: 'yy-mm-dd', minDate: 'now' });
$("#dateEnd").datepicker({ dateFormat: 'yy-mm-dd', minDate: 'now' });
Now, in order to create a smooth user experience, I want to select the next input in the form after one input is filled. Specifically it means :
[The user click inside the first input (dateBegin)] -> the datepicker is displayed.
[The user select a date with the datepicker] -> dateBegin is filled with the date value, the datepicker linked to dateBegin is hidden, the next input (dateEnd) is focused and its datepicker is shown.
[The user select a date with the second datepicker] -> dateEnd is filled with the date value, the datepicker linked to dateEnd is hidden, the next input (datePrice) is focused.
In order to have this behaviour, I've added this code to my page
$('#dateEnd').change(function(){
$("#datePrice").focus();
});
$('#dateBegin').change(function(){
$("#dateEnd").focus();
$("#dateEnd").datepicker("show"); // This line can be removed it doesn't change anything but I've tried it :p
});
My problem is at step 2). The datepicker linked to dateEnd appear briefly before disappearing. It may not be clear so here is a JSFiddle reproducing it.
I can't figure out why the datepicker linked to dateEnd disappear ?
But, more importantly, how could I achieve the desired behaviour ?
Try this
$('#dateBegin').change(function(){
setTimeout(function (){
$("#dateEnd").focus();
}, 1);
});
I think what is happening is that after setting focus to the next text box the calendar still thinks it needs to close. by delaying the focus change you change focus after the jQuery UI has responded to the click.
I have to use bootstrap-datepicker.js for my project but it doesn't work well with mask.
problem 1:
It you you are tabbing through fields it will auto populate the date field with today's date. Ideally it won't populate it at all.
Problem 2:
It's difficult to blank-out a the date field once it's populated.
first name: <input type="text">
birthdate: <input type="text" class="date">
city: <input type="text">
js:
$(function() {
$(".date").mask("99/99/9999");
$('.date').datepicker({
format: 'mm/dd/yyyy'
});
});
The problem is all originates from the fact that mask is populating the field with example format characters( "_ _ / _ _ / _ _ _ _" ) during focus and when the focus leaves datepicker is attempting to parse the example characters BEFORE mask has a chance to remove them. datepicker can't parse these special characters into a date therefore it is selecting today's date.
I think that if I can figure out a way to remove the example characters before bootstrap-datepicker attempts to parse them my problem would be fixed.
I would provide a jsfiddler example but I can't figure out how to add bootstrap-datepicker.js and jquery.maskedinput.js on their site.
Thanks for your help.
I stumbles across this option:
$('.date').datepicker({
format: 'mm/dd/yyyy',
forceParse: false
});
Surprising that force parse is true by default. darn bootstrap. Problem fixed.
Late answer but this was the only one that worked for me after deconstructing the sequence of events handled by both plugins (as of this date).
var $date = $('.date');
$date.datepicker({
format: 'mm/dd/yyyy'
});
$date.mask("99/99/9999");
$date.on('keyup', function(){
if ($date.val() == '__/__/____'){
// this only happens when a key is released and no valid value is in the field. Eg. when tabbing into the field, we'll make sure the datepicker plugin does not get '__/__/____' as a date value
$date.val('');
}
});
Long Explanation
Turns out that the datepicker plugin calls an update function on keyup, which in this case is the keyup event triggered when you release the TAB key. This update function calls a DPGlobal.parseDate() function that roughly behaves like this:
DPGlobal.parseDate(''); // returns new Date(); aka. now
DPGlobal.parseDate('10/10/1983'); // returns a Date instance that points to 10/10/1983
DPGlobal.parseDate('__/__/____'); // is generated by the maskedinput plugin and is interpreted as an ilegal date, so the datepicker goes back to the origin of unix time, 1970
This could easily be fixed by changing the parseDate function on the datepicker lib but this is a big no no if you want to keep your code maintainable. We are left then with a hackish way to intercept the foul value and correct it before maskedinput hands it over to the datepicker.
Hope it helps!
Try use other class name to datepicker and mix in your html
$(function() {
$(".date").mask("99/99/9999");
$('.date2').datepicker({
format: 'mm/dd/yyyy'
});
});
birthdate: <input type="text" class="date date2">
$('#date_arrow_from, #date_from').click(function() {
$('#date_from').attachDatepicker({
rangeSelect: false,
yearRange: "2011:2012",
firstDay: 1
});
$('#date_from').showDatepicker();
});
http://jqueryui.com/demos/datepicker/ - I am using something like this, but the problem is that when I click on the input I can't write anything, the keypress event is blocked, how can I unlock the input to be enabled?
Looks like you need to set constrainInput option to false
http://jqueryui.com/demos/datepicker/#option-constrainInput
When true entry in the input field is constrained to those characters
allowed by the current dateFormat.
Code examples initialize a datepicker with the constrainInput option specified.
$(".selector" ).datepicker({ constrainInput: false });
Edit
While the above was marked as accepted I agree with #Edd Morgan that you should try and take advantage of the built in input validation (I always do when I'm using it). To specifically allow dates in the ISO 8601 format you can change the datepickers dateFormat string very easily and the demo below has a good list of examples.
http://jqueryui.com/demos/datepicker/#date-formats
$(".selector" ).datepicker({ dateFormat: "yy-mm-dd" });
I've got a fairly complex web app that I'd like to add some date-picking UI to.
The problem I'm running into is that I haven't been able to figure out from the docs how to really take control of how and when the datepicker appears. There are no form elements involved (and no, I'm not going to add a secret form field), so the dead-simple out-of-the-box approach simply won't work.
I'm hoping someone can provide a little guidance on a pattern that allows me to invoke the datepicker programmatically. I believe I know how I'd use the datepicker's custom events to initalize and position it, and to recover the chosen value when the user dismisses it. I'm just having a hard time instantiating a datepicker, since I'm not pairing it to an element.
Here's what isn't working:
function doThing(sCurrent, event) { // sCurrent is the current value; event is an event I'm using for positioning information only
var bIsDate = !isNaN( (new Date(sCurrent)).getTime() );
jQuery.datepicker('dialog',
(bIsDate ? new Date(sOriginal) : new Date()), // date
function() { console.log('user picked a date'); }, // onSelect
null, // settings (i haz none)
event // position
);
}
The reason is that "jQuery.datepicker" isn't a function. (I'm Doing It Wrong.)
I'm not married to the 'dialog' approach -- it was just my best guess at invoking one without reference to a form element.
I'm using jQuery 1.4.3 and jQueryUI 1.8.6
From the plugin page: http://jqueryui.com/demos/datepicker/#inline
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
<div class="demo">
Date: <div id="datepicker"></div>
</div><!-- End demo -->
Display the datepicker embedded in the page instead of in an overlay. Simply call .datepicker() on a div instead of an input.
I read through the datepicker code, and it appears that, as written, the datepicker must be attached to an input, div, or span tag.
So, if your only objection is to using a form element, then attaching to a div or span is probably your best bet, and there's an example of how to do that here: https://stackoverflow.com/a/1112135
If you're looking for some other way to control the datepicker, then you may have to extend datepicker code to do what you want it to do, and if you go that route, then I recommend starting by taking a look at the _inlineDatepicker private method in the datepicker code, which is the method that attaches the datepicker to a div or span tag.
You have to define Input field dynamically then attach the datepicker you your newly created class Without field I Don't think so It will work.
<input type="hidden" id="yourField" />
and use
$("#yourField").datepicker({
buttonImage: '../yourImage.png',
buttonImageOnly: true,
changeMonth: true,
changeYear: true,
showOn: 'both',
});