ngx-bootstrap datepicker不起作用 [英] ngx-bootstrap datepicker doesnt work

问题描述

我正在学习angular2和bootstrap4.我公司使用以下站点. http://valor-software.com/ngx-bootstrap/#/datepicker日历出现了，但是如果我单击任何东西，则什么也没有发生.我不知道为什么无法移动该网站.有人可以帮我吗?

I am learning about angular2 and bootstrap4. My company uses the following site. http://valor-software.com/ngx-bootstrap/#/datepicker The calendar showed up but if I click something, nothing happens. I have no idea why the site can't be moved. Could you anyone help me?

* app.component.html:

*app.component.html:

<style>
  .full button span {
    background-color: limegreen;
    border-radius: 32px;
    color: black;
  }
  .partially button span {
    background-color: orange;
    border-radius: 32px;
    color: black;
  }
</style>

<div>
  <div class="card">
    <pre class="card-block card-header">Selected date is: <em *ngIf="dt">{{ getDate() | date:'fullDate'}}</em></pre>
  </div>
  <h4>Inline</h4>
  <div style="display:inline-block; min-height:290px;">
    <datepicker [(ngModel)]="dt" [minDate]="minDate" [showWeeks]="true" [dateDisabled]="dateDisabled"></datepicker>
  </div>

  <hr />
  <button type="button" class="btn btn-sm btn-info" (click)="today()">Today</button>
  <button type="button" class="btn btn-sm btn-default btn-secondary" (click)="d20090824();">2009-08-24</button>
  <button type="button" class="btn btn-sm btn-danger" (click)="clear()">Clear</button>
  <button type="button" class="btn btn-sm btn-default btn-secondary" (click)="toggleMin()" tooltip="After today restriction">Min date</button>
  <button type="button" class="btn btn-sm btn-default btn-secondary" (click)="disableTomorrow()">Disable Tomorrow</button>
</div>

* app.module.ts:

*app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { DatepickerModule } from 'ngx-bootstrap/datepicker';

import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { ModalModule } from 'ngx-bootstrap/modal';
import { PaginationModule } from 'ngx-bootstrap/pagination';
import { TypeaheadModule } from 'ngx-bootstrap/typeahead';
import { ButtonsModule } from 'ngx-bootstrap/buttons';
import { FormsModule } from '@angular/forms';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    DatepickerModule.forRoot(), ButtonsModule.forRoot(), TypeaheadModule.forRoot(), PaginationModule.forRoot(), ModalModule.forRoot(), BsDropdownModule.forRoot(), BrowserModule, FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

* app.component.ts:

*app.component.ts:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'app';
}
export class DemoDropdownBasicLinkComponent {
  public items: string[] = ['The first choice!',
    'And another choice for you.', 'but wait! A third!'];

  public onHidden(): void {
    console.log('Dropdown is hidden');
  }
  public onShown(): void {
    console.log('Dropdown is shown');
  }
  public isOpenChange(): void {
    console.log('Dropdown state is changed');
  }
}
export class DemoButtonsRadioComponent {
  public radioModel: string = 'Middle';
}
export class DemoButtonsBasicComponent {
  public singleModel: string = '1';
}
export class DemoButtonsDisabledComponent {
  public disabled: boolean = true;

}
export class DatepickerDemoComponent {
  public dt: Date = new Date();
  public minDate: Date = void 0;
  public events: any[];
  public tomorrow: Date;
  public afterTomorrow: Date;
  public dateDisabled: {date: Date, mode: string}[];
  public formats: string[] = ['DD-MM-YYYY', 'YYYY/MM/DD', 'DD.MM.YYYY',
    'shortDate'];
  public format: string = this.formats[0];
  public dateOptions: any = {
    formatYear: 'YY',
    startingDay: 1
  };
  private opened: boolean = false;

  public constructor() {
    (this.tomorrow = new Date()).setDate(this.tomorrow.getDate() + 1);
    (this.afterTomorrow = new Date()).setDate(this.tomorrow.getDate() + 2);
    (this.minDate = new Date()).setDate(this.minDate.getDate() - 1000);
    (this.dateDisabled = []);
    this.events = [
      {date: this.tomorrow, status: 'full'},
      {date: this.afterTomorrow, status: 'partially'}
    ];
  }

  public getDate(): number {
    return this.dt && this.dt.getTime() || new Date().getTime();
  }

  public today(): void {
    this.dt = new Date();
  }

  public d20090824(): void {
    this.dt = moment('2009-08-24', 'YYYY-MM-DD')
      .toDate();
  }

  public disableTomorrow(): void {
    this.dateDisabled = [{date: this.tomorrow, mode: 'day'}];
  }

  // todo: implement custom class cases
  public getDayClass(date: any, mode: string): string {
    if (mode === 'day') {
      let dayToCheck = new Date(date).setHours(0, 0, 0, 0);

      for (let event of this.events) {
        let currentDay = new Date(event.date).setHours(0, 0, 0, 0);

        if (dayToCheck === currentDay) {
          return event.status;
        }
      }
    }

    return '';
  }

  public disabled(date: Date, mode: string): boolean {
    return ( mode === 'day' && ( date.getDay() === 0 || date.getDay() === 6 ) );
  }

  public open(): void {
    this.opened = !this.opened;
  }

  public clear(): void {
    this.dt = void 0;
    this.dateDisabled = undefined;
  }

  public toggleMin(): void {
    this.dt = new Date(this.minDate.valueOf());
  }
}

推荐答案

角度的基本规则:模板中使用的所有方法和值都应在其所引用的组件中.

The basic rule of angular: All the methods and values used in a template should be in the component which it is referring to.

对于您而言，AppComponent中的app.component.html被引用.您指的是在DatepickerDemoComponent中定义的方法.

In your case, app.component.html is being referred in AppComponent. And you are referring to the Methods which you have defined in DatepickerDemoComponent.

无论您在app.component.ts中导出多少个类，但是模板只能访问其顶部带有@Component批注的类中的模型和方法.

No matter how many classes you export inside app.component.ts, but the template can only access models and methods from the class which has the @Component annotation on top of it.

例如:模板尝试在AppComponent类中查找getDate()方法，因为它没有任何此类方法，它将引发错误.您可以在浏览器控制台中看到它.

Eg: The template tries to find getDate() method inside AppComponent class since it does not has any such method it will throw an error. You can see it in the browser console.

尝试将按钮和DatePicker组件中定义的所有方法和模型移至AppComponent.它应该工作.

Try moving all the methods and models defined in Buttons and DatePicker Components to AppComponent. It should work.

这篇关于ngx-bootstrap datepicker不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！