I've just created a simple textbox where inside I binded the .click event to show the Datepicker, anyway, seems that at first click the Datepicker can't show, but if I click outside the control and then click again over the textbox I can see the Datepicker, I wonder why happen this?
Check out my code here:
<input type="text" id="calendar" placeholder="calendar">
$(function()
{
$('#calendar').click(function()
{
$(this).datepicker();
});
});
FIDDLE.
You are initializing Date picker on your text box click. You have to initialize on document ready method if you want to Open date picker immediate after page load
Change your initializing code to
$(function()
{
$('#calendar').datepicker();
});
For your reference fiddler updated
You don't have to use the click event to start the date picker.
All you have to do is remove the click event and it will work!
The date picker is already attached to your input box and will handle the events by itself.
Calling datepicker() does not invoke the calendar display. What datepicker() did was to attach a 'show calendar' event on input-focus. That's the reason why you see the calendar only when you put the focus back on the input field (not on every click of #calendar element).
If you want to trigger the display of calendar due to some other event (like button click), you can call $('#calendar').datepicker('show').
Related
I tried to fire event for today's date only.
For a reason, I can't use Date picker onselect / onClose method.
Now I want to do it directly when just select todays date from datepicker.
I'm using class for fire event. But now Working.
jQuery("td.ui-datepicker-today a").click(function(){
//event trigger.
});
Can anyone give me any suggestion ?
You may try following
jQuery("body").on("click","td.ui-datepicker-today a",function(){
//event trigger.
});
Jquery click event will not work with the elements that are dynamically added to dom.
You need to use on or bind methods in jquery to achieve this.
I have a jQuery-ui datepicker as an angular directive as mentioned in
http://www.abequar.net/posts/jquery-ui-datepicker-with-angularjs.
The date picker adds a button tag in the run time for the calendar widget. I want to add clcik event to this icon.
I have tried to add the click event to its parent label tag
<label ng-click="setDate();"><input type="text" date-picker></label>
This setDate function is not triggered when clicking on the widget icon, while gets triggered on clicking the input field.
I do not want the onSelect event from the date-picker. I want the click event to fire.
The jQueryUI datepicker can be setup with a Today and Done button. See http://jqueryui.com/datepicker/#buttonbar.
How can I trigger some event (i.e. alert('close');) whenever the Done button is clicked, and then continue with the buttons default functionality (i.e. closing the calender).
Note that I do not wish to use the onClose() method as this is triggered when the calender is closed through any means (i.e. clicking off the calender), and not necessarily when the Done button is clicked.
PS. I don't think it is relevant, but I am using the datepicker in connection with http://trentrichardson.com/examples/timepicker/
You can create a separate handler by using event delegation.
$(document).on('click', 'button.ui-datepicker-close', function(){
alert('close')
});
I bound the event handler to the Done button as it's not entirely clear what behavior you want although I think this is what you are asking
DEMO
I have an AjaxDropDown and I am calling the onchange event whenever the dropdown value changes. In the ajaxstop function I am binding data to the drop-down and selecting some value. So the focus is currently on dropdown as I am using select. Afterwards, whenever I click anywhere on the page the onchange event is called. Is there any way to set the focus of that dropdown to false after using select?
Here is my code:
$(document).ajaxstop(function(){
var dropDown=$('#ddlDropDown').data('tDropDownList');
dropDown.select(0);
});
Why not set the focus to something else, preferably something useful:
$('#other').click(function() {
$('#target').focus();
});
I want to use severall datepickers one one page, so i putt the datepicker in a function. The function is triggered on a onfocus event. This works perfect in IE, also in firefox/chrome, but in Firefox i have to click on the input field, lose focus and click again before i get a datepicker....
See the example: http://www.huurhulp.nl/prijzen.php
First click on the second bullet "wij zijn bepaalde periodes gesloten" To unhide the input fields.
Any idea how to get it working in one click in firefox?
Instead of creating your datepickers in onfocus events create them in your $(document).ready block.
The datepicker plugin internally uses the focus event to show the datepicker widget so using it to create the widget is a bad idea.
Looking at your code doing something like this should work:
$(function() {
$('.datums').datepicker({
//List your options here.
});
});