Javascript UI引导日期选择器日历未在文本框中显示日期

Javascript UI引导日期选择器日历未在文本框中显示日期,javascript,angularjs,datepicker,calendar,Javascript,Angularjs,Datepicker,Calendar,我的视图中有一个页面,可以编辑该页面。单击“编辑”选项时,会出现一个子视图并显示所有可编辑字段。一个字段是绑定到模式的日期选择器 文本框包含日期,但当我打开日历弹出窗口时,文本框中的日期不会在日历中突出显示。 然后选择其他日期并关闭子视图 现在,当我打开另一个项目的日历弹出窗口时,先前选择的日期将突出显示。文本框中的日期不同 我被这件事困扰了一段时间。下面是我的标记 <div class="col-sm-4 ph-calendar"> <

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

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

现在,当我打开另一个项目的日历弹出窗口时,先前选择的日期将突出显示。文本框中的日期不同 我被这件事困扰了一段时间。下面是我的标记

 <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>
我还为日期选择器做了一些格式化

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

显然,ng模型“ng model$”是日期对象。需要是一个Javascript日期对象。当您单击“编辑”时,它以json的形式来自您的服务器,是一个字符串而不是Javascript日期对象,这就是为什么会发生这种情况。从这个字符串创建一个日期对象,你应该会很好,它对我很有用


编辑:在uib日期选择器设置下的文档中找到它。感谢@Johan Alkstål in帮助我解决这个问题。

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

因此,将您的代码更改为此应该可以做到这一点

<input type="date" />
只是为了帮助

我也遇到了同样的问题,多亏了@Daniel answer,我才用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 />

我也有同样的问题,我建议使用momentJs。
<input ng-model="vm.popEstime.value" uib-datepicker-popup="dd/MM/yyyy" is-open="vm.popEstime.opened" type="text" required />