如何设置ui bootstrap datepicker的日期值

Posted 2023-05-07

【中文标题】如何设置ui bootstrap datepicker的日期值

【英文标题】：How to set the date value of ui bootstrap datepicker

【发布时间】：2015-11-23 11:25:24

【问题描述】：

我的创建事件页面将我的日期选择器初始化为当前日期。这很好用。但是当我想在我的编辑页面上编辑事件时，我不确定如何将日期选择器值设置为我的 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; 
  

【参考方案1】：

我不懂php，但是你可以使用ng-init将服务器端的值设置成角度，比如

<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。

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

【讨论】：

感谢 Alan，它适用于日期选择器。它现在显示正确的日期和时间。现在唯一的问题是时间选择器是空的。时间选择器是否需要第二个 ng-init，还是格式问题？

@user3489502 看看更新的答案是否适合您

嗨@alantsai，我已将时间选择器模型更改为 tm1，并使用 $dateeventstart 而不是 $timeeventstart 作为时间选择器，但现在日期选择器和时间选择器都被初始化为当前日期时间，而不是被初始化为提供的价值。我想我错过了什么？请参阅上面的更新问题。

@user3489502 我认为是因为传入的数据是字符串而不是日期，所以我做了一个编辑3版本。试试看是否有效

嗨@alantsai，这也不起作用。我注意到我的 ng-controller 线上的 a ) 放错了位置。我解决了这个问题，但现在我又回到了：datepicker 工作，但 timepicker 为空