关闭日期拾取器的Angular事件检测

Angular event detection for datepicker close

本文关键字：Angular 事件 检测 日期      更新时间：2023-09-26

我刚刚开始使用angular，我很喜欢它。我有一个UI要求将日期显示为文本，然后当你点击文本时，它会显示日期选择器。然后，当你选择一个日期，它会回到文本。听起来很简单。

我尝试了下面代码的一些变化，被编辑的对象持有一个名为editdate的值，单击文本框将其更改为true并隐藏文本并显示编辑器。这很好，问题是隐藏日期选择器。我试着在日期选择器中添加ng-blur，使框在失去焦点时隐藏起来，但这是非常断断续续的，如果它有效的话。然后我尝试了ng-Mouseleave，但是当我将鼠标指针从文本框移到日期选择器中时，该框关闭了。

<td colspan="7">
    Required Date : <span ng-click="item.editdate=true; item.delayeditclose = true;" ng-show="!item.editdate">{{item.dueDate.toDateString()}}</span>  
    <input type="date" ng-blur="item.editdate=false" ng-click="item.switcheditdate(item.delayeditclose)"  ng-show="item.editdate" class="datepick" ng-model="item.dueDate" ng-focus="selectPart(item.partNumber)" />
</td>

javascript初始化为:

                for (var i = 0; i < data.items.length; i++) {
                    item = data.items[i];
                    item.showExpanded = false;
                    item.editdate = false;
                    item.delayeditclose = true;
                    item.switcheditdate = function (delayclose) {
                        if (!delayclose) {
                            this.editdate = !this.editdate;
                            this.delayeditclose = true;
                        }
                        this.delayeditclose = false;
                    };
                    items.push(item);
           }

我现在已经移动到上面，这几乎完成了工作。新的问题是html5日期选择器似乎有一个x来关闭它们。这隐藏了整个盒子，而不仅仅是选择器部分。如果发生这种情况，我想显示日期的文本，而不是我现在得到的什么都没有。有人知道我如何能够捕获这个关闭事件，并恢复到文本或建议一个更好的方法来解决问题吗?

我有很多项每一个都在表的单独一行

我使用的是angular 1.3 beta 8

感谢您的关注安迪

您一无所获的原因是因为当您单击x时发生的事情是日期值被清除，因此您的日期视图是一个空字符串。你能做的是设置一个条件，当日期为空时显示一个字符串，如"点击编辑"。

就像你上面所做的那样，一种方法是在你的日期"视图"中添加一个元素和一个标志。所以修改这个:

Required Date : <span ng-click="item.editdate=true; item.delayeditclose = true;" ng-show="!item.editdate">{{item.dueDate.toDateString()}}</span>

: 

Required Date : 
<span ng-click="item.editdate=true; item.delayeditclose = true;" ng-show="!item.editdate">
    <span>{{item.dueDate.toDateString()}}</span>
    <span ng-show="!item.dueDate">Click to Edit</span>
</span>

指令方式

现在在我看来，我认为这是更好的使用一个指令。它将简化您的逻辑，并且更容易重用。我创建了一个plunker，它显示了我使用指令的实现。

标题中问题的答案

回答你的标题所提出的问题，当使用html5日期选择器时，你无法检测它何时关闭(甚至当它打开时)。查看这个答案和链接的关于输入[type=date]的快速常见问题解答

相关文章：