在 Angular Date/Time 选择器上设置特定的 Date/Time

Question

我正在尝试为 Angular Bootstrap 日期选择器设置预定义的日期和时间。我还使用了 Gillardo 在这里找到的相当可爱的日期时间扩展：https://github.com/Gillardo/bootstrap-ui-datetime-picker

背景故事：我有一个表格，我可以选择日期和时间并将其保存到数据库中。我现在有一个新表单，用于读取该值，预填充 'update' 表单，然后在修改时将新值写回数据库。

最初使用 new Date() 设置日期；这非常适合第一种形式。但是我不明白如何预填充更新表单日期时间选择器字段以反映之前选择的日期。

我从文档中尝试了 init-date。但到目前为止运气不好:(

这是我现在所处位置的一些代码。

HTML:

<p class="input-group" data-field-name={{field.name}}>
    <input type="text" class="form-control" datetime-picker="dd/MM/yyyy HH:mm" ng-model="ctrl.dates.StartDate" is-open="ctrl.open.StartDate" data-set-date-time />
    <span class="input-group-btn">
        <button type="button" class="btn btn-default" ng-click="ctrl.openCalendar($event, 'StartDate')">
            <i class="fa fa-calendar"></i>
        </button>
    </span>
</p>
<input class="form-control-static form-field" id={{field.name}} value={{ctrl.dates.StartDate}} />

Angular 指令：

app.directive ('setDateTime', function($timeout) {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, element, ngModelCtrl) {
            $timeout(function() {
                console.log(element.val());
                console.log(ngModelCtrl);
            })
        }
    }
});

我希望这是有道理的。如果您还需要什么，请告诉我。非常感谢您能给我的任何帮助。

非常感谢，

段

Answer 1

感谢大家的帮助。在试图通过@macrog 的建议让功能在 Plunker 上进行演示后，我焦头烂额，然后我离开了，并重新考虑了一下。

我终于通过使用 $watch 来监控传入的数据使其工作。然后为范围分配一个动态调用的新值。

scope.$watch('formData', function(formData) {
    if(formData) {  
        scope.ctrl.dates.StartDate = formData.startDateTime;
    }
});

这解决了问题。耶！

在 Angular Date/Time 选择器上设置特定的 Date/Time

Set specific Date/Time on Angular Date/Time Picker

html

javascript

jquery

datetimepicker

angularjs