Jquery add datepicker to input fields

Question

I am using the jquery datepicker on a number of text input fields in my forms. I typically bind it to the input(s) as follows:

$(function() {
  $("#date_due").datepicker();
});

In certain circumstances, the id of the field that I am referencing may not be an input field, but I still want to use the same ID and I dont want the datepicker to be available.

I have tried the following, but it doesnt seem to work (i.e. the datepicker does not appear at all):

$(function() {
  $("#date_due :input").datepicker();
});

Or, put another way, I only want the datepicker to be used if the field is a form text input.

This works, thanks Kris. Can you put it as an answer so I can give you credit pls? — JonoB
– JonoB, Commented Oct 29, 2011 at 16:45

Kris · Accepted Answer · 2011-10-30 13:22:44Z

2

I was rather on the cellphone when I commented, so didn't feel like typing a whole bunch of stuff to give you the simple edit, but here it is with some additional info:

$(function() {
  $("input#date_due").datepicker();
});

The selector you want is all elements with the tag name "input" and the id attribute set to "date_due".

The way you had it with "#date_due :input" was selecting child nodes of all elements with the attribute id set to "date_due" and constraining the selection to child nodes with the pseudo-class "input" (witch to the best of my knowledge does not exist), that's why it failed to select your input element.

answered Oct 30, 2011 at 13:22

Kris

42.1k9 gold badges78 silver badges103 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Anatoly · Accepted Answer · 2011-10-29 16:22:16Z

0

:input is not a selector, because it's an object, so use the following code:

$("#date_due input").datepicker();

It will apply datepicker to children inputs of #date_date parent div

answered Oct 29, 2011 at 16:22

Anatoly

15.6k5 gold badges57 silver badges77 bronze badges

2 Comments

JonoB Over a year ago

Thanks for the reply. For some reason, Kris's answer $("input#date_due").datepicker(); works, and yours doesnt.

Anatoly Over a year ago

I think you expect the input with id date_due

Collectives™ on Stack Overflow

Jquery add datepicker to input fields

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related