如何设置uibootstrapdatepicker的日期值

Question

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

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

如有任何帮助，我们将不胜感激

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将服务器端的值设置为angular，这样

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

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

编辑

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

AngularJS ngInit with Date

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

仔细查看后，您需要更改两件事：

我知道你的 datePicker 和 timepicker 使用相同的 ng-model（都设置为 dt1），你应该将 2 设置为不同的 ng-model。
既然你现在设置了两个ng-model（一个用于datepicker，一个用于timepicker），最好在ng-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 link 之后，它似乎运行良好。下图显示我更改了初始化时间，它反映了视图：

如何设置uibootstrapdatepicker的日期值

How to set the date value of ui bootstrap datepicker

datepicker

angularjs

angular-ui-bootstrap

编辑 3

编辑 4