如何设置ui bootstrap datepicker的日期值

Question

我的创建活动页面将我的日期选择器初始化为当前日期。这很好。但是当我想在我的编辑页面上编辑事件时，我不确定如何将日期选择器值设置为我在php变量中的事件。

我需要一个不同的角度模块吗？

非常感谢任何帮助

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

根据Alan Tsai的建议更新了HTML和JS - 仍未按预期工作 - datepicker工作，但timepicker仍为空

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源代码（控制器）

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

Answer 1

我不知道php，但您可以使用ng-init将服务器端的值设置为angular，例如

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

我不确定<?= $event_start?>是否是php如何将变量输出到html - 如果不是只改变输出变量的语法。

修改

如果仍然不起作用，可能是因为您输出的变量不正确的日期时间字符串。如果是这样，你可以创建一个解析字符串传递的函数。要做到这一点，可以看看这个SO答案

AngularJS ngInit with Date

编辑2关注时间戳问题

仔细观察后，您将不得不改变两件事：

1. 我意识到你的datePicker和timepicker使用相同的ng模型（都设置为dt1），你应该将2设置为不同的ng模型。

2. 从现在开始设置两个ng-model（一个用于datepicker，一个用于timepicker），最好在ng-init中调用一个方法，而不是直接设置属性，如前所示，这意味着：

在Controller中，声明一个init方法：

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

然后在你的控制器中，调用init作为（假设你的tiempicker被称为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") ?>'">)

编辑3

我认为可能是因为数据是以字符串而不是日期传递的。尝试将其转换为日期，例如：

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

编辑4

在查看您提供的plunker链接后，它似乎完美无缺。下面的图片显示我更改了初始化时间，它反映了视图：