1

我在我的 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"
    },
}];

在此处输入图像描述

4

0 回答 0