Can someone please explain this jquery datepicker example

Question

Here is a link to the site: http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/datePickerClickInput.html

I'm looking at the text box called date 1.

There is a little calendar icon next to the text box. When it's clicked, the datepicker opens. What makes this work? I can't seem to figure it out.

I understand how the text box works because it has a class called .date-pick which gets the datepicker function with the jquery.

But the calendar is applied with a class called dp-choose-date. No where in the source can I find this class.

I think I'm confused a little here.

Answer 1

The class is being applied by the date picker plug-in, probably using the addClass function. The plug-in, when it's initialized, probably creates a DIV (id=;dp-popup') that has the necessary values for the current month. That DIV is hidden (display:none) but still has the class of dp-popup when first initialized. When you click in the textbox or click the button, there's an event handler assigned to those events (focus for the textbox, click for the button) that sets the display style of the DIV to not be hidden and it also positions it right below the text box.

I didn't dig into the code a whole lot, but looking at the markup a little, that's how I suspect it's working.