我在我的 Angular 应用程序中使用 Jquery UI datepicker,也用于渲染包括 datepicker 在内的所有表单控件,我正在使用插件Angular Schema-Form。为了在其中添加 Jquery UI datepicker,我创建了自己的自定义装饰器
现在,当我禁用日期选择器(取决于模型值)时,点击日历图标不会打开日历弹出窗口。这在 Chrome 和 FF 中运行良好,但在 IE 中,即使禁用日期选择器,单击图标也会打开弹出窗口。
自定义装饰器指令:
<input ng-show="form.key"
type="datepicker" exc-datepicker
step="any"
sf-changed="form"
placeholder="{{form.placeholder}}"
class="exc-datepicker form-control {{form.fieldHtmlClass}}"
id="{{form.key.slice(-1)[0]}}"
ng-model-options="form.ngModelOptions"
ng-model="$$value$$"
ng-disabled="form.readonly || evalExpr(form.ngDisabled)"
schema-validate="form"
name="{{form.key.slice(-1)[0]}}"
aria-describedby="{{form.key.slice(-1)[0] + 'Status'}}"
ui-mask="{{form.mask}}" ui-mask-model-view-value="{{form.maskIncluded || false}}"
date-options="form.dateOptions"
exc-compare="form.compare"
readonly>
装饰器:
decoratorsProvider.defineDecorator('myDecoratorSimple', {
'datepicker': {
template: base + 'datepicker.html',
replace: false
},
}, []);
架构:
schema = {
type: "object",
properties: {
ServiceInformation: {
type: "object",
required: ["StartServiceDate"],
properties: {
StartServiceDate: { title: "Start Service Date", type: "string", format: "string" },
}
}
}
};
形式:
form = [{
tyep: "datepicker",
key: "ServiceInformation.StartServiceDate",
feedback: false,
maskIncluded: true,
mask: "19/39/2999",
placeholder: " / / ",
fieldHtmlClass: "exc-datepicker",
dateOptions: {
beforeShowDay: "startServiceDatePickerFilter",
dateFormat: "mm/dd/yy",
},
ngModelOptions: {
allowInvalid: "true"
},
}];