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

How to trigger a popup message on click the close button of a jqueryui window?

I want to trigger message on click on the close button of a jqueryui window.
See the jqueryui window here. All I want is to give a confirmation message on click the close button.
http://jqueryui.com/dialog/#modal-message
Any idea?

Attach an event listener on the beforeClose event:
$("#dialog").on("dialogbeforeclose", function(event, ui) {
// do stuff, presumably return false to prevent closing the dialog
});

You have to use this code:
$( ".selector" ).dialog({
beforeclose: function(event, ui) { ... }
});

How to prevent jQuery datepicker from popping up on initial page load but still scroll to datepicker textbox

I have something similar to the following Javascript:
$(function () {
$("#txtDate").focus();
$("#txtDate").datepicker({
...
autoOpen: false,
...
});
});
I want to focus in on the textbox on page load without having the datepicker pop up. Currently the page loads with the datepicker already open.
I need to be able to have the page scroll to that textbox on page load and it would be nice for the txtDate textbox to have focus so that users can tab to the next input in the form easily.
Any help would be greatly appreciated.
EDIT:
NOTE: must work in IE 8-10

Try this:
var initialized = false;
$(function () {
$("#txtDate").focus();
$("#txtDate").blur(function(){
if(!initialized){
$("#txtDate").datepicker({
autoOpen: false
});
initialized = true;
}
});
});
Example
http://jsfiddle.net/pQALk/3/

This jQuery works:
$(function () {
$(".txtDate").focus();
setTimeout(function() {$(".txtDate").datepicker({
autoOpen: false
});},10);
});
It's a bit of a hack - added a delay of 0.01 seconds before binding the datepicker, so the focus happens before the datepicker is bound and so doesn't trigger the datepicker.
http://jsfiddle.net/pQALk/2/

jQuery Datepicker, event AFTER select, not "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")}
});

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.