JQuery UI control defined via HTML attributes instead of JavaScript

Question

This question comes out making use of the HTML helpers in ASP.NET MVC and jQuery. For example, if I define an extension method like the following:

<:% Html.DatePickerFor(x => x.StartDate) %>

I would want it to make use of the jQuery DatePicker. However, this either means I need to manually add to the header the invocation of the DatePicker method (in which case there is no point to the DatePickerFor method), or clutter up the HTML with a whole bunch of script tags that are invoked upon document.ready.

One thought I had was the idea that instead of add the appropriate jQuery UI behavior to a HTML element via Javascript, you could do it via additional attributes, such as the following:

<input id="foo" css="widget-ui-datepicker" widget-alt-field="#fooalt" />

jQuery could then just looks for all elements with the right css class and collect together all the widget-* values and use them to build the "options" that is used to invoke the datepicker method in the first place.

This is the type of idea that could go directly into the widget factory. What are people's thoughts on this?

Answer 1

I typically have this line in my master page:

$(".datepicker").datepicker();

and then just stick the datepicker class on any textbox that I want to use it on.

but it would be a timesaver to have an extension method instead of always writing new { @class: "datepicker" }

I like it.