Why does datepicker() accept the argument 'getDate'?

Question

var year= $("input[name=dateAccessed]").datepicker('getDate').getFullYear()

The code above get's the date set in the datepicker, and then get's only the year from date and then saves it in a variable named year.

I understood that this code converts the input field with name dateAccessed into a jQuery object. Since it's a jQuery object now, jQuery methods can be applied to it.

Then I apply the datepicker, is datepicker a method or an object? I dun understand since it accepts both arguments(making it a method), and properties(an object has properties). Is there such thing as a object+method thing?

Why does datepicker accepts the argument ('getDate') to return the selected date? How does this work?

Wouldn't it be better if datepicker had a .getDate method instead? So we can write it as datepicker().getDate.getFullYear().

Answer 1

DatePicker

datepicker is a function. The function is invoked with the parentheses ('getDate') and due to this parameter's value of 'getDate', it returns a Javascript Date object, which is native Javascript and has the getFullYear function.

Please see the getDate section of the jQuery UI Datepicker Widget page for more information on the datepicker.

getDate()

Returns: Date
Returns the current date for the datepicker or null if no date has been selected.

    This method does not accept any arguments.

Code examples:

Invoke the getDate method:

var currentDate = $( ".selector" ).datepicker( "getDate" );

Javascript Concepts

One key concept that will help you in Javascript is to understand the difference between function invocation and function reference. Please see another of my javascript answers that goes into more detail. Once you understand that, you'll see why "is datepicker a method or an object" must be answered by "it's a function object".

In Javascript, functions are just special objects that can be invoked by tacking on a pair of parentheses after their names. Doing so then returns not the function object itself, but whatever the function object returns, with the statement within it of return somethingHere;. It may help you to read more about prototypal inheritance.

jQuery Concepts

jQuery takes advantage of the chaining ability of Javascript. This is where you invoke a function, and the function returns an object, on which you invoke another function--again and again. Another usage pattern would be to declare variables for each step of the chain and take single steps, but this becomes messy and in general we all prefer to avoid declaring variables where it is not necessary. If we were to convert your code so there were no chaining it might look like this:

var dateAccessedInput, selectedDate, year;
dateAccessedInput = $("input[name=dateAccessed]");
selectedDate = dateAccessedInput.datepicker('getDate');
year = selectedDate.getFullYear();

In jQuery, it is common practice for a jQuery function, where possible, to return the same jQuery object, so that you can just chain another method off it. You can even put them on separate lines when the chaining gets long, to help keep it from becoming a big blob. Here is some real javascript jQuery code from one of my projects:

incident
   .wireUp($('div.incidents div.incident'))
   .find('input:data(focus)')
   .first()
   .focus()
   .filter(':data(select)')
   .trigger('select');

I hope this makes it clearer why the different functions can be chained together.

Also, for what it's worth, Javascript has functions, and while yes, they are methods, we generally don't call them such.

Answer 2

A little about chaining and expressions

It seems you are confused by the chaining of methods, particularly methods that return an object. Since each method returns a value, it's an expression that references that value, be it an object or a string.

The example below avoids the chaining of methods and breaks down your own example to expressions that are assigned to variables.

An unchained version of your code

$ is a function that gets the argument "input[name=dateAccessed]" and returns a jQuery object. You can reference the result object directly like in your example, or assign it to a variable.

For example:

var jquery_field_object = $("input[name=dateAccessed]");

Similarly, datepicker is a method of the jQuery object that gets the argument 'getDate' and returns a Date object. You can again reference the result object directly or assign it to a variable.

For example:

var date_object = jquery_field_object.datepicker('getDate');

In a similar manner, getFullYear() is a method of the Date object. So the complete unchained example would read:

var jquery_field_object = $("input[name=dateAccessed]");
var date_object         = jquery_field_object.datepicker('getDate');
var year                = date_object.getFullYear();