UI Bootstrap日期选择器日历不在文本框中显示日期

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>

这是我的 JavaScript 代码。

$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;

我还为日期选择器做了一些格式化处理。

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

- Pradeep

---

我遇到了同样的问题，我建议使用momentJs。 - Pterrat

Answer 1

显然，ng-model“ng-model $ -日期对象。需要是JavaScript Date对象。”当您单击编辑时，它作为JSON从您的服务器发送并且它是一个字符串而不是JavaScript Date对象，这就是为什么会发生这种情况。从该字符串创建一个Date对象，您就可以正常工作，对我有效！编辑：在“uib-datepicker设置”下，在文档https://angular-ui.github.io/bootstrap/#/datepicker中找到了它。感谢@Johan Alkstål在https://jabbr.net/#/rooms/AngularJS中帮助我解决问题。

- Daniel

Answer 2

只是为了帮助...

我遇到了同样的问题，感谢@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 />

- lolo

Answer 3

对我来说，问题在于我用于日期选择器的输入元素类型为“文本”，而不是“日期”。

因此，将您的代码更改为以下内容应该就可以解决问题了。

<input type="date" />

- knaos