Кит Вуд jquery не отображается на iphone с помощью ionic3 - PullRequest
Новая
       13

Кит Вуд jquery не отображается на iphone с помощью ionic3

0 голосов
/ 26 октября 2018

Я использую календарь jquery Кейта Вуда для даты хиджры. У меня есть компонент hijriCalendar, использующий Кейт Вуд, это 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>

все отлично работает на андроиде, просто на 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 кто-то может мне помочь.

...