How to set the date value of ui bootstrap datepicker

Question

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.

Do I need a different angular module for that?

Any help would be greatly appreciated

HTML

<div ng-app="ui.bootstrap.demo">
<div ng-controller="DatepickerDemoCtrl">

<?php
// How to set date picker to value of $event->event_start
// $event->event_start
?>

<p class="input-group">
  <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" />
  <span class="input-group-btn">
    <button type="button" class="btn btn-default" ng-click="open($event,'opened1')"><i class="glyphicon glyphicon-calendar"></i></button>
  </span>
</p>

<timepicker
  ng-model="dt1"
  hour-step="1"
  minute-step="15"
  show-meridian="true">
</timepicker>

JS

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

Updated HTML and JS with Alan Tsai's suggestion - still not working as expected - datepicker working, but timepicker still empty

See plunker

HTML

<?php  
    $dateeventstart = new DateTime($event->event_start);
?>  

<div ng-app="ui.bootstrap.demo">

<div ng-controller="DatepickerDemoCtrl" ng-init="initModel('<?php echo $dateeventstart->format("Y-m-d H:i") ?>', '<?php echo $dateeventstart->format("Y-m-d H:i") ?>'">)

<?php
// How to set date picker to value of $event->event_start
// $event->event_start
?>

<p class="input-group">
  <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" />
  <span class="input-group-btn">
    <button type="button" class="btn btn-default" ng-click="open($event,'opened1')"><i class="glyphicon glyphicon-calendar"></i></button>
  </span>
</p>

<timepicker
  ng-model="tm1"
  hour-step="1"
  minute-step="15"
  show-meridian="true">
</timepicker>

HTML source (controller)

<div ng-controller="DatepickerDemoCtrl" ng-init="initModel('2015-09-02 12:15', '2015-09-02 12:15')">

JS

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

Solution

I don't know php, but you can use ng-init to set the value from server side into angular, such

<div ng-controller="DatepickerDemoCtrl" ng-init="dt1 = <?= $event_start?>">

I am not sure if <?= $event_start?> is how php output the variable to html - if not just change to what ever syntax for outputting variable.

Edit

If that still not work, it maybe because the variable you output it not correct datetime string. if so, you can create a function which parse the pass in string . To achieve this, can look at this SO answer

AngularJS ngInit with Date

Edit 2 Regards to timepicker problem

After close look, there is two thing you will have to change:

1. I realize your datePicker and timepicker are using the same ng-model (both set to dt1), you should set the 2 to different ng-model.

2. Since now you are setting two ng-model (one for datepicker and one for timepicker), it is better to call a method in ng-init instead of setting property directly as I have shown previously, this means:

In your Controller, declare a init method:

$scope.initModel = function(datePickerValue, timePickerValue){
   $scope.dt1 = datePickerValue;
   $scope.dt2 = timePickerValue; // assuming your timepicer model is dt2
}

then in your controller, call init as (assume your tiempicker is called timeeventstart):

<div ng-controller="DatepickerDemoCtrl" ng-init="initModel('<?php echo $dateeventstart->format("Y-m-d H:i") ?>', '<?php echo $timeeventstart->format("Y-m-d H:i") ?>'">)

Edit 3

I think it could be because the data is passed in as string not date. Try convert it to date such as:

  $scope.initModel = function(datePickerValue, timePickerValue){
     $scope.dt1 = new Date(datePickerValue);
     $scope.tm1 = new Date(timePickerValue); 
  }

Edit 4

After look at the plunker link you provided, it seems to work perfectly. Below is a image showing I change the init time and it reflects the view:

Comments

[user3489502]

Thanks Alan, it worked for the datepicker. It's now showing the proper date and time. the only problem now, is that the timepicker is left empty. Do I need a second ng-init for the timepicker, or is it a format thing?

[Alan Tsai]

@user3489502 see if updated answer work for you or not

[user3489502]

Hi @alantsai, I've changed my timepicker model to tm1, and used $dateeventstart instead of $timeeventstart for timepicker, but now both the datepicker and timepicker get initialized to current datetime instead of being initialized to the value provided. I guess i'm missing something? See updated question above.

[Alan Tsai]

@user3489502 I think it is because the passed in data is string not date, so I have made a edit 3 version. Try if it works

[user3489502]

Hi @alantsai that didn't work either. I noticed a misplaced a ) on my ng-controller line. I fixed this, but now i'm back to: datepicker working, but timepicker empty

[Alan Tsai]

@user3489502 I try the plunker and it seems working perfectly. See my Edit 4 attached image. Or am I missing something else ?

[user3489502]

I don't get it, when the plunker is first loaded with the following values ng-init="initModel('2015-10-01 08:00', '2015-10-01 08:00')">, the timepicker is empty when the page is loaded. Of course it works after I play with the arrows, but it's empty when initialized (both in FF and IE)

[Alan Tsai]

@user3489502 oh I see what you mean now. I was testing in chrome, and it worked perfectly. I tried my ie and see the same problem as you described. I will have a lot into it

[Alan Tsai]

@user3489502 I got it. The problem was because the date string was not in correct format. It has to be a RFC2822 or ISO 8601 date. so change the time one to : '2015-10-01T10:00' worked. check below plunker (I set to 09 instead of 10 just to show it worked) plnkr.co/edit/OwuBqLsaf6nL9Gef4AAc?p=preview

[user3489502]

That is super excellent! Thanks a lot for all the help @alantsai !