angular - ویژگی 'datetimepicker' در نوع 'JQuery' وجود ندارد


چگونه از کتابخانه eonasdan-bootstrap-datetimepicker در Angular 6 استفاده کنیم؟ من میخواهم گزینههای پیشفرض را تنظیم کنم.

این هم لینک کتابخانه: https://github.com/Eonasdan/bootstrap-datetimepicker

این هم کد:

import * as $ from 'jquery';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
   ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {

  constructor() {

    $.fn.datetimepicker.defaults.keepInvalid = true;
    $.fn.datetimepicker.defaults.useStrict = true;

    $.fn.datetimepicker.defaults.useCurrent = false;
    $.fn.datetimepicker.defaults.format = "MM/DD/YYYY";
    $.fn.datetimepicker.defaults.keyBinds["delete"] = null;

    $.fn.datetimepicker.defaults.icons = {
      time: 'fa fa-clock-o',
      date: 'fa fa-calendar',
      up: 'fa fa-angle-up',
      down: 'fa fa-angle-down',
      previous: 'fa fa-chevron-left',
      next: 'fa fa-chevron-right',
      today: 'glyphicon glyphicon-screenshot',
      clear: 'fa fa-trash-o',
      close: 'fa fa-window-close'
    }
  }

}

من خطای زیر را دریافت میکنم

Property 'datetimepicker' does not exist on type 'JQuery<HTMLElement>'

پاسخ شماره ۱

من به بازی دیر رسیدم، اما پاسخ این است که بسته @types/jquery.ui.datetimepicker را به پروژه خود اضافه کنید. از آنجایی که من از yarn استفاده میکنم، انجام دادم

پاسخ شماره ۲

اخیراً مشکل مشابهی در استفاده از eonasdan-bootstrap-datetimepicker در پروژه تایپاسکریپت Angular 6 داشتم، امیدوارم پاسخم برای شما خیلی دیر نباشد.

خوب، ابتدا فرض میکنم که شما اسکریپت js و css آن را نصب کردهاید یا دارید. اینها مراحل برای غلبه بر آن هستند.

  1. اولاً,

ویژگی 'datetimepicker' در نوع 'JQuery<HTMLElement>' وجود ندارد

این به این دلیل است که @types/jquery شامل این تابع datetimepicker() نمیشود، کاری که میتوانید انجام دهید این است که تابع datetimepicker را در رابط JQuery در فایل typings.d.ts اضافه کنید

interface JQuery {
datetimepicker(...any): any; }

  1. بعد، شما نیاز دارید که فایلهای js و css را در پروژه وارد کنید. در مورد من، این دو فایل را با افزودن مسیر فایلشان به angular.json وارد میکنم. به عنوان مثال:

    styles: [
        "your other css path location",
        "YOUR EONASDAN-BOOTSTRAP-DATETIMEPICKER FOLDER LOCATION/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css"
    ]
    
    scripts: [
        "your other js path location", 
        "YOUR EONASDAN-BOOTSTRAP-DATETIMEPICKER FOLDER LOCATION/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js"
    ]
    
  2. در نهایت، پروژه خود را دوباره بارگذاری کنید تا اثر کند.