how can we use multiple linked datePickers with start and end dates?

[GoogleCodeExporter]

Hi Kelvin,

I have used one of your datepicker 
example(http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/datePickerSta
rtEnd.html) in our website and we have faced one problem while using this. 
below is the case where we have got the issue

we have array of products and we need to select subscription start and end 
dates for each product so in my code I have looped all my products and each 
products has its own start and end date picker form. I have added your date 
picker code in each loop and it only work for first product and for remaining 
products only show calendar but binding doesn't work.

Below I have attached screenshots of my pages. first one is to show list of 
products and here for each product I have a button called subscription and If I 
click on button it will show popup with your date picker start and end date 
code. So for each product I have popup to show start and end dates.

here is my code

$(function()
            {
                $('.date-pick').datePicker()                
                $('#start-date').bind(
                    'dpClosed',
                    function(e, selectedDates)
                    {
                        var d = selectedDates[0];

                        if (d) {
                            d = new Date(d);
                            var start_date = d.getFullYear() + '-' + ('0' + (d.getMonth()+1)).slice(-2) + '-' + ('0' + d.getDate()).slice(-2);

                            alert(start_date);
                            $('#end-date').dpSetStartDate(d.addDays(1).asString());
                        }
                    }
                );
                $('#end-date').bind(
                    'dpClosed',
                    function(e, selectedDates)
                    {
                        var d = selectedDates[0];

                        if (d) {
                            d = new Date(d);
                            var end_date = d.getFullYear() + '-' + ('0' + (d.getMonth()+1)).slice(-2) + '-' + ('0' + d.getDate()).slice(-2);
                            alert(end_date);
                            $('#start-date').dpSetEndDate(d.addDays(-1).asString());
                        }
                    }
                );
            });

I have alerted the selected date for start and end date for each binding but 
alert is comes only for first product and for remaining products it is not 
alerting selected dates.

Any help on this?

Original issue reported on code.google.com by prakashn...@gmail.com on 15 Jun 2014 at 2:34

Attachments:

• productlist.png
• productpopup.png

[GoogleCodeExporter]

Firstly, please don't ask the same question in multiple places!

Secondly, please provide a link to your code, without seeing the actual code 
running I can just guess what the problem is...

My guess is that you are using the same ID for multiple elements on the page. 
This is illegal HTML... You will need to give them unique IDs and you will need 
to change the $('#start-date') and $('#end-date') selectors so that they point 
at the relevant pairing... How you do this will depend on your markup but is 
more of a general javascript query than a date-picker specific one - I 
recommend asking on stackoverflow.com

Original comment by kelvin.l...@gmail.com on 16 Jun 2014 at 1:08

• Changed state: Invalid