jonthornton / Datepair.js

A javascript plugin for intelligently selecting date and time ranges, inspired by Google Calendar.
https://www.jonthornton.com/Datepair.js
359 stars 85 forks source link

Multiple Datepairs not working #30

Closed sixtyseven-multimedia closed 9 years ago

sixtyseven-multimedia commented 9 years ago

I have difficulties to get multiple instances of datepair to work. Check this example from a WordPress plugin that I am currently developing:

table id="sixtyseven-business-hours-timetable" class="form-table" border="1">
            <thead>
                <tr>
                    <th>&nbsp;</th>
                    <th>Vormittags</th>
                    <th>Nachmittags</th>
                </tr>
            </thead
            ><tbody>
                <tr>
                    <td class="days">Montags</td>
                    <td class="hours">Von <input type="text" name="sixtyseven_business_hours_settings[mo_am_from]" value="<?php echo esc_attr( $this->options['mo_am_from'] ); ?>" class="timepicker time start" /> bis <input type="text" name="sixtyseven_business_hours_settings[mo_am_to]" value="<?php echo esc_attr( $this->options['mo_am_to'] ); ?>" class="timepicker time end" /> Uhr</td>
                    <td class="hours">Von <input type="text" name="sixtyseven_business_hours_settings[mo_pm_from]" value="<?php echo esc_attr( $this->options['mo_pm_from'] ); ?>" class="timepicker time start" /> bis <input type="text" name="sixtyseven_business_hours_settings[mo_pm_to]" value="<?php echo esc_attr( $this->options['mo_pm_to'] ); ?>" class="timepicker time end" /> Uhr</td>
               </tr>
            </tbody>
        </table>

And I am calling the script(s) like this:

$(function() {

        $('#sixtyseven-business-hours-timetable .timepicker').timepicker({
            'timeFormat': 'H:i',
        });

        $('#sixtyseven-business-hours-timetable').datepair();

     });

While the first input pair is working like a charm, the second pair does not seem to be affected. Am I missing something?

Hope I could express myself clear enough. Greetings from germany!

jonthornton commented 9 years ago

Each pair needs its own container:

<div class="datepair">
    <input class="time start" /><input class="time end" />
</div>
<div class="datepair">
    <input class="time start" /><input class="time end" />
</div>
$('.datepair').datepair();

Your English is very good. Hope this helps!