title: How to wrap the datetimepicker js into AngularJS directive
body: <p>I have spent sometime on researching the existing datetime directives of angularjs.</p>
  
  <p>Both ngularUI and AngularStrap do not provide a datetimepicker as I needed. Of course, I know use a datepicker and timepicker together to archive the purpose.</p>
  
  <p>I have searched the related topic from internet and stackoverflow. Found some interesting and helpful info.</p>
  
  <p><a href="http://dalelotts.github.io/angular-bootstrap-datetimepicker/" rel="nofollow noreferrer">http://dalelotts.github.io/angular-bootstrap-datetimepicker/</a>, there is a datetimepicker, but I dislike the usage of this directive.</p>
  
  <p><a href="https://stackoverflow.com/questions/19482449/connecting-datetimepicker-to-angularjs">connecting datetimepicker to angularjs</a> , this topic is very helpful, I tried to wrap my datetimepicker directive following the steps.</p>
  
  <p>My work is based on <a href="https://github.com/Eonasdan/bootstrap-datetimepicker" rel="nofollow noreferrer">https://github.com/Eonasdan/bootstrap-datetimepicker</a>, a bootstrap 3 based datetimepicker, the UI is very nice.</p>
  
  <pre><code>app.directive('datetimepicker', function() {
      return {
          restrict: 'A',
          require: 'ngModel',
          link: function(scope, element, attrs, ngModelCtrl) {
              console.log('call datetimepicker link...');
              var picker = element.datetimepicker({
                  dateFormat: 'dd/MM/yyyy hh:mm:ss'
              });
  
              //ngModelCtrl.$setViewValue(picker.getDate());
  
              //model-&gt;view
              ngModelCtrl.$render(function() {
                  console.log('ngModelCtrl.$viewValue@'+ngModelCtrl.$viewValue);
                  picker.setDate(ngModelCtrl.$viewValue || '');
              });
  
              //view-&gt;model
              picker.on('dp.change', function(e) {
                  console.log('dp.change'+e.date);              
                  scope.$apply(function(){
                      ngModelCtrl.$setViewValue(e.date);
                  });
              });
          }
      };
  });
  </code></pre>
  
  <p>And use it in my view.</p>
  
  <pre><code>&lt;div class="col-md-6"&gt;
    &lt;div class="input-group date" id="endTime" data-datetimepicker  ng-model="stat.endTime" data-date-format="MM/DD/YYYY hh:mm A/PM" &gt;
      &lt;input class="form-control" type="text" placeholder="End"/&gt;
      &lt;span class="input-group-addon"&gt;&lt;span class="glyphicon glyphicon-calendar"&gt;&lt;/span&gt;
      &lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>There are some problems I found.</p>
  
  <ol>
  <li>If the date is set via json before rendered in view, the initial date did not display, I can not see any log of the execution of ngModel render method.</li>
  <li>When I picked a date, it got a string based datetime to the json data, not a long format. And in other related fragment in the view, the string based date can not parsed by angular date filter.</li>
  <li>When used it in modal dialog, it's value is not cleared when the modal window is popup in the next time.</li>
  </ol>
  
  <p>Thanks in advance.</p>