Question

我的视图中有一个页面，还有一个编辑该页面的选项。单击“编辑”选项后，将显示子视图并显示所有可编辑字段。一个字段是绑定到模态的日期选择器。

文本框包含日期，但是当我打开日历弹出窗口时，文本框中的日期不会在日历中突出显示。然后我选择一个不同的日期并关闭子视图。

现在，当我打开另一个项目的日历弹出窗口时，会突出显示之前选择的日期。（文本框中的日期不同）我现在已经坚持了一段时间。下面是我的标记

 <div class="col-sm-4 ph-calendar">
                    <div class="input-group">
                        <input type="text"
                               id="duedate"
                               class="form-control"
                               datepicker-popup="{{dateFormat}}"
                               ng-model="milestone.duedate"
                               ph-validator="milestone.duedate"
                               ng-required="true"
                               is-open="datepickerOpenState.dueDateOpened"
                               datepicker-options="dateOptions"
                               ng-disabled="(isrecurring && isseries) || !permissions.canUpdateMilestones"
                               close-text="Close"
                               tooltip="dd/mm/yyyy"
                               tooltip-placement="bottom"
                               ph-datepicker-fix />                            

                        <span class="input-group-btn datepickerbtn">
                            <button type="button" class="btn btn-default" ng-click="openDatepicker($event, 'duedate')" ng-disabled="(isrecurring && isseries)  || !permissions.canUpdateMilestones">
                                <i class="fa fa-calendar"></i>
                            </button>
                        </span>
                    </div>
                </div>

这是我的js

$scope.openDatepicker = function ($event, dateType, date) {
            $event.preventDefault();
            $event.stopPropagation();

            switch (dateType) {
                case 'duedate':
                    $scope.datepickerOpenState.dueDateOpened = true;
                    $scope.datepickerOpenState.completionDateOpened = false;
                    $scope.datepickerOpenState.startDateOpened = false;
                    $scope.datepickerOpenState.endDateOpened = false;                        
                    break;

我还为datepicker

做了一些格式化

  ngModelCtrl.$render = function () {

            if (ngModelCtrl.$viewValue) {
            ngModelCtrl.$viewValue = new Date(ngModelCtrl.$viewValue);
            var dateVal = ngModelCtrl.$viewValue ? $filter('date')(ngModelCtrl.$viewValue, 'dd/MM/yyyy') : '';

            $element.val(dateVal);                                                         
            } else {
                $element.val(null);
            }
        };

Answer 1

显然是ng-model'ng-model $ - 日期对象。需要成为Javascript Date对象。当你点击编辑它来自你的服务器作为一个json，它是一个字符串而不是一个javascript日期对象，这就是为什么会发生这种情况。从该字符串创建一个日期对象，你应该没事，它对我有用！

编辑：在“uib-datepicker设置”下的文档https://angular-ui.github.io/bootstrap/#/datepicker上找到它。感谢@JohanAlkstål在https://jabbr.net/#/rooms/AngularJS帮助我解决这个问题。

Answer 2

对我来说，问题是我用于datepicker的输入元素是＆＃34; text＆＃34;而不是＆＃34; date＆＃34;。

因此，将代码更改为此应该可以解决问题。

<input type="date" />

Answer 3

只是寻求帮助......

我有同样的问题，感谢@Daniel回答，我只是将我的控制器值更改为强制日期类型与moment.js

之前：

vm.popEstime = {
            opened: false,
            value: vm.currentData.DateEstime
        };

之后：

vm.popEstime = {
            opened: false,
            value: moment(vm.currentData.DateEstime).toDate()
        };

我的HTML不会改变：

<input ng-model="vm.popEstime.value" uib-datepicker-popup="dd/MM/yyyy" is-open="vm.popEstime.opened" type="text" required />

UI Bootstrap datepicker日历不会在文本框中显示日期

3 个答案: