Keith Wood Jquery没有使用Ionic3在iPhone上显示

时间:2018-10-26 13:17:51

标签: javascript jquery angular calendar ionic3

我使用Keith Wood日历jquery作为hijri日期。我使用hihriCalendar组件使用Keith Wood,这是component.ts:

declare let jQuery: any;
@Component({
  selector: 'hijri-calendar',
  templateUrl: 'hijri-calendar.html'
})
export class HijriCalendarComponent implements AfterViewInit, OnDestroy {
  @ViewChild('input', {read: TextInput}) ionInput: TextInput;

  @Output() dateChange = new EventEmitter();
  @Output() onError = new EventEmitter();

  @Input() label;
  @Input() ionColor;
  @Input() ionIconName?;
  @Input() disabled: boolean;
  private _calOptions: any;
  private _nativeInputElement: any;
  private _calendarInstance: any = jQuery.calendars.instance('ummalqura', 'ar');

  constructor(private zone: NgZone) {
  }

  private _options: any = {};

  @Input() set options(options) {
    this._options = options;
    if (this._nativeInputElement && this._nativeInputElement.calendarsPicker) {
      this._nativeInputElement.calendarsPicker('option', options);
    }
  }

  ngAfterViewInit() {
    this._nativeInputElement = jQuery(this.ionInput._native.nativeElement);
    this.zone.runOutsideAngular(() => {
      this._calOptions = {
        calendar: this._calendarInstance,
        maxDate: '+0d',
        defaultDate: '-1d',
        selectDefaultDate: false,
        clearText: 'مسح',
        yearRange: 'c-60:c+0',
        dateFormat: 'dd-mm-yyyy',
        isRtl: true,
        ...this.options
      };
      this._nativeInputElement
        .calendarsPicker({
          ...this._calOptions,
          onSelect: date => {
            this.dateChange.emit(date);
            if (this._nativeInputElement) {
              this._nativeInputElement.calendarsPicker('setDate', date[0]);
            }
            this.ionInput.setValue(this._calendarInstance.formatDate(this._calOptions.dateFormat, date[0]));
          }
        });
    });
  }

  ngOnDestroy() {
    this._nativeInputElement.calendarsPicker('destroy');
  }


}  

使用html:

<ion-item>
   <ion-label stacked color="{{ionColor}}" class="required-star">
      {{label}}
      <img class="calendar" src="./assets/imgs/icons/Calendar_Grey@3x.png">
   </ion-label>
   <ion-input #input [disabled]="disabled">
      </ion-input>
 </ion-item>

一切都可以在android上正常运行,只是在ios上不显示任何内容而没有错误。我导入了一些必需的文件,例如 jquery.calendars.min.js jquery.calendars.plus.min.js jquery.calendars.picker.min .js jquery.calendars.ummalqura.min.js jquery.calendars.ummalqura-ar.js 有人可以帮助我。

0 个答案:

没有答案