angular2-datetimepicker 不会在点击外部时关闭。
创始人
2024-10-22 07:01:08
0

要解决"angular2-datetimepicker 不会在点击外部时关闭"的问题,你可以使用以下解决方法:

  1. 使用HostListener监听全局的点击事件,当点击事件触发时,检查点击的目标元素是否在datetimepicker内部,如果不在则关闭datetimepicker。
import { Component, ElementRef, HostListener } from '@angular/core';

@Component({
  selector: 'app-datepicker',
  template: `
    
    
`, styles: [ ` .datetimepicker { position: absolute; /* datetimepicker样式 */ } ` ] }) export class DatepickerComponent { showDatePicker = false; selectedDate: string; constructor(private elementRef: ElementRef) { } toggleDatePicker() { this.showDatePicker = !this.showDatePicker; } @HostListener('document:click', ['$event']) onDocumentClick(event: MouseEvent) { if (!this.elementRef.nativeElement.contains(event.target)) { this.showDatePicker = false; } } }

在上面的代码中,我们使用了@HostListener装饰器来监听整个文档的点击事件。当点击事件触发时,我们检查点击的目标元素是否在datetimepicker内部,如果不在,则关闭datetimepicker。

请注意,上述代码只是一个示例,你需要根据你的实际情况进行调整和修改。你需要将.datetimepicker样式替换为你自己的datetimepicker样式,并在datetimepicker的内容部分添加你自己的日期选择器逻辑。

  1. 可以尝试使用其他第三方日期选择器库,如ngx-bootstrapng-bootstrap。这些库提供了更多的自定义选项和事件处理,可能更容易实现点击外部关闭的功能。

希望这些解决方法对你有帮助!

相关内容

热门资讯

8分钟模块!哈糖大菠萝软件下载... 8分钟模块!哈糖大菠萝软件下载(透视)一直真的是有辅助透视(哔哩哔哩)1、哈糖大菠萝软件下载脚本辅助...
3分钟技法!wpk真吗(透视)... 您好,wpk真吗这款游戏可以开挂的,确实是有挂的,需要了解加去威信【485275054】很多玩家在这...
第一分钟练习!wepoker免... 第一分钟练习!wepoker免费脚本(透视)确实真的是有辅助下载(哔哩哔哩)1、wepoker免费脚...
六分钟资料!hhpoker辅助... 您好,hhpoker辅助软件下载这款游戏可以开挂的,确实是有挂的,需要了解加去威信【13670430...
第三分钟指南!佛手在线大菠萝技... 第三分钟指南!佛手在线大菠萝技巧(透视)其实真的是有辅助插件(哔哩哔哩)1、该软件可以轻松地帮助玩家...
第三分钟妙计!hhpoker破... 第三分钟妙计!hhpoker破解工具(透视)总是真的是有辅助插件(哔哩哔哩)1、进入到hhpoker...
九分钟学习!pokemmo脚本... 九分钟学习!pokemmo脚本手机版(透视)竟然是真的有辅助工具(哔哩哔哩)1、进入游戏-大厅左侧-...
第五分钟方针!wepoker正... 第五分钟方针!wepoker正确养号方法(透视)确实存在有辅助透视(哔哩哔哩)1、wepoker正确...
9分钟指引!黑侠破解wepok... 9分钟指引!黑侠破解wepoker(透视)一贯真的是有辅助脚本(哔哩哔哩)黑侠破解wepoker辅助...
六分钟教材!hhpoker是内... 六分钟教材!hhpoker是内部控制吗(透视)确实存在有辅助工具(哔哩哔哩)1、玩家可以在hhpok...