J'utilise la bibliothèque DaterangePicker dans mon application. Je veux déclencher la méthode interne de DaterangePicker .hide () une fois que vous utilisez une zone de conteneur DaterangePicker. Mon code ressemble à ceci.
$('body').on('mouseleave', function(){
$('#reportrange').hide();
});
3 Réponses :
Cette solution trouve le bouton Annuler dans le DaterangePicker et clique-t-il par programmation. Il suppose que la bibliothèque DATANGETPICKER utilise les classes par défaut que la version actuelle attribue à ses contrôles. Ces noms de classe ont été trouvés en examinant les éléments du daterangepicker dans le HTML rendu à l'aide de Chrome Dev Outils.
Évitez de mettre p> Onmouseleave code> sur le corps lui-même (sauf si vous utilisez sur code> avec un sélecteur). Je l'ai attaché à la classe dans cet exemple. P>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<div class="visual-rangepicker">
<input id="reportrange" value="01/01/2015 - 01/31/2015">
</div>
Ça a marché comme sur des roulettes. Pourquoi je me sens si stupide. Je connais JQuery mais je n'ai pas eu cette solution simple à l'esprit. Merci beaucoup. @Tibrogargan
Picker de plage de date disponible masquer.daterangepicker événement. Allez à http://www.daterangepicker.com/#events , cocher Masquer événement.
L'événement Masquer.daterangePicker est tiré lorsque la méthode masquer () est appelée. On ne s'appelle pas quand la souris quitte le daterangepicker
J'ai essayé cette solution uniquement qui n'a pas fonctionné pour moi.
Je sais qu'il y a déjà une réponse acceptée, mais je pense que cela pourrait également être utile car il utilise la fonction de masque natif de DaterangePicker au lieu de simuler un clic sur le bouton Annuler:
$(function(){
$('.daterangepicker').mouseleave(function(){
$('#reportrange').data('daterangepicker').hide();
});
});
Cela semble être une approche plus correcte que je crois.
@Aakashkumar Ce n'est en fait pas une bonne idée, car le gestionnaire de clic fait plus qu'un simple masquer () . Il modifie également certaines variables internes et incendie l'événement Annuler.DaterangeSickerCicker . Vous pourrez peut-être appeler clickcancel sur le DaterangePicker, mais il peut ne pas être exporté. Ce serait une meilleure solution, sauf cela vous donnerait alors une dépendance difficile à la mise en œuvre interne d'une solution tierce - ce qui n'est pas une bonne idée.
Comme il s'agit de la façon dont vous devriez appeler les méthodes de l'objet DaterangePicker selon la documentation, je ne pense pas que la dépendance dure sera un problème, car toute modification de la mise en œuvre devrait être mentionnée dans la DOCS si les auteurs modifient le code. Et la méthode masquer () est utilisée si souvent dans le code que je ne peux penser à aucune raison de la renommer ou de changer de fonctionnalité complètement.
Si vous appeliez un masquer que DaterangePicker expose, je serais d'accord, mais vous appelez masquer
Non. Placer une alerte à l'intérieur de la fonction interne Masquer DATERANGERPICKER montre que ce n'est pas masquer je m'appelle. Je peux également utiliser clickcancel () sur Mouseleave (ce qui n'est sûrement pas une fonction jQuery, mais définie dans le code DaterangePicker) au lieu de masquer () , et ça marche.
Ouais. Mettez un point d'arrêt dans Masquer et vous verrez que c'est appelé de JQuery, car JQuery est suffisamment intelligente pour vérifier que la cible l'applique. Votre réponse serait meilleure si vous appelez clickcancel comme vous sautez une partie de la mise en œuvre .... qui vous remet dans la situation d'appel à une méthode qui n'est pas documentée.
Utilisation de mon code ci-dessus avec une fonction nommée au lieu d'une fonction anonyme et d'un point d'arrêt au début de la fonction MACH (CODE> Hide () , la pile d'appel indique: masquer , < Code> myDRED et une sous-section jQuery ci-dessous. Ce qui me dit que la méthode masquer a été appelée par myDRPHIDER , qui a utilisé le code JQuery lorsqu'il est exécuté. Si la méthode a été appelée par JQuery, la deuxième ligne de la pile d'appels serait jQuery, pas la fonction que j'ai définie.
Mon mauvais, ne prêtant pas attention à l'utilisation de Data comme documenté par DaterangePicker. Néanmoins pas à l'aise avec cette utilisation car elle ne résout pas la question de s'appuyer sur des fonctionnalités sans papiers. Bien sûr, les auteurs disent qu'il permet d'accéder aux méthodes et aux propriétés de l'objet sous-jacent ... mais c'est Internet, les choses changent. Aussi pas vraiment à l'aise avec ma solution utilisant des classes sans papiers.
C'est plutôt "documenté paresseux" que non documenté. Mais je suis d'accord, ce n'est rien que vous puissiez compter sur les versions futures sans prendre de plus près le code source ou l'objet DOM en premier.
Vous essayez
déclencheur INGCliquez sur sur le bouton Annuler?Non, j'ai besoin de l'appeler par défaut une fois que l'utilisateur quitte la zone contenant avec la souris.
Droit. Au lieu d'appeler
masquer () , appelezdéclencheur () sur la touche de clic qui doit également masquer la boîte de dialogue, mais éliminer la nécessité de cliquer deux fois.Pouvez-vous fournir l'extrait de code? J'ai essayé de déclencher aussi mais ne pas avoir à appeler la méthode interne de DaterangePicker. Actuellement, des méthodes susmentionnées pointent vers JQuery au lieu de DaterangePicker. Je sais que cela doit faire quelque chose en utilisant la bonne façon de transmettre des références.
Vous auriez besoin de fournir un exemple de reproductible minimal . Je n'ai pas votre HTML ou quels scripts vous y compris.
@Tibrogargan Je n'ai pas beaucoup de HTML. C'est assez simple. Bien que j'ai mis à jour la question.
@Tibrogargan Bonjour, j'ai également ajouté le lien Jsfiddle et la description de la réponse d'origine.
Aakash, aucune infraction, mais je n'ai pas le temps ni le désir de tirer votre code de côté afin de créer une reproduction de votre problème. Si vous l'avez transformé en un extrait de travail, il serait probablement facile (c'est-à-dire un exemple de reproductible minimal , que j'ai déjà demandé). Liens vers des sites externes dans des langues que je ne parle pas ne valent pas beaucoup.
@Tibrogargan partagé Jsfiddle est en anglais également. Veuillez vous référer à la deuxième dernière.
Aakash. Le code que vous avez posté ne fonctionne pas . Je ne vais pas dépenser les efforts nécessaires pour reproduire la question puis créer une solution lorsque vous n'allez même pas aller à l'effort de poster la liste des scripts que vous utilisez dans votre question.
@Tibrogargan J'ai mis à jour ma question avec le travail Jsfiddle. Et mentionner l'URL ici aussi. jsfiddle.net/rg7fh1a8
Vous ne devriez pas utiliser des ressources hors site dans vos questions. Ils peuvent disparaître sans avertissement qui ruine votre question.