2 jQuery Timepickers - Comment Distinguer (jquery.timepicker)

Question

J'utilise jQuery.timepicker (pas sûr largement ce plugin est utilisé - il a été créé par Jon Thornton, Git: https://github.com/jonthornton/jquery-timepicker et Sample Page: http://jonthornton.github.io/jquery-timepicker/)

J'ai deux Timepickers que j'ai créés, StartTime et EndTime, qui peuplent les listes déroulantes avec des choix de 5 minutes entre 00:00 et 23:59.

par exemple,

$('#startTime').timepicker({ 
     'minTime': '12:00am', 
     'maxTime': '11:59pm', 
     'step': '5', 
     'showDuration': 'false' 
});  

$('#endTime').timepicker({ 
     'minTime': '12:00am', 
     'maxTime': '11:59pm', 
     'step': '5', 
     'showDuration': 'false' 
}); 

Mais dans le code HTML finale cette insère DIVs identiques soutenant que les pop-up en cliquant sur un champ de saisie. Autant que je sache, ils ne se distinguent pas par la position, l'identité ou la classe.

<div class="ui-timepicker-wrapper" tabindex="-1" style="position: absolute; top: 230.233px; left: 345.667px; display: none;"> 
    <ul class="ui-timepicker-list"> 
     <li>12:00am</li> 
     <li>12:05am</li> 
     ... 
</ul></div> 

pour les deux. Y a-t-il un moyen de les distinguer? Je dois supprimer certaines entrées de # 2 lors de la sélection dans # 1. Ce qui suit ne fonctionne pas car il supprime de la liste incorrecte. Dans cet exemple, j'ai besoin de supprimer de la liste # 2 l'heure sélectionnée dans # 1.

$('#endTime').on('showTimepicker', function() { 
    var current = $('.ui-timepicker-list li').filter(function() { // Exact match necessary 
     return $(this)[0].childNodes[0].textContent == $('#startTime').val(); 
    }); 
    if (current.length) { 
     $(current).remove(); 
    } 
}); 

Answer 1

Lors de la création du timepicker, vous pouvez utiliser l'option className: pour spécifier une classe pour donner l'élément HTML contenant le menu déroulant. Alors, donnez les deux timepickers différentes classes:

$('#startTime').timepicker({ 
     className: 'startTime', 
     'minTime': '12:00am', 
     'maxTime': '11:59pm', 
     'step': '5', 
     'showDuration': 'false' 
});  

$('#endTime').timepicker({ 
     className: 'endTime', 
     'minTime': '12:00am', 
     'maxTime': '11:59pm', 
     'step': '5', 
     'showDuration': 'false' 
}); 

$('#endTime').on('showTimepicker', function() { 
    var current = $('.endTime li').filter(function() { // Exact match necessary 
     return $(this).text() == $('#startTime').val(); 
    }); 
    current.remove(); 
}); 

Vous n'avez pas besoin que le code verbeux pour obtenir le texte de l'élément de la liste, il suffit d'utiliser $(this).text(). Et il n'y a pas besoin de vérifier la longueur de current; si elle est vide, remove() ne fera rien (presque toutes les méthodes de jQuery n'ont aucun problème à traiter les collections vides).