jquery datepicker is not working well in mobile - javascript

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","");
}
});

Related

Calendar appearing again after changing tabs or minimizing browser

I'm using pickadate jquery plugin and applying it to a field in a form page.
When the user clicks on the input field, there are 2 possible options I'm dealing with:
the calendar appears and the user selects a date (after that the calender automatically closes)
the user just close the calendar (selecting no dates)
What's happening is that after one of the 2 options above, if the user opens another tab in the browser (and then go back to the form tab) or minimize the browser (and then open it again in form tab), the calender shows up again.
This only happens if the last field selected is the one with the pickadate plugin applied to. If the user selects another field that does not contain the pickadate plugin and does that same process (of changing tabs or minimizing browser), the calender doesn't appear again.
What should I do to does not make the calender appear if the last field select is the one with the pickadate plugin applied to?
The code that calls the plugin is:
$(document).ready(function() {
$('.datepicker').pickadate();
});
Method 1 (This method worked for me)
Add onOpen to the initialization object.
var $input = $('.datepicker');
$input.pickadate({
onOpen: function () {
if ($input.hasClass('picker__input--target')) {
$input.pickadate().pickadate('picker').close(true);
}
}
});
Method 2 (This method didn't work for me. Maybe I didn't code it right).
Add onClose to the initialization object.
var $input = $('.datepicker');
$input.pickadate({
onClose: function() {
$input.blur();
}
}
});
Source from github
It seems to me that when the tab with the picker is brought back to focus the focus event for that input is being called again, thus causing the picker to pop back up.
I would tie into the window focus event
window.addEventListener('focus', function() {
// make sure input in question is not in focus
});
then make sure input in question is not in focus

How to close DateTimePicker with a double click

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.

Jquery mobile datebox today button close on click

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();
});

JavaScript/JQuery datapicker PLUS event EQUALS no image

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?

Preventing jQuery timepicker addon from automatically opening

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
});

Categories