title: How to create an angularJs wrapper directive for a ui-bootstrap datepicker?
body: <p>I am using the <a href="https://angular-ui.github.io/bootstrap/" rel="nofollow noreferrer">ui.bootstrap.datepicker</a> directive to display some date field. However most of the time I need the same setup: I want it to come along with a popup and a popup button and also I want German names for the texts. That does create the same code for the button and the texts and the formatting over and over again, so I wrote my own directive to prevent myself from repeating myself.</p>
  
  <p><a href="http://plnkr.co/edit/eXxBnZ7ArHvhA6fQAxDL?p=preview" rel="nofollow noreferrer">Here is a plunkr</a> with my directive. However I seem to be doing it wrong. If you choose a date with the date picker using the "Date 1" datepicker that does not use my directive everything works fine.
  I'd expect the same for Date 2, but instead of displaying the date according to the template I supplied in the input field (or any other value I expected) it displays the <code>.toString()</code> representation of the date object (e.g. <code>Fri Apr 03 2015 00:00:00 GMT+0200 (CEST)</code>).</p>
  
  <p>Here is my directive:</p>
  
  <pre class="lang-javascript prettyprint-override"><code>angular.module('ui.bootstrap.demo').directive('myDatepicker', function($compile) {
    var controllerName = 'dateEditCtrl';
    return {
        restrict: 'A',
        require: '?ngModel',
        scope: true,
        link: function(scope, element) {
            var wrapper = angular.element(
                '&lt;div class="input-group"&gt;' +
                  '&lt;span class="input-group-btn"&gt;' +
                    '&lt;button type="button" class="btn btn-default" ng-click="' + controllerName + '.openPopup($event)"&gt;&lt;i class="glyphicon glyphicon-calendar"&gt;&lt;/i&gt;&lt;/button&gt;' +
                  '&lt;/span&gt;' +
                '&lt;/div&gt;');
  
            function setAttributeIfNotExists(name, value) {
                var oldValue = element.attr(name);
                if (!angular.isDefined(oldValue) || oldValue === false) {
                    element.attr(name, value);
                }
            }
            setAttributeIfNotExists('type', 'text');
            setAttributeIfNotExists('is-open', controllerName + '.popupOpen');
            setAttributeIfNotExists('datepicker-popup', 'dd.MM.yyyy');
            setAttributeIfNotExists('close-text', 'Schließen');
            setAttributeIfNotExists('clear-text', 'Löschen');
            setAttributeIfNotExists('current-text', 'Heute');
            element.addClass('form-control');
            element.removeAttr('my-datepicker');
  
            element.after(wrapper);
            wrapper.prepend(element);
            $compile(wrapper)(scope);
  
            scope.$on('$destroy', function () {
                wrapper.after(element);
                wrapper.remove();
            });
        },
        controller: function() {
            this.popupOpen = false;
            this.openPopup = function($event) {
                $event.preventDefault();
                $event.stopPropagation();
                this.popupOpen = true;
            };
        },
        controllerAs: controllerName
    };
  });
  </code></pre>
  
  <p>And that's how I use it:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;input my-datepicker="" type="text" ng-model="container.two" id="myDP" /&gt;
  </code></pre>
  
  <p>(Concept was inspired from <a href="https://stackoverflow.com/a/27605580/327301">this answer</a>)</p>
  
  <p>I am using angular 1.3 (the plunker is on 1.2 because I just forked the plunker from the <a href="http://angular-ui.github.io/bootstrap/" rel="nofollow noreferrer">angular-ui-bootstrap</a> datepicker documentation). I hope this does not make any difference.</p>
  
  <p><strong>Why is the text output in my input wrong and how is it done correctly?</strong></p>
  
  <h1>Update</h1>
  
  <p>In the meantime I made a little progress. After reading more about the details about compile and link, in <a href="http://plnkr.co/edit/gtQzzH6fnv5Zjxc9vf9M" rel="nofollow noreferrer">this plunkr</a> I use the compile function rather than the link function to do my DOM manipulation. I am still a little confused by this excerpt from the docs:</p>
  
  <blockquote>
    <p>Note: The template instance and the link instance may be different objects if the template has been cloned. For this reason it is not safe to do anything other than DOM transformations that apply to all cloned DOM nodes within the compile function. Specifically, DOM listener registration should be done in a linking function rather than in a compile function.</p>
  </blockquote>
  
  <p>Especially I wonder what is meant with "that apply to all cloned DOM nodes". I originally thought this means "that apply to all clones of the DOM template" but that does not seem to be the case.</p>
  
  <p>Anyhow: My new compile version works fine in chromium. In Firefox I need to first select a date using a date picker and after that everything works fine (the problem with Firefox solved itself if I change undefined to null (<a href="http://plnkr.co/edit/Oc069LSf42BE5N54IpBQ" rel="nofollow noreferrer">plunkr</a>) in the date parser of the date picker). So this isn't the latest thing either. And additionally I use <code>ng-model2</code> instead of <code>ng-model</code> which I rename during compile. If I do not do this everything is still broken. Still no idea why.</p>