我使用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 有人可以帮助我。