0

i am working to get a year calendar that looks and behaves exactly the same as the inline datepickers assigned to input fields on site. So i created this block

<div class="box_content">
   <div class="yearCal" id="cal2"><!-- this will receive the calendar --></div>
 </div>

and assigned the datepicker object to the element with id 'cal2'. This renders me the calendar widget showing 12 months. Every td element looks like this:

<td about="I receive class 'free' or 'booked' from 'BeforeShowDay' handler">
   <a about="I am the element catching the click and need the parent class"></a>
</td>

I testwise configured the datepicker's onSelect function using this code

onSelect: function(dateText, inst) { 
   console.debug( jQuery(this).parent().attr('class') ); 
}

But when i click on a calendar day i get the id 'box_content'. No matter what i try, i dont get the parental element. But i need to get it since every td elements is getting a 'free' or 'booked' class when the widget is getting rendered and depending on its class i have to do some database action.

Can you please tell me how to do it right?

Tino
  • 33
  • 5

1 Answers1

0

I don't see where is your datepicker, however, asuming you have something like this:

<td about="I receive the class 'free' or 'booked' from 'BeforeShowDay' event">
   Date: <input type="text" id="datepicker" about="input receiving the onSelect event">
</td>

You can access the class of the td containing the datepicker (on the onSelect event) like this:

<script type="text/javascript">
  $('#datepicker').datepicker({
     onSelect: function(dateText, inst) {
        //dosomething
        var tdclass = $(this).parent().attr('class');  
        //dosomethingelse
     }
  });
</script>
marcocamejo
  • 798
  • 1
  • 7
  • 20
  • Thanks for your reply. Seems you misunderstood me. I dont create the table myself. This is the rendered datepicker widget. Since i cannot answer my own question providing new code anymore i edited the initial post providing the relevant code. – Tino Oct 21 '11 at 12:14
  • Sorry for the late answer. I tested the code [here](http://jsfiddle.net/LbLkt) It works... – marcocamejo Dec 02 '11 at 15:13
  • This is right. But you constructed a wrong interface. The table you are using to wrap an input field that shows the datepicker on click is not the table i am talking about. The one i am talking about is the calendar to be seen after clicking into the input field - the rendered datepicker table. The td i am trying to get its class from is the td wrapping the highlighted day ... again ... inside the rendered calendar widget! And this does not work as it should. How to fetch this one? –  Jan 17 '12 at 14:44
  • Sorry, I am not getting to completely understand you. From your actual code I can tell you: 1) If your calendar is rendered inside a div that is inside a div of class 'box_content', then the OnSelect method with $(this).parent().attr('class') will ALWAYS give you 'box_content'. 2) I Think what you need is to set a handler for the OnClick event of the anchors, is in this point where you can access the element you want with .parent(). Refer to http://api.jquery.com/click/ – marcocamejo Jan 21 '12 at 22:35