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

【问题标题】：UI Bootstrap datepicker calendar doesn't show the date in the textboxUI Bootstrap datepicker 日历不在文本框中显示日期
【发布时间】：2016-03-11 21:37:27
【问题描述】：

我的视图中有一个页面，并且可以选择编辑该页面。单击“编辑”选项时，会出现一个子视图并显示所有可编辑字段。一个字段是绑定到模式的日期选择器。

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

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

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

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

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

【问题讨论】：

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

标签： javascript angularjs datepicker calendar

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

<input type="date" />

【讨论】：

【解决方案3】：

只是为了帮助......

我遇到了同样的问题，感谢@Daniel 的回答，我只是更改了我的控制器值以使用 moment.js 强制 Date 类型

之前：

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

【讨论】：