We Keep Coding

disable calendar in datepicker

I'm using datepicker twice on one page. One is a regular, and another should be only for picking month of a year.
unfortunately css style
<style>.ui-datepicker-calendar {display: none;}</style>
disables calendar for both. Setting handler on trigger beforeShow like:
$('.date-picker').datepicker( {
changeMonth: true,
changeYear: true,
showButtonPanel: true,
beforeShow: function(date) {
$(".ui-datepicker-calendar").css("display", "none");
alert('fired when selected');
}
});
also doesn't help. The trigger is working, but the calendar is still there. What can I do? Any help appreciated.

you can use a css class disable:
.disable{display:none}
And apply this second class in the div you want to be hidden.
<div class="ui-datepicker-calendar disable"> Calendar here ... </div>

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

jquery datepicker on jquery dialog won't show after cancel is pressed

I've successfully created a jquery datepicker on jquery's dialog box that was loaded via load() function.
I was able to achieve it by overriding dialog box's open event:
open: function (event, ui) {
if ($('input.date-picker').length > 0) {
$('input.date-picker').datepicker({
showOn: "button",
buttonImage: "/Content/images/calendar.gif",
buttonImageOnly: true
});
$('input.date-picker').datepicker("refresh");
}
},
The datepicker successfully show after I press the image button. But I noticed something strange, when I open the dialog, click cancel then open the dialog again and click the calendar image button, the datepicker won't show.
Might help, I've also overriden dialog's close event:
close: function (event, ui) {
$('input.date-picker').datepicker("destroy");
$(this).dialog("destroy");
}
Thanks

In the close function you try to destroy datepicker on input where class is date-picker but after previous call to datepicker creation the class of the input has changed to hasDatepicker so try to use
$('input.hasDatepicker').datepicker("destroy");
Edit :
The datepicker should implement this close method :
close: function (event, ui) {
$('input.hasDatepicker').datepicker("destroy");
$(this).dialog("destroy");
$(this).remove();
}

What worked for me was -
Inside the dialog, if I have multiple inputs with class datepicker , then
$(".datepicker").removeClass('hasDatepicker').datepicker();
Basically, to remove the class hasDatepicker before initializing datepicker again.
I was on version 1.8.18 of jquery.ui.datepicker

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')