>From the docs:
Allows you to define your own event when the datepicker is selected.
The function receives the selected date as text and the datepicker
instance as parameters. this refers to the associated input field.
Code examples
Supply a callback function to handle the onSelect event as an init
option.
$('.selector').datepicker({
onSelect: function(dateText, inst) { ... }
});
I'm not sure if you can change the css on the selected cell using the
onSelect function. (without a hack that is). What you could do (I
think) is have a global variable that holds the selected date. Then
recall the show on the datapicker and have your beforeShowDay function
check to see if the day being shown is equal to that global variable.
If so, apply the css you prefer using the return from the beforeShow
Day (see docs).
...I just tested and it appears that beforeShowDay is called
automatically after onSelect. So just setting the global variable
during onSelect does the trick. See demo here: http://jsbin.com/ovuhi/edit
On Aug 26, 10:06 am, Chris Westbrook <[email protected]> wrote:
> Thanks, this is helpful. What does inst give me access to in the onSelect
> function/ I'd like to change the style of the current date when the user
> selects it just like I can in beforeShowDay, but I want to make it something
> different based on different conditions so I can't just modify the css for
> the selected date. Does inst give me access to the current cell or link
> that was clicked?
>
> On Wed, Aug 26, 2009 at 9:39 AM, Fontzter <[email protected]> wrote:
>
> > Hi Chris,
>
> > Code example below should help. Here's some pointers:
>
> > For inline use a div for the datepicker.
> > For a full year use the numberOfMonths option -- use an array of
> > columns/rows. So [3,4] will be three months high and four wide.
> > To have it be the full year, set the defaultDate to Jan 1 of the year
> > For highlighting, you were correct using the beforeShowDay.
> > For selected highlighting, use the onSelect
>
> > You can view the code below in action here:http://jsbin.com/utadi/edit
>
> > Hth,
>
> > Dave
>
> > var dateList = new Array();
> > dateList.push("20090704");
> > dateList.push("20091031");
> > dateList.push("20091225");
>
> > $('#datepicker').datepicker({
> > numberOfMonths: [3,4],
> > defaultDate: new Date(2009, 1 - 1, 1),
> > beforeShowDay: function(dateToShow){
> > return [1, ($.inArray($.datepicker.formatDate('yymmdd',
> > dateToShow),dateList) >= 0) ? "ui-state-error": ""];
> > },
> > onSelect: function(dateText, inst) { alert("Do what you need with
> > date using currentDay:" + inst.currentDay + ", currentMonth(zero-
> > based):" + inst.currentMonth.toString() + " and currentYear:" +
> > inst.currentYear.toString()); }
> > });
>
> > On Aug 25, 3:57 pm, chris <[email protected]> wrote:
> > > I'm trying to use the datepicker in inline mode to show an entire year
> > > and
> > > 1. on page load, make certain dates different colors based on
> > > information from a database and
> > > 2. When a date is selected, dynamically change the color of the date
> > > based on other information selected by a user. I think the
> > > beforeShowDay will help me do #1 but not sure if there is a way to do
> > > #2. And how do I get it to display a whole year from Jan to Dec of
> > > say 2009?
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"jQuery UI" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---
