如何设置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 - 仍然没有按预期工作 - 日期选择器工作，但时间选择器仍然为空

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将服务器端的值设置成角度，比如

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

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

编辑

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

AngularJS ngInit with Date

编辑 2 关于时间选择器问题

仔细观察后，你需要改变两件事：

1. 我知道您的 datePicker 和 timepicker 使用相同的 ng-model（都设置为 dt1），您应该将 2 设置为不同的 ng-model。

1234563

在你的 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 链接后，它似乎运行良好。下图显示我更改了初始化时间并反映了视图：