如何使用javascript在单个页面中添加多个日历

Question

I am trying to add two calenders in a single page using javascript.

But it is not working for me for the second field. I tried the same for jQuery also. Still facing the same problem.

Can any one helpme . Thanks in advance.

Here is the code:

$(".datepicker").each(function () {
    $(this).datepicker({
        dateFormat: 'dd-mm-yy',
        changeMonth: true,
        changeYear: true,

    });
});

Answer 1

You don't need to do this in loop (although that should also work.) :

$(".datepicker").datepicker({
  // your stuff here
});

Because class selectors returns a collection so this would work.

Sample Demo

---

What could be the issues:

What seems to me is most probably you have same ids to both the elements but still in this case your datepicker for both inputs will be intialized but on selection of a date only first field will be filled with dates if same id applied on every datepicker input.

Sample Demo with same ids.

Answer 2

Why not just this:

$(".datepicker").datepicker({ 
    dateFormat: 'dd-mm-yy', 
    changeMonth: true, 
    changeYear: true
  });

It should apply plugin for each control with 'datepicker' class