Angular event detection for datepicker close

Question

I have just started using angular and in general love it. I have a UI requirement to show a date as text, then when you click on the text, it shows a date picker instead. Then when you select a date it goes back to text. Sounds simple.

I have tried a few variations on the below code the object being edited holds a value called editdate, clicking on the text box changes this to true and hides the text and shows the editor. This works fine, the problem is hiding the date picker. I tried adding ng-blur to the datepicker to cause the box to hide when it looses focus, but this was very intermittent as to if it worked. I then tried ng-Mouseleave but the box closed when I moved the mouse pointer into the date picker from the text box.

<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>

The javascript is initialized as:

                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);
           }

I have now moved onto the above which almost does the job. The new issue being html5 date pickers seem to have a x to close them down. This hides the whole box and not just the picker part. If this happens I want to show the text of the date rather than what I get now which is nothing. Does anyone know of how I can capture this close event and revert back to the text or suggest a better approach to the problem?

I have lots of items each one is in its own row in a table

I am using angular 1.3 beta 8

thanks for looking Andy

Answer 1

The reason why you are getting nothing is because when you click x what happens is that the date value gets cleared so then your date view is an empty string. What you can do is set a condition to display a string such as "Click to Edit" when the date is empty.

Taking just what you have above, one way of doing it is by adding an element and a flag in your date "view". So change this:

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

To:

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>

The directive way

Now in my opinion I think it's much better to use a directive for this. It would simplify your logic and is much easier to re-use. I created a plunker which shows my implementation using a directive.

Answer to question in title

To answer the question posed by your title, when using the html5 date picker, you can't detect when it is closed (or even when it is opened). See this answer and the linked Quick FAQs on input[type=date]