Select input by name with Jquery

Question

I'm adding this input field via an external .js file on clicking a button. This is added every time a button is clicked.

<input name=​"new" id=​"date" type=​"text" value>​

I want to append the Jquery-ui datepicker to this field.

Here's the code I'm using right now but class="hasDatepicker" isn't getting associated with the new field that's added when I inspect it using the console.

$('[name="new"]').datepicker({
        maxDate: '+0d',
    dateFormat: 'yy/mm/dd'
});

I want to select this by name and not id as the id's will be unique for each field that's added.

The datepicker is added to other fields on my page so it should work here as well.

I also want to append class="btn btn-darkgrey" to make the input field into a button via Jquery.

Answer 1

Try like

$('input[name="new"]').datepicker({
    maxDate: '+0d',
    dateFormat: 'yy/mm/dd'
});

Working FIDDLE

Answer 2

As you said every time input field added when button gets clicked. so , where you added the new input field at that place you have to initialize input with datepicker. That means on button click, you added code to insert new input field below that you have to find input by $input = parent_element.find('input[name="new"]').last().

Here parent_element = in which you are appending/inserting your new input.

And initialize that input.

$input.datepicker({
  maxDate: '+0d',
  dateFormat: 'yy/mm/dd'
});

Try this. hope it will work for you.