Does anyone know of a method to prevent the jQuery timepicker addon from automatically opening up when the textbox is focused? The documentation doesn't seem to provide a way and I'm currently looking at the source seeing if I can add the functionality but have I overlooked a simple way to accomplish this?
How about just initiate the datetimepicker upon the button clicked (as well as focus the input box), and destroy the object when the picker is closed?
$('#button').click(function() {
$('#timepicker').datetimepicker({
onClose: function(dateText, inst) {
$(this).datetimepicker('destroy');
}
}).focus();
});
Example: http://jsfiddle.net/william/NRH9r/
try to use a jquery function called unbind() to remove the onfocus event from the datetimepicker. You can then call an instance of the datetime picker when you fire a click event, or any other event you wish to fire. Another option would be to call the onfocus event that fires the datetimepicker, And pass in an event object into the callback function. Then call for example event.preventDefault(). This will prevent the onfocus() event from doing what it normally does.
As the timepicker is an addon to the jquery ui datepicker, you can use the showOn option to specify that a button is used to trigger it. See the datepicker example here.
Here's an example of how this can be used for the time picker:
$('input:text.timepicker').timepicker({
showOn: "button",
buttonImage: "/content/images/time_icon.png",
buttonImageOnly: true
});
Related
I'm using Jquery UI datepicker for my Rails application, and I want to trigger an event whenever someone clicks on the button for next month. It is not triggering anything though. My JQuery version is v1.12.4.
Here's a sample of my html code:
<input type='text' name='date_from' class="form-control date_picker" placeholder="Data de ida..." id='datetimepicker1' required/>
<div id="datepicker1" class="calendar"></div>
The HTML code for the datepicker is the default generated by JQuery UI.
So here is my javascript attempt:
$('body').on('click','.ui-datepicker-next',function(e){
console.log('Next/prev month')
e.preventDefault();
});
It does nothing! It doesn't raise an error on the console, it doesn't print anything and it doesn't attach the click event to the elements with the ui-datepicker-next class.
If I copy and paste the following code in the console it works well for the current elements in the document.
$('.ui-datepicker-next').click(function(e){
console.log('Next/prev month')
e.preventDefault();
});
It has never happened to me before, so I'm sorry if this question should be more detailed, but I really don't know what else I should mention here.
Edit:
jsfiddle: https://jsfiddle.net/9484zzrL/
This is the best I could do so far to recreate the issue on jsfiddle.
If you click on a day of the selected month it is fine, but if you change the month it doesn't work anymore.
Edit 2:
I believe this recreates perfectly my problem. Simply the event is not triggered when I choose any date in the calendar.
https://jsfiddle.net/awhwr3uv/
Edit:
So I looked at your latest jFiddle. I wondered if you had tried to use something like this:
$("#datepicker1").datepicker({
firstDay: 1,
onSelect: function(date) {
console.log('Date Selected: ' + date);
//Do some other cool stuff here
$(this).hide();
}
});
$("#datepicker2").datepicker({
firstDay: 1,
onSelect: function(date) {
console.log('Date Selected: ' + date);
//Do some other cool stuff here
$(this).hide();
}
});
You can carry out everything you need to in the onSelect option that is in your jFiddle and it even passes you the date to the callback as an argument.
Original
Change this:
$('body').on('click','.ui-datepicker-next',function(e){
console.log('Next/prev month')
e.preventDefault();
//setTimeout(date_picker_listener(),500)
});
To this:
$(document).on('click','.ui-datepicker-next',function(e){
console.log('Next/prev month')
e.preventDefault();
//setTimeout(date_picker_listener(),500)
});
It works in your fiddle.
Edit
I wanted to explain my guess at why your code didn't work.
I think it is because jQuery already has a click listener attached to the body element for the class of the button. Because 2 click listeners are attached to the body for the same class of element, the first one the JavaScript engine reaches is the one that fires.
In effect when you attach a click listener to the body using the on method the JavaScript engine is constantly scanning the body for clicks and then checking if the click matched your selector. Because jQuery already has the click listener on the body for that selector your listener never received the event.
With that in mind by attaching your click listener to the document, you have an entirely new listener set up and the engine is now also scanning the document for clicks and seeing it matches your selector. Because yours is the only one listening on the document yours gets the event.
So I tested this by changing the listener from click to mouseover and sure enough it works.
$('body').on('mouseover','.ui-datepicker-next',function(e){
console.log('Next/prev month')
e.preventDefault();
//setTimeout(date_picker_listener(),500)
});
I hope this helps. It's the best I can come up with as to why your code didn't work.
I am using a jQuery DateTimePicker addon (By: Trent Richardson) and it will only close after you select the date AND the time. However some users don't care about the time and they want the Calendar to close after they choose the date only.
I managed to close the Calendar after picking the Date only but I need to implement a double click and not a single click. How do I do that?
Here is my code:
$(jqCompletedEndID).datetimepicker({
ampm: true,
onSelect: function(){
$(this).datepicker("hide"); $(this).blur();
}
});
I know there is a dblclick event in Javascript but not sure how to apply it in this context.
Thank you!
I have run into the exact same problem / requirement. I tried something very similar to Alex's solution, but it doesn't work because the datetimepicker seems to wipe all styles and event bindings when a day is selected (I assume it's being reconstructed, but haven't checked), making it impossible for the dblclick event to fire.
I've come up with a solution which isn't pretty but does work. You can use the datetimepicker's onSelect event to bind a couple of handlers as follows:
(assuming this._$input is a jQuery reference to the input control being used)
this._$input.datetimepicker({
...
onSelect: function() {
var self = this;
setTimeout(
function () {
$('.ui-datepicker-current-day').bind('click', function () { self._$input.datepicker('hide'); });
$('.ui-datepicker-current-day').bind('dblclick', function () { self._$input.datepicker('hide'); });
},
0
);
}
You're probably wondering why I bind both click and double click, particularly in light of my claim above that double click won't work. It seems that in Chrome, FireFox, Safari, and Opera the event will trigger the "click" event, but in IE it will trigger the "dblclick" event. Also, if you're wondering about the setTimeout, it's required because the popup won't be constructed until after the method is finished, so those selectors won't return anything if executed without it.
You've no doubt noticed that my solution will also close the picker when the currently-selected date is clicked whether or not it's part of a double-click. This is intentional in my case (and I also trigger the same logic in the beforeShow event to wire the handler so clicking on the currently-selected date will always close the picker). In your case, if you want it to work strictly with double clicks, all I can recommend is that you track the time between clicks and make sure they arrive within some threshold.
Try this...
$('#datepicker').datepicker({
//...
});
$('table.ui-datepicker-calendar a').bind('dblclick', function() {
$('#datepicker').val();
});
You can add a doubleclick event handler on the html tag itself. You would be having a emtpy div for the datepicker, so modify it as
<div id="datepicker" ondblclick="close()"></div>
In the close() function write the code to hide the datepicker div.
I m designing an application for mobile in which I m using jquery datepicker. I have date textbox and a submit button. The calendar opens on the submit button. But the problem is, when I click on any day of the month, this button gets focus and is clicked instead of chosing that day.
Thanks,
Do you mean the button under the datepicker gets focused? I had that issue and solved it by adding a callback function to datepicker which would disable all other inputs when it got activated, then re-enable them again on datepicker close.
Check the documentation, datepicker has callbacks for both open and close.
Edit:
Instead of another reply, I'll post here.
When you init your datepicker, you can pass options, including callbacks. These are the two callbacks you want to use, what I've done here is grabbing all inputs in a variabel called "inputs" by $('#containingdiv').find('input'), then beforeShow I add attribute "disabled" to all the inputs, and on close I simply remove this attribute again.
date.datepicker({
beforeShow: function() {
inputs.attr("disabled","disabled");
},
onClose: function() {
inputs.attr("disabled","");
}
});
I'm using the jquery mobile datebox from here: http://dev.jtsage.com/jQM-DateBox/ and I am setting the calTodayButton to true. The problem I have is when I click the button it just selects today's date which is fine but I also want it to close on click. Any ideas as to the best way to do this?
Try adding an click event to the button which closes the parent container like this
$('.ui-datebox-controls').find('a.ui-btn').on("click",function(){
$(this).parent().parent('.ui-datebox-container').hide();
});
The accepted solution didn't work for me, but this one did:
$('.ui-datebox-controls').find('a.ui-btn').live( 'click', function(){
$(this).parent().parent().parent().parent('.ui-datebox-container').hide();
});
I have a couple datepickers on my webpage. After getting everything laid out as needed, I started adding JavaScripting (with JQuery) to add additional functionality.
This is giving me a lovely datepicker with text input on the left and a little calendar icon on the right. UNTIL (queue the sinister music) I add an event handler in the $(document).ready function:
$("#Schedule_PickupDate").datepicker({
onSelect: function(dateText, inst) {
alert("narf1");
}
});
Once an event handler is added in the $(document).ready function (OnClose does the same thing), the calendar image disappears. POOF I can't seem to get it to show back up! On the other hand, I set non-event, "disabled" attributes without an problems. Any ideas?