I have a function that attaches the jQuery UI DatePicker (with my options) to a passed jQuery object:
function bindDatepicker($obj)
{
if ($obj == null) $obj = $("input.date");
$obj.datepicker(
{
appendText: '(yyyy-mm-dd)',
autoSize: true,
changeMonth: true,
changeYear: true,
closeText: 'Done',
dateFormat: 'yy-mm-dd',
defaultDate: '+1m',
minDate: +1,
numberOfMonths: 2
}
);
}
I call this at the beginning of every page to bind it to input elements:
$(function() {
bindDatepicker($("input.date"));
});
This works fine. My problem comes in when I load form elements using $.load(). I cannot attach the DatePicker to any of the loaded elements. For example:
$("#id").load("urlToLoad", function() {
bindDatepicker($("input.date"));
});
Loads the form elements into a div just fine, but will not attach the DatePicker.
Why is this? I am stumped. :(
Thanks,
Tom
You need to use the jQuery .live() method. It will "listen" for any new elements that match your selector criteria.
EDIT: So my original answer was wrong. The .live() method is only for binding events. As you have pointed out in your comments you can't actually bind to an event if there's no event to bind to. So I decided to whip up a sample and see if I could reproduce your problem and I could. What was weirder tho, was if I tried to use an attribute based selector, rather than a class selector, it worked perfectly.
So instead of doing
$('input.date').datepicker();
I stuck a new attribute on there called 'type' and had the following selector:
$('[type=date]').datepicker();
and everything worked.
I have no idea why this is but I can only assume it's a bug with jQuery.
Related
I wanted to find out how I can run some piece of code (attach mouseenter event) for every day after user has selected a day or changed a month/year?
I have tried to attach the event on these events
beforeShow
beforeShowDay
onChangeMonthYear
onSelect
On hover I want to highlight next day in the same row if it exists.
Currently I attach moouseenter/mouseleave event to all days after datepicker is created (which is inline).
I have simplified what I'm doing in the JS fiddle below. I need to have those events working after a date is selected and after month/year has been changed.
JS Fiddle: http://jsfiddle.net/MartinTale/Xx4GS/2/
$("div").datepicker({
changeMonth: true,
changeYear: true,
inline: true,
altField: "#datep"
});
$("tbody td:not(.ui-state-disabled, .active-calendar-cell)").mouseenter(function (e) {
$(this).closest('td').next().find("a").addClass("hover-calendar-cell");
console.log('test');
});
$("tbody td:not(.ui-state-disabled)").mouseleave(function (e) {
$("a.hover-calendar-cell").removeClass("hover-calendar-cell");
console.log('test out');
});
Thanks in advance.
You can use the provided jQuery datepicker events onSelect and onChangeMonthYear.
Code:
$("#datep").datepicker({
changeMonth: true,
changeYear: true,
onSelect: function () {
console.log('s');
},
onChangeMonthYear: function () {
console.log('o');
}
});
Demo: http://jsfiddle.net/IrvinDominin/Xx4GS/
Here is hacky hack.
http://jsfiddle.net/Xx4GS/3/
It works, highlights the next day( the next td in this case).
setTimeout is because I think jquery ui destroys the active date item, so we wait until we have the right one.
You might be able to use onSelect instead of .change, but not a big deal imo
I left a console.log in there so you can see a little bit of whats going on.
There is an event called "onSelect" having the date as its param. see this example:
$("#datePicker").datepicker({
//the format
dateFormat: "dd/mm/yy",
//called when date is selected
onSelect: function (date) {
alert(date);
}
});
Cou can find all the details in the api-doc: http://api.jqueryui.com/datepicker/#option-onSelect
So I'm coding a calendar from the jQuery UI datepicker and this renewing of instance thing is driving me insane.
The goal is to fill the calendar with events from a normal table, with the correct information (Date is given within the table) it works fine. It populates the calendar with events and you can drag and drop them to update the table with correct information. All this is done.
HOWEVER; I want too be able to click on a date, and create a event for the specific date selected, this is easy. However when I click all the previous events get removed because the instance of the Calendar is refreshed. (It's really hard to explain).
The function "initialize" is what gives every TD in the calendar a UL (for dragndrop) with correct "date" attr, and populates the UL with LI's from an external table.
So if I do:
$("#datepicker").datepicker({
firstDay: 1, //Mon-Sun
onSelect: function() { initialize(); }
});
Nothing happens.. But if i do it:
$("#datepicker").datepicker({
firstDay: 1, //Mon-Sun
onSelect: function() { initialize();alert(); }
});
You can actually see the calendar being populated correctly, (the alert prevents code from going further), but when pressing "OK" the calendar instance is refreshed and events are gone.
So what I'd need is an kind of "afterNewInstanceCreated:" command to work from..
Any ideas?
Here is how it looks atm: (JSFiddle), click on a date too see the "magic".
http://jsfiddle.net/N97QA/
Would really appriciate any help
Found answer here:
if you need a "afterShow"-event before jquery-ui version 1.9 you can overwrite the datepicker._updateDatepicker function.
for example:
$(function() {
$.datepicker._updateDatepicker_original = $.datepicker._updateDatepicker;
$.datepicker._updateDatepicker = function(inst) {
$.datepicker._updateDatepicker_original(inst);
var afterShow = this._get(inst, 'afterShow');
if (afterShow)
afterShow.apply((inst.input ? inst.input[0] : null)); // trigger custom callback
}
});
Now the datepicker raise an "afterShow" event after every update from the datepicker element.
Then just use this event in datapicker
$("#calendar").datepicker({
firstDay: 1,
showOtherMonths: true,
selectOtherMonths: true,
afterShow: function() {console.log("it works")}
});
I switched from select boxes to the jQuery datepicker with Cakephp 2.3.8 and I'm wondering if there's a way that I can trigger a POST request with the JS helper when the date is selected. I send POST request to look up values for that specific date. I know it can be done with just jQuery/AJAX, but if I can use the JS helper I'd prefer that since I already have it implemented from when I used the select boxes.
For example, the request will be triggered when the input is clicked, but not when a date is actually selected
$this->Js->get('#arrival_date')->event('click', //also tried change
$this->Js->request(array(
'controller'=>'registration',
'action'=>'room_number'
), array(
'update'=>'#RegistrationRoomId',
'async' => true,
'method' => 'post',
'dataExpression'=>true,
'data'=> $this->Js->serializeForm(array(
'isForm' => false,
'inline' => true
))
))
);
I know I can get it to work with something like this, but since I switched to the datepicker from just using select boxes for the date, I already have everything else implemented for the JS helper. The only issue is getting the JS helper to trigger when a value is selected.
jQuery(function($){
$(document).ready(function() {
$("input.datepicker").datepicker({
onSelect: function(date){
check_availability(date);
},
dateFormat: 'mm-dd-yy',
yearRange: "-100:+50",
changeMonth: true,
changeYear: true,
constrainInput: false,
showOn: 'both',
buttonImageOnly: true
});
});
});
function check_availability(date){
//do stuff here
}
Under the datepicker still lies an input element having all the normal events an input has.
So the events onchange or onblur (depending on what you want to do) will do the job if you bind one of those to the needed action instead of onclick.
Ok, so I am using a datepicker with FuelCMS and have run into an odd issue and am hoping I can get some help.
I have a admin area that includes a date picker for adding events, but it needs to have the ability to add an unlimited number of events. The code that I have works, but only in an odd way. When the system is loaded it automatically creates one date field, but the datepicker will only come up after you have clicked to add a second field. At this point it will work in either field perfectly fine.
This obviously creates some usability issues so I am hoping that somebody might be able to see where I went wrong.
$("body").on("click", ".datepick", (function () {
$(this).datepick({
dateFormat: "yyyy-mm-dd",
rangeSelect: true
});
}))
You need to use focus instead of click. Using click means you have to click in the input field, then it activates, so you will have to click out of the field and back into it for this to work. You also had $(this).datepick instead of $(this).datepicker.
$("body").on("focus", ".datepick", function () {
$(this).datepicker({
dateFormat: "yyyy-mm-dd",
rangeSelect: true
});
});
JSFiddle
try this code.
$(document).ready(function(){
$("body").on("click", function () {
$(this).datepick({
dateFormat: "yyyy-mm-dd",
rangeSelect: true
});
});
});
I am trying to add an event blur on input in order to hide a calendar.
The plugin I am using to show the calendar is the foliowing eternicode/bootstrap-datepicker.
Here is the source code http://jsfiddle.net/KLpq7/75/
var inputs = $('.datepicker').datepicker({
autoclose: true
});
inputs.on('blur', function () {
console.log($(this));
// I would like to hide just the date picker
//$(this).hide();
});
You can try this:
var inputs = $('.datepicker').datepicker({
format: 'yyyy-mm-dd',
autoclose: true}).on('changeDate', function (ev) {
$(this).blur();
$(this).datepicker('hide');
});
Fiddle: http://jsfiddle.net/KLpq7/82/
inputs.on('blur', function () {
inputs.datepicker('hide');
});
This is a known bug* -- if you use "datepicker" as the class for your inputs, it will interfere with the datepicker code, because datepicker is also the class used for the picker pane. Using a different class for your pickers should fix the issue for now.
* There aren't any open tickets for it at the moment, but it is acknowledged as a minor bug
Try this updated fiddle. I think that since you were using a class selector there was some conflicts in the blur event handler. I have separated each calendar picker by ID and it seems to work fine now.