Angular5定制日历求助：实现页面嵌入式指定日期激活日历

Hey there! Let's get this embedded calendar sorted for your Angular 5 project. I'll use ngx-bootstrap's inline datepicker since it’s lightweight, compatible with Angular 5, and perfect for non-modal (embedded) display. Here's a step-by-step solution:

1. Install Compatible Dependencies #

Angular 5 works best with older versions of ngx-bootstrap and Bootstrap. Run this command in your project root:

npm install ngx-bootstrap@3.3.0 bootstrap@4.1.3 --save

Then add Bootstrap's CSS to your angular.json (or .angular-cli.json for older Angular CLI versions) under the styles array:

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "src/styles.css"
]

2. Import Required Modules #

Open your app.module.ts (or the module where you'll use the calendar) and import these modules:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { BsDatepickerModule, DatepickerModule } from 'ngx-bootstrap/datepicker';

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

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    FormsModule,
    BsDatepickerModule.forRoot(),
    DatepickerModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. Component Logic: Define Active Date & Disable Function #

In your component (e.g., app.component.ts), set your target active date and create a function to disable all other dates:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  // Your specified active date (adjust this to your needs)
  activeDate: Date = new Date('2024-05-20');
  // Bind this to the calendar to track selection
  selectedDate: Date = this.activeDate;

  constructor() {
    // Normalize the date to ignore time (avoids comparison issues)
    this.activeDate.setHours(0, 0, 0, 0);
    this.selectedDate.setHours(0, 0, 0, 0);
  }

  // Function to check if a date should be disabled
  isDateDisabled(date: Date): boolean {
    // Normalize the input date too
    date.setHours(0, 0, 0, 0);
    // Return true if the date doesn't match our active date
    return date.getTime() !== this.activeDate.getTime();
  }
}

4. Template: Add Inline Calendar #

In your component's HTML template (e.g., app.component.html), add the inline datepicker and bind the disable function:

<div class="container mt-4">
  <h3>Embedded Calendar</h3>
  <bs-datepicker-inline 
    [dateDisabled]="isDateDisabled"
    [(ngModel)]="selectedDate"
    [showWeekNumbers]="false" <!-- Optional: Hide week numbers if needed -->
  ></bs-datepicker-inline>
</div>

5. Optional: Customize Active Date Styling #

If you want to make the active date stand out more, add this to your component's CSS:

.bs-datepicker-body table td.active {
  background-color: #28a745; /* Green background */
  border-color: #218838;
}

.bs-datepicker-body table td.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

How It Works #

• The <bs-datepicker-inline> renders the calendar directly in the page (no popups).
• The dateDisabled input uses our isDateDisabled function to block all dates except your specified active date.
• The ngModel binding ensures the active date is selected by default.

内容的提问来源于stack exchange，提问作者JavaSSE