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
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
As it is clear in the subject itself.
I have my datepicker fields blank at the time of creation and set to Null as default.
But I can't find a way to set a datepicker field to set it to blank again once a date is selected.
is there a way or I am missing something?
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 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) { ... }
});