Question

I’m writing my first jquery UI widget: a date range control composed of two text boxes (start and end date) both of which will be using the jQuery UI DatePicker.

All the widget code examples I’ve seen online have you applying the widget behavior to a generic selector. In my case, I need exactly two elements in my selector (the two aforementioned text boxes) and will be applying different logic to each. For example, the start date text box will have different onblur events/behavior than the end date text box.

Is there a way to create a widget without a selector and instead have two named constructor arguments, one for start date and one for end date? If not, is there a better way I should be approaching this widget? Perhaps I should create a POJSO (plain old JS object) instead?

Answer 1

what’s it matter what the selector is? widgets use selectors because most of the time it applies to the selected elements. but it’s up to the widget to use the selected elements. technically, it could just ignore them and continue processing whatever. so why don’t you just select the document (or like the parent container of the textboxes), and pass in an object as the parameter to your widget with values for “textbox1” and “textbox2” and then get those values on initialization. does that make sense?

for example:

$("#parent_container").yourWidget({
    txtbox1: $("#txt_id1"),
    txtbox2: $("#txt_id2"),
    otherParam: true
});

and in your widget code, just ignore selected elements. process everything based on the parameter’s values.