I'm using the jQuery datepicker where I have two textboxes (start date / end date). The user clicks in a respective textbox and the calendar shows up. That is OK.
What I need to do is when the user say, clicks in the start date textbox and picks a date. I need an onblur event to be triggered then.
Where do I set that onblur event for the calendar control after a date has been selected? I tried in the actual textbox but that's not right because that happens before an actual date is picked from the calendar control.
I think you want the onselect event...
$('.selector').datepicker({
onSelect: function(dateText, inst) { ... }
});
Related
on the mobile version of my site I am using input type=date instead of a jquery datepicker to allow for use of the devices inbuilt datepicker as it's generally much quicker and easier to use.
I am trying to detect when 1 date field has a value inputted/changed, to then update the min date attribute of a second datefield, and , submit the form using ajax.
I cannot correctly detect the input or change.
$('#mob-gig-date-gteq').blur(function() {
var date = $("#mob-gig-date-gteq").val();
console.log(date)
$(this).closest("form").submit();
});
(Using .change yields the same results)
If I select a date here nothing happens. On the computer if I select a date, press enter on one of the inputs (day/month/year) and THEN change the date again, the code fires.
On mobile nothing happens at all.
How can I detect the input change on a date field?
Thanks.
Try the jquery .change method. Blur will only fire when the input loses focus.
$('#mob-gig-date-gteq').change(function() {
var date = $(this).val();
console.log(date, 'change')
});
Code pen tested in chrome
Given an input, I initialise a datepicker and all is well. Note, however, that the value in the input is outside the allowed date range in the datepicker initialisation. The behaviour is as I expect: date picker will allow the date to be changed to something in the allowed range.
Then, I set the option "disabled" on the datepicker and it updates the value in the input (to the maximum value allowed in the datepicker initialisation).
Here is an example: http://jsfiddle.net/smrunjgm/4/
Is there a way to prevent option "disabled" from changing the value in the input?
Call the on blur event on the input
$("#date1").blur(function() {
$("#date1").datepicker( "option", "disabled", false);
});
JSFIDDLE
If I do:
$datePicker.datepicker('setDate', null);
the underlying input field does not get set to any specific date, but the datepicker widget selects the current date automatically.
jsfiddle
If I try:
$datePicker.datepicker('setDate', "01-01-2014");
it will populate the date field. The same goes for setting defaultDate on the datepicker options.
jsfiddle
Is there any way to set the widget to a date without having the field populated?
I updated your JSFiddle to work with a textbox rather than a div.
As per jqueryui documentation:
defaultDateType: Date or Number or String
Default: null
Set the date to highlight on first opening if the field is blank.
Which means:
$('#date').datepicker({ defaultDate: '01/01/2015' });
I have discovered a scenario in an app I'm working on that is replicated on the jQuery site. For example, if you go here and enter a string of integers (e.g. "12345678") and hit enter, you'll see that the current date then fills the input. If you then retype another string of numbers and hit enter again, your typed string remains.
In my application I need whatever numbers are typed to remain after ANY enter key press. My questions are:
Why is the string overwritten with a date on the initial enter key press event?
How can this behaviour be prevented?
The Enter key will always grab the selected date and output this value to the textbox. This selected date will be the default date when it is opened. You can set the defaultDate when opening the datepicker, but it will either be a valid date or today's date. There is no way currently to open a datepicker with no defaultDate out of the box.
Normally, you can remove the selected date by setting it to null.
$('#mydate').datepicker('setDate', null);
But this won't work when the datepicker is initially opened, since it ALWAYS opens with a default/selected date.
I've come up with a fiddle showing a possible work around.
/***
Since there is ALWAYS a default date in the datepicker when it's opened,
then let's try and trigger an event after it has been opened, then set the
date to null.
***/
$('#textbox').datepicker(
{
beforeShow: function()
{
$(this).trigger('afterShow');
}
})
.bind('afterShow', function()
{
var $this = $(this);
setTimeout(function()
{
$this.datepicker('setDate', null);
}, 100);
});
I'm trying to get a nice combination working for the strengths of the jQuery datepicker, and Chronic date parser for Ruby on Rails.
The jQuery UI date picker is useful for selecting a date visually. But I would also like the user to be able to type dates in, in whatever format they choose, and let the Chronic library deal with the input.
I've got a text input field, to which I am attaching a date picker, and the date picking functionality works great. But what I would also like is if the user ignores the date picker, and just types in 'last tuesday' and hits enter, I would like to submit 'last tuesday' and let chronic parse that to 2011-10-18. What is happening though is that the textbox value is replaced with the current date from the date picker.
It seems like an option that should be there, to allow the date picker to work as a helper, not the sole source of input. But I can't find a way to disable this functionality.
UPDATE:
I've got an improvement by only showing the calendar on a button press, instead of on focus, but still, it seems wrong, even if you've shown the date picker, that if you type in some text and hit enter, that gets overwritten by the date picker date!
$('.dl_input_production_date').datepicker({
showOn: 'button',
buttonImage: '/images/calendar.gif',
buttonImageOnly: true
});
Got an answer elsewhere: just hide the datepicker on keydown for the original input box. This means that on starting typing, the datepicker vanishes, and the typed input is used directly.
$('.dl_input_production_date').datepicker({
showOn: 'button',
buttonImage: '/images/calendar.gif',
buttonImageOnly: true
}).keydown( function() {
$(this).datepicker( "hide" );
});