We Keep Coding

jQuery DatePicker - How do I show today's month instead of the selected dated?

So I've been looking everywhere for an answer. Including jQuery's datepicker API website and I can't seem to find a suitable answer.
This is what I would like to happen. When the text field is pressed and the datepicker pops up, I would like the calendar month to show this month, rather than defaulting to any previously selected date.
I still want to be able to select next and previous on the months. So setting minDate is not an option.
So for example, a user has previously selected 03/03/2013. The user then clicks the textbox, which pops up the date picker again, the month displayed is today's month rather than March. However, 03/03/2013 is still selected.
Thanks!
Code is very vanilla...
$(document).ready(function () {
$(".datePickerShowToday").datepicker({
dateFormat: 'dd/mm/yy',
buttonText: 'Click here to select a date',
onSelect: function () {
}
});
});
HTML Code:
<input type="text" id="NotificationDate" class="datePickerShowToday" />

You can do this with the $.datepicker._gotoToday function [this is what the datepicker uses for Ctrl + Home]. However, the widget doesn't provide an open event (it has beforeShow but that won't work in your case as it only runs before the widget is drawn). You can simulate this by using .focus on the input field and only binding one handler at a time (since keeping focus on the datepicker itself also triggers focus):
$( ".datePickerShowToday" ).datepicker({
onClose: function() {
$( ".datePickerShowToday" ).one("focus", function() {
$.datepicker._gotoToday(this);
});
}
});
$( ".datePickerShowToday" ).one("focus", function() {
$.datepicker._gotoToday(this);
});
Here's a fiddle with the above: http://jsfiddle.net/4vskg74t/

One way to do it:
$(document).ready(function(){
$('.datePickerShowToday').datepicker();
$(".datePickerShowToday").click(function(){
$('.datePickerShowToday').datepicker('setDate', null);
});
});

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

Hide the datepicker on blur event

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.

How to disable closing of datepicker on jQuery UI Datepicker

When I open a datepicker like that:
$("#checkindate,#checkoutdate").datepicker({
onClose: {
//I'd like to disable the closing
}
);
I'd like to prevent the closing of the datepicker dialog depending on a condition. The ideal would be that return false would stop this event.
I tried modifying the source code and there is no trivial solution.
What I want to do is to be able to select the checkout date without reopening another dialog.
Any idea?

I don't think it's possible to pick multiple dates from one datepicker. You probably will need to do something like their date range demo:
http://jqueryui.com/demos/datepicker/#date-range

$('#datepicker').blur(function(){
$(this).datepicker('show')
})
open up http://jqueryui.com/demos/datepicker/ and copy the code on the javascript console and see what happens

var selectTask = function(selectedDate, calendar) { // pretends to remain open
setTimeout(function() {
$(selector).datepicker('show'); // don't go away ...
}, 0);
};
// datepicker instance
$(selector).datepicker({ onSelect:selectTask, duration:0 });
It's an illusion of prevent closing; might reach the goal.

After spending around a day finally got it,
$( "#selector" ).datepicker({
onSelect: function ( dateText, inst ) {
this._updateDatepicker(inst);
}
});
For all code, click here.

In this question: jQuery UI Datepicker - Multiple Date Selections the accepted answer explains how to implement the multiple date selection in one datepicker.
To prevent the datepicker closing after the selection of a date, you can put this in the onClose option:
$(this).data('datepicker').inline = false;
And add this in onSelect option:
$(this).data('datepicker').inline = true;

How to open second UI Datepicker on closing the first one

I´m trying to add some functionality to a form with JQuery UI´s Datepicker.
When a user selects the arrival date (onSelect), a few things should happen:
Update the departure to 3 days after the arrival date (This works now :))
Split the departure date in 3 and add each part to an input field (see arrival date example in Fiddle)
When the arrival-datepicker closes (onClose), the departure-datepicker should open automatically, defaulting to the date selected in point 1 (example: http://www.kayak.es )
I managed to get point 1 to work, but I´m a bit lost with the other features. If anyone can show me how to do this or get me on the right track that would be really great! I´m still a beginner but learning fast.
Here´s a Fiddle of what I have now: http://jsfiddle.net/mattvic/B6Kax/13/

Split the departure date in 3 and add
each part to an input field
Looks like you already have the code written for this in the onSelect handler of the destination datepicker. Unfortunately, it looks like setDate does not trigger that event, and you cannot trigger it manually. What I would recommend is breaking that code out into a separate function that you can call from both places:
function splitDepartureDate(dateText) {
var depSplit = dateText.split("-", 3);
$('#alt-vertrek-d').val(depSplit[0]);
$('#alt-vertrek-m').val(depSplit[1]);
$('#alt-vertrek-y').val(depSplit[2]);
}
Then change your departure datepicker onSelect handler to point to that function:
$('#vertrek').datepicker({
// Prevent selecting departure date before arrival:
beforeShow: customRange,
onSelect: splitDepartureDate
});
Lastly, call that function from your arrival's onSelect event handler:
/* snip: */
// Populate departure date field
var nextDayDate = $('#aankomst').datepicker('getDate', '+3d');
nextDayDate.setDate(nextDayDate.getDate() + 3);
$('#vertrek').datepicker('setDate', nextDayDate);
// Manually call splitDepartureDate
splitDepartureDate($("#vertrek").val());
When the arrival-datepicker closes
(onClose), the departure-datepicker
should open automatically, defaulting
to the date selected in point 1
This is just a matter of using the onClose event handler:
onClose: function() {
$("#vertrek").datepicker("show");
}
Here's your updated example: http://jsfiddle.net/zXMke/

Answering the title's question :
$("#firsDate").datepicker('option',"onClose", function() { $( "#secondDate" ).datepicker( "show" ); });
Source :
http://api.jqueryui.com/datepicker/#method-show
http://api.jqueryui.com/datepicker/#option-onClose
I recommend to use onSelect instead of onClose event in order to make sure that the 1st date has been selected before opening the second datepicker.

point 3 answer:
$(function() {
$( '#aankomst' ).datepicker({
onClose: function(dateText, instance) {
$( '#vertrek' ).datepicker('show');
},
onSelect: function( dateText, instance ) {
// Split arrival date in 3 input fields
var arrSplit = dateText.split("-");
$( '#alt-aankomst-d' ).val(arrSplit[0]);
$( '#alt-aankomst-m' ).val(arrSplit[1]);
$( '#alt-aankomst-y' ).val(arrSplit[2]);
// Populate departure date field
var nextDayDate = $( '#aankomst' ).datepicker('getDate', '+3d');
nextDayDate.setDate( nextDayDate.getDate() + 3 );
$( '#vertrek' ).datepicker( 'setDate', nextDayDate );
}
});
});
you already have the solution for point 2?
Cheers,
Daddy