Question

我刚开始使用棱角分明，一般都喜欢它。我有一个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

谢谢你的期待安迪

Answer 1

你没有得到任何东西的原因是因为当你点击x时会发生什么，日期值被清除，所以你的日期视图是一个空字符串。你可以做的是设置一个条件来显示一个字符串，如＆＃34;点击编辑＆＃34;当日期为空时。

如上所述，一种方法是在日期中添加一个元素和一个标记＆＃34; view＆＃34;。所以改变这个：

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日期选择器时，您无法检测它何时关闭（或者甚至在打开时）。请参阅this answer和关联的Quick FAQs on input[type=date]

datepicker关闭的角度事件检测

1 个答案: