Saya mencoba menerapkan datepicker yang tombolnya saat diklik menampilkan kalender. Untuk tujuan ini, saya telah membungkus datepicker() (fungsi JavaScript) dalam pickDate() (fungsi TypeScript yang ditentukan pengguna) tetapi tombolnya tidak mengklik/menampilkan apa pun. Apa yang bisa salah?

Di bawah ini adalah cuplikan kode saya

Berkas HTML

<div class="container">
  <div class="row">
    <div class='col-sm-6'>
      <div class="form-group">
        <div class='input-group date' id='datetimepicker1'>
          <input type='text' class="form-control" />
          <span class="input-group-addon" (click)="pickDate()">
            <span class="fa fa-calendar"></span>
          </span>
        </div>
      </div>
    </div>
  </div>
</div>

file .ts

import {Component} from '@angular/core';
import * as $ from 'jquery';

@Component({
    selector : 'pm-datepicker', /** This is a directive which implies this Component's template can be
    used as any other Component's template.  */
    templateUrl : './datepicker.component.html' /** Path to our HTML file */
})

export class DatePickerComponent {

    pickDate() {
        console.log(5); /** To check if something is logging */
        $('#datetimepicker1').datepicker();
    }
}

Kesalahan di konsol

ERROR TypeError: __WEBPACK_IMPORTED_MODULE_1_jquery__(...).datepicker is not a function
    at DatePickerComponent.webpackJsonp.../../../../../src/app/datepicker/datepicker.component.ts.DatePickerComponent.pickDate (datepicker.component.ts:18)
    at Object.eval [as handleEvent] (DatePickerComponent.html:21)
    at handleEvent (core.es5.js:11998)
    at callWithDebugContext (core.es5.js:13467)
    at Object.debugHandleEvent [as handleEvent] (core.es5.js:13055)
    at dispatchEvent (core.es5.js:8614)
    at core.es5.js:9228
    at HTMLSpanElement.<anonymous> (platform-browser.es5.js:2648)
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:425)
    at Object.onInvokeTask (core.es5.js:3881)

Edit 2

Saya melakukan langkah-langkah berikut:

npm install jquery-ui --save

Lalu saya menyertakan URL skrip sehubungan dengan jQuery dan jQuery-ui di index.html tetapi kesalahan masih tetap ada. Apakah ada hal khusus yang perlu saya impor di component.ts atau app.module.ts saya?

0
Abhijeet Mohanty 14 November 2017, 20:22
Ya itu adalah fungsi yang valid. @IrkenInvader
 – 
Abhijeet Mohanty
14 November 2017, 20:28
Periksa konsol untuk kesalahan. Juga, jika tidak ada yang ditampilkan, cukup catat sesuatu di dalam pickDate() untuk melihat apakah itu dipanggil
 – 
pablopunk
14 November 2017, 20:29
Setelah melakukan console.log() di pickDate() itu dijalankan dengan benar, tetapi menyatakan kemudian datepicker() bukan fungsi yang valid. @pablopunk
 – 
Abhijeet Mohanty
14 November 2017, 20:35
Mungkin jika Anda log $('#datetimepicker1') tidak menemukan elemen apa pun sehingga tidak ada fungsi untuk dijalankan
 – 
pablopunk
14 November 2017, 20:37
1
but it states then datepicker() is not a valid function Apa maksudmu? Itu melempar kesalahan dalam console? Bisakah Anda menunjukkan kepada kami? Juga, sudahkah Anda memasukkan skrip jquery-ui dalam file html Anda?
 – 
Mosh Feu
14 November 2017, 20:41

2 jawaban

Masalah mungkin

  1. Jika ada perpustakaan lain yang menggunakan variabel $
  2. mungkin kehilangan beberapa file dari jQuery

Jika tidak ada yang berhasil, sertakan juga datepicker.js

<script src="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.5.4/datepicker.js"></script>
0
samnu pel 14 November 2017, 20:40

Sepertinya Anda perlu menyertakan $.datepicker untuk mendapatkan fungsi tersebut. Karena sepertinya Anda menggunakan webpack, ini seharusnya sederhana npm install jquery-ui untuk mendapatkan seluruh paket jquery-ui atau npm install jquery-datepicker untuk hanya mendapatkan modul datepicker.

Anda juga harus menyertakan ini di sumber Anda sebelum menggunakannya (atau menambahkannya sebagai titik masuk ke webpack).

0
Andnp 14 November 2017, 20:49
Saya telah menambahkan hasil saya di Edit 2. Apakah saya melewatkan sesuatu? Saya benar-benar tidak mengerti.
 – 
Abhijeet Mohanty
14 November 2017, 21:04
Mungkin coba import 'jquery-ui' di component.ts
 – 
Andnp
14 November 2017, 21:21
Membuat saya bertanya-tanya apakah apa yang saya coba bahkan diperbolehkan/mungkin.
 – 
Abhijeet Mohanty
14 November 2017, 21:26
Sangat mungkin. Ini tidak ada hubungannya dengan TypeScript vs javascript atau mereka bermain bagus, dan semuanya berkaitan dengan mendaftarkan jquery dan jquery-ui ke aplikasi Anda sebelum Anda mencoba memanggil fungsi datepicker. Jika Anda membuka konsol setelah memuat aplikasi, apakah window.jQuery sudah ditentukan? Apakah window.jQuery.datepicker ditentukan?
 – 
Andnp
14 November 2017, 21:33
Pada dasarnya datepicker sama sekali tidak terdeteksi.
 – 
Abhijeet Mohanty
14 November 2017, 21:44