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