title: How to set the date value of ui bootstrap datepicker
body: <p>My create event page initializes my date picker to current date. That works fine. But when I want to edit the event on my edit page, i'm not sure how to set the date picker value to the event I have in my php variable.</p>
  
  <p>Do I need a different angular module for that?</p>
  
  <p>Any help would be greatly appreciated</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div ng-app="ui.bootstrap.demo"&gt;
  &lt;div ng-controller="DatepickerDemoCtrl"&gt;
  
  &lt;?php
  // How to set date picker to value of $event-&gt;event_start
  // $event-&gt;event_start
  ?&gt;
  
  &lt;p class="input-group"&gt;
    &lt;input type="text" id="dt_start" class="form-control" readonly datepicker-popup="@{{format}}" ng-model="dt1" is-open="opened1" max-date="'2020-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" /&gt;
    &lt;span class="input-group-btn"&gt;
      &lt;button type="button" class="btn btn-default" ng-click="open($event,'opened1')"&gt;&lt;i class="glyphicon glyphicon-calendar"&gt;&lt;/i&gt;&lt;/button&gt;
    &lt;/span&gt;
  &lt;/p&gt;
  
  &lt;timepicker
    ng-model="dt1"
    hour-step="1"
    minute-step="15"
    show-meridian="true"&gt;
  &lt;/timepicker&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>angular
    .module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap'])
    .controller('DatepickerDemoCtrl', function ($scope) {
  
    $scope.today = function() {
  
      var dt1 = new Date();
      dt1.setHours( dt1.getHours() + 1 );
      dt1.setMinutes( 0 );
      $scope.dt1 = dt1;
    };
    $scope.today();
  
    $scope.clear = function () {
      $scope.dt1 = null;
    };
  </code></pre>
  
  <p><strong>Updated HTML and JS with Alan Tsai's suggestion - still not working as expected - datepicker working, but timepicker still empty</strong> </p>
  
  <p><strong><a href="http://plnkr.co/edit/0KvnXJrKmAmxsEAu0vH4" rel="nofollow">See plunker</a></strong></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;?php  
      $dateeventstart = new DateTime($event-&gt;event_start);
  ?&gt;  
  
  &lt;div ng-app="ui.bootstrap.demo"&gt;
  
  &lt;div ng-controller="DatepickerDemoCtrl" ng-init="initModel('&lt;?php echo $dateeventstart-&gt;format("Y-m-d H:i") ?&gt;', '&lt;?php echo $dateeventstart-&gt;format("Y-m-d H:i") ?&gt;'"&gt;)
  
  &lt;?php
  // How to set date picker to value of $event-&gt;event_start
  // $event-&gt;event_start
  ?&gt;
  
  &lt;p class="input-group"&gt;
    &lt;input type="text" id="dt_start" class="form-control" readonly datepicker-popup="@{{format}}" ng-model="dt1" is-open="opened1" max-date="'2020-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" /&gt;
    &lt;span class="input-group-btn"&gt;
      &lt;button type="button" class="btn btn-default" ng-click="open($event,'opened1')"&gt;&lt;i class="glyphicon glyphicon-calendar"&gt;&lt;/i&gt;&lt;/button&gt;
    &lt;/span&gt;
  &lt;/p&gt;
  
  &lt;timepicker
    ng-model="tm1"
    hour-step="1"
    minute-step="15"
    show-meridian="true"&gt;
  &lt;/timepicker&gt;
  </code></pre>
  
  <p>HTML source (controller)</p>
  
  <pre><code>&lt;div ng-controller="DatepickerDemoCtrl" ng-init="initModel('2015-09-02 12:15', '2015-09-02 12:15')"&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>angular
    .module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap'])
    .controller('DatepickerDemoCtrl', function ($scope) {
  
    $scope.today = function() {
  
      var dt1 = new Date();
      dt1.setHours( dt1.getHours() + 1 );
      dt1.setMinutes( 0 );
      $scope.dt1 = dt1;
    };
    $scope.today();
  
    $scope.clear = function () {
      $scope.dt1 = null;
    };
  
    $scope.initModel = function(datePickerValue, timePickerValue){
       $scope.dt1 = datePickerValue;
       $scope.tm1 = timePickerValue; 
    }
  </code></pre>