How to add datePicker by class dynamically using jquery?

Question

I am using "jquery-1.9.1.js" and my javascript code is as below:

$('.fromSearch').on('focus', function(){
var $this = $(this);
  if(!$this.data('datepicker')) {
   $this.removeClass("hasDatepicker");
   $this.datepicker();
   $this.datepicker("show");
  } 
});

my html code is this:

<div id="duration" class="duration">
    <td><input type="text" id="fromSearch" class="fromSearch"></td>
</div>

PROBLEM: I am generating "fromSearch" (date picker) dynamically, lets say 5 date pickers, but I get date picker only for the first time!

I have been working on solutions provided on similar questions, but none of them is working for me. Can any body help me figuring out where I am going wrong? Thanks for your time. :)

can you provide a demo fiddle so it will be easier to understand? — Amit
– Amit, Commented May 18, 2015 at 12:42
I would say you need to delegate event, e.g: $(document).on('focus', '.fromSearch', function(){...}); That's said, beware, IDs must be unique on document context. And BTW, your HTML markup is invalid — A. Wolff
– A. Wolff, Commented May 18, 2015 at 12:42
You need to use a delegated event handler as the .fromSearch element is added after the DOM has been loaded. — Rory McCrossan
– Rory McCrossan, Commented May 18, 2015 at 12:42
@A. Wolff, yes ids are unique for each of the dynamically generated text box. It goes like this fromSearch, fromSearch2, fromSearch3 ... fromSearch5 for each of the date pickers — Amir
– Amir, Commented May 18, 2015 at 12:44
@Amir Still be aware a TD cannot be direct descendant of DIV element — A. Wolff
– A. Wolff, Commented May 18, 2015 at 12:45

Guruprasad J Rao · Accepted Answer · 2015-05-18 13:34:21Z

3

You can try as below:

$('body').on('focus', '.fromSearch', function(){
    $(this).datepicker();
});

UPDATE

To pass date to a function write onselect event in your datepicker as below:

$('body').on('focus', '.fromSearch', function(){
    $(this).datepicker({
          onSelect: function (dateText, inst) {
                   //do necessary actions
          }
    });
});

edited May 18, 2015 at 13:34

answered May 18, 2015 at 12:44

Guruprasad J Rao

29.7k16 gold badges113 silver badges212 bronze badges

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

5 Comments

Guruprasad J Rao Over a year ago

Anytime.. Happy Coding.. :) Meanwhile you can mark it as answer if it helped.. :)

Amir Over a year ago

@Rao, now how can I send selected date to a javascript function?

Guruprasad J Rao Over a year ago

@Amir.. Updated the answer. Check and let me know!!

Amir Over a year ago

Yessss it worked too, sorry I cannot double Tick here :D Thanks for your time :)

Guruprasad J Rao Over a year ago

Anytime!! Happy Coding.. :)

Bryan Zwicker · Accepted Answer · 2015-05-18 12:45:46Z

0

Your code seems to work. You need to ensure you are including jQuery-ui. DatePicker does not come bundled with jQuery

http://code.jquery.com/ui/

answered May 18, 2015 at 12:45

Bryan Zwicker

6521 gold badge7 silver badges25 bronze badges

Collectives™ on Stack Overflow

How to add datePicker by class dynamically using jquery?

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related