Question

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

背面故事：我有一个表单，我可以选择日期和时间并将其保存到数据库中。我现在有一个新的表单，意在阅读该值，预先填充“更新”。 form，然后在修改它时将新值写回DB。

最初使用新的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 Directive：

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

这解决了这个问题。耶！

在角度日期/时间选择器上设置特定日期/时间

1 个答案: