Hi, sitepoint masters, I need some help on the datepicker, Is it possible to put an event on the datepicker date?.. I mean just like this example in this date 12/12/12, how can i put an event like “press con meeting”, and this will be displayed in the date of the datepicker,if i will navigate to the specified date i can see the text “press con meeting”…is this possible to the datepicker?please help me on this.
Thank you in advance and i am hoping for your positive response.
Hi jemz,
Can you provide some example code that I can run on my computer, so that I can better understand what you are trying to achieve.
No it’s not. The datepicker is for picking dates. It’s not for providing a system of calendar entries.
You can instead use the FullCalendar for placing entries on certain dates.
Hi paul,yes this is what i mean,…so this is what we call full calendar,I am new to this…i give a try on this,i will write back to you…if i get in trouble.
Hi pullo, thank you for the quick reply, I apologize for my bad english. :)…I thought datepicker can handle what i am trying to achieve but as what paul_wilkins said it is FullCalendar should be used,that’s what i mean providing a system of calendar entries. for placing entries on certain dates… I will write back to you again,thank you so much for the quick reply. 
@paul_wilkins, Is datepicker can also have the abilities to store entries,example if i click on May 2, 2013, in the datepicker it will alert “Go to dentist”,but it’s not the same as the full calendar,because the full calendar we can see the entries in the date.Also in the datepicker in the date May 2,2013 it will highlight the date to determine, that date has event or entries.
No problem. It sounded like you were after some kind of calendar functionality, but I wanted to be sure
Here is my code pullo, I want that if i click on the date april 01 2013,it should alert “I have a meeting”.but i am confuse or i really dont know how to use the method beforeShowDay. I know that datepicker cannot do placing entries on certain date as what full calendar looks like as what paul_wilkins says…
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src ="./js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src ="./js/jquery-ui.js"></script>
<link rel="stylesheet" href="css/jquery-ui.css">
<script type="text/javascript">
$(function (){
var opt = {
appendText: "MM/DD/YY",
showOn: "button",
onSelect: function(date){
if(date==("04/01/2013")){
// alert("hello");
}
},
beforeShowDay: function(date){
date = new Date();
var date = [true,null,"I have a meeting"];
}
};
$('#mydate').datepicker(opt);
});
</script>
</head>
<body>
<input type="text" id="mydate">
</body>
</html>
Hi jemz,
The problem with your code is that the function beforeShowDay() must return an array with [0] equal to true/false indicating whether or not this date is selectable, [1] equal to a CSS class name or “” for the default presentation, and [2] an optional popup tooltip for this date.
This will work and should hopefully give you something to go on:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Datepicker - beforeShowDay example</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script>
$(function() {
$("#datepicker" ).datepicker({
beforeShowDay: function(date) {
dmy = date.getDate() + "-" + (date.getMonth()+1) + "-" + date.getFullYear();
if (dmy == "1-4-2013" || dmy == "15-4-2013"){
return [false,"","Unavailable"]
}else{
return [true, ""];
}
}
});
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker" /></p>
</body>
</html>
Hope that helps.
Hi pullo, Thank you for this,but why is it will not alert unavailable or pop-up unavailable ?
how can i alert this,by using onSelect ?
Hi pullo, is it possible to have different tooltip example this date 1-4-2013 “Unavailable” and in 15-4-2013 i want this tooltip to “Meeting” and etc…
Thank you.
beforeShowDay() is called for each day in the datepicker before it is displayed.
It must return an array with [0] equal to true/false indicating whether or not this date is selectable, [1] equal to a CSS class name or “” for the default presentation.
Other than that you can do what you like before te return.
E.g.:
beforeShowDay: function(date) {
dmy = date.getDate() + "-" + (date.getMonth()+1) + "-" + date.getFullYear();
if (dmy == "1-4-2013" || dmy == "15-4-2013"){
alert("Unavailable");
return [false,""]
}else{
return [true, ""];
}
}
But that would be almost unusable.
When you run my code as per post 9, the HTML generated on unselectable days looks like this:
<td class=" ui-datepicker-unselectable ui-state-disabled " title="Unavailable"><span class="ui-state-default">15</span></td>
It wouldn’t take much to write a bit of code to get a reference to the title attribute of any <td> elelements with a class of “ui-state-disabled” and turn these into tool tips or popups or whatever.
Sure it’s possible, but at some at point it stops being a good idea and you’ll be better off using the calendar plugin that Paul linked to.
To do this just use:
if (){
...
} else if (){
...
}
etc.
Or use a switch statement.
Hi pullo, Thank you so much for helping me and for the quick reply