We Keep Coding

How to bind jQuery Calendar to icon?

I use pop-up datapicker (DHTML Date/Time Selector), which appears due to icon click. But if you change the size of browser window, it stays fixed on the page.
Is there any way to bind calendar to icon this way?
Image
Calendar.setup({
context: self,
firstDay: 0, /* first day of the week */
inputField: "firstDateVal", /* id of the input field*/
button: "date-field-from-button", /* trigger for the calendar (button ID)*/
align: "Bl",
singleClick: true,
showsTime: true,
timeFormat: "24",
onSelect: function (){
}
});

Try using jQuery datepicker.
See this documentation : https://jqueryui.com/datepicker/

jQuery UI Datepicker after select/change month/year

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

Cakephp JS helper with jQuery datepicker

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.

jQueryUI inline DatePicker doesn't work until after I change month

I'm using an inline Datepicker with jquery 1.7.2 and jqueryui 1.8.20. the problem I have is that the following doesn't work until I change the month in the datepicker, then it works fine. Any help would be appreciated.
$( "#datepicker" ).datepicker({
dateFormat: 'D, dd M yy',
minDate:0,
onSelect: function(dateText, inst){
//$('.field_pickDate').html(dateText);
alert('boo');
//console.log(dateText);
}
});
dateFormat and minDate are both working but the onSelect event isn't firing from the get-go.

This is the default functionality of that event.
Its fired when the user "selects" something in the date picker.
To call an event on click (before you show the date Picker) you can use "beforeShow".
$( "#datepicker" ).datepicker({
dateFormat: 'D, dd M yy',
minDate:0,
beforeShow: function(input, inst) {
alert("Fired on click, before the picker is shown");
},
onSelect: function(dateText, inst){
//$('.field_pickDate').html(dateText);
alert('boo');
//console.log(dateText);
}
});
Here's a JSFiddle example of it working with your code.
http://jsfiddle.net/applehat/jukJa/1/
You could always just add another event onto the text box, such as $('#datepicker').select(function(){ /* do something */ });
as well, if you want to detect them selecting the field.
================= EDIT ===============
Since you are using it as an Inline element, Im not sure what your problem is. I have updated my JSFiddle here: http://jsfiddle.net/applehat/jukJa/2/
Everything works as expected here, so maybe you have other code causing issues?

How to make a jquery datePicker button image unclickable

I have a jquery UI datePicker in my page. I have a text box on which the date is displayed. The code is:
$("#cal").datepicker({
minDate: new Date(),
defaultDate: new Date(),
buttonImage:
'/images/calendar.gif',
constrainInput: false,
closeText: 'Close',
showButtonPanel: true,
showButtonText: 'Choose a date',
buttonImageOnly : true,
showOn : 'button'
});
$("#till").datepicker('setDate', today);
I want to disable this on some conditions. I use the following code to disable:
$("#cal").datePicker('disable');
It blacks out the text box but the image is still clickable. The problem is in IE, the date picker pop up comes up but does not close when the image button associated with the date picker is clicked.
I also tried to bind a onclick function with the image to make it non-clickable. But that does not work as well.
How can make the date picker image button non-clickable when the date picker is disabled.
Any help would be appreciated.
Thanks,
Farzana

I'm not sure if it will work, but you should try to change the showOn property right after the disable call.
$("#cal").datepicker('disable');
$("#cal").datepicker( "option", "showOn", 'focus' );
Give it a try!

why dont you hide the button itself by .hide() or adding class or style
or you can add style to make it disable
.addClass or .add to add css

I would use .unwrap(); on the <img> to remove the <a> wrapper. That is if it's wrapped directly in the <a> tag.

Try this:
$("#cal").datepicker("option", "disabled", true);

This works for me -- gotta grab the button and disable it.
$('#MyDatePicker').datepicker({}).next('button').attr('disabled', 'true')