Call Timepicker with data-values

[ztimer]

I have trouble calling timepicker with class and passing data-values to the script.

So what i have so far is one loop that for each entry it will create
 

foreach($data as $value){
$min_hour = $value['minhour']; // returns value from DB like 7 to 12
echo '<td><input type="text" value="" class="schedule-timepicker" data-minhour="'.$min_hour.'" data-minminutes="30" data-maxhour="17" data-maxminutes="00"></td>';
}

Then in js file I have

$(document).ready(function(){

    $('.schedule-timepicker').timepicker({
        timeFormat: 'HH:mm:ss',
        minDate: new Date(1, 1, 1, $('.schedule-timepicker').data('minhour'), 00),
        maxDate: new Date(1, 1, 1, $('.schedule-timepicker').data('maxhour'), 00),
    });
});

Problem is that the timepicker is called out and works but every input has the same minimum hours value as the first one. Please help how to resolve this. Thanks.

 

[cyberRobot]

Have you tried looping with .each()?

$(document).ready(function(){
    $('.schedule-timepicker').each(function() {
        alert($(this).attr('data-minhour'));
    });
});

[ztimer]

Yes I get alert with different value for each entry.

[cyberRobot]

Were you able to adapt the code to work with the timepicker plugin? Perhaps something like the following will work:

$(document).ready(function(){
    $('.schedule-timepicker').each(function() {
 
 
        $(this).timepicker({
            timeFormat: 'HH:mm:ss',
            minDate: new Date(1, 1, 1, $(this).data('minhour'), 00),
            maxDate: new Date(1, 1, 1, $(this).data('maxhour'), 00),
        });
 
 
    });
});

Note that the timepicker code is untested.

[ztimer]

Wow. It worked out of box. Thanks. I did not realize to use "this" and not to call it again ..
Lesson learned. First use class and then use this

You can't believe how happy this made me. I can continue now with the code. 

Thanks for this..

[cyberRobot]

No problem; glad to help!