Angular4自定义DateTimePicker日历图标点击功能实现咨询

Hey there! Let's get that calendar icon clickable for your custom Angular 4 DateTimePicker—this is a super common UX tweak and totally straightforward to implement. Here's how to do it step by step, based on typical custom DateTimePicker structures:

1. Update Your Component Template #

First, let's assume your template has an input field paired with a calendar icon (like a <span> or <i> element). Add a click event binding to the icon, and make sure you have template references for your input and picker container (we'll need these later):

<div #pickerContainer class="datetime-picker-wrapper">
  <!-- Input field with existing focus logic -->
  <input 
    #dateInput
    type="text"
    [(ngModel)]="selectedDate"
    (focus)="openCalendar()"
    placeholder="Select date/time"
  >
  
  <!-- Calendar icon with click handler -->
  <span class="calendar-icon" (click)="toggleCalendar($event)">
    <i class="fa fa-calendar"></i> <!-- Replace with your actual icon -->
  </span>

  <!-- Your existing calendar dropdown -->
  <div class="calendar-dropdown" *ngIf="isCalendarOpen">
    <!-- Calendar content goes here -->
  </div>
</div>

2. Add Logic to Your Component Class #

In your component .ts file, you'll need to:

• Reference the input and container elements using @ViewChild
• Implement a toggleCalendar method to show/hide the calendar
• Fix the common "calendar closes immediately" issue by handling document clicks

Here's the code:

import { Component, ViewChild, ElementRef, HostListener } from '@angular/core';

@Component({
  selector: 'app-custom-datetime-picker',
  templateUrl: './custom-datetime-picker.component.html',
  styleUrls: ['./custom-datetime-picker.component.css']
})
export class CustomDatetimePickerComponent {
  selectedDate: Date;
  isCalendarOpen = false;

  @ViewChild('dateInput') dateInput: ElementRef;
  @ViewChild('pickerContainer') pickerContainer: ElementRef;

  // Existing method to open calendar (from your original focus logic)
  openCalendar() {
    this.isCalendarOpen = true;
  }

  // New method to toggle calendar on icon click
  toggleCalendar(event: MouseEvent) {
    // Stop event bubbling to prevent document click from closing the calendar immediately
    event.stopPropagation();
    
    if (this.isCalendarOpen) {
      this.isCalendarOpen = false;
    } else {
      this.openCalendar();
      // Focus the input to reuse your existing focus-based logic (if needed)
      this.dateInput.nativeElement.focus();
    }
  }

  // Handle clicks outside the picker to close the calendar
  @HostListener('document:click', ['$event'])
  onDocumentClick(event: MouseEvent) {
    const target = event.target as HTMLElement;
    if (!this.pickerContainer.nativeElement.contains(target)) {
      this.isCalendarOpen = false;
    }
  }
}

3. Adjust Existing Blur Logic (If Needed) #

If your original code uses a (blur) event on the input to close the calendar, you'll want to remove that—our @HostListener for document clicks is a more reliable way to handle closing when clicking outside the picker. This prevents the calendar from closing immediately when you click the icon (since clicking the icon would trigger the input's blur event otherwise).

Key Notes #

• If your custom picker already has dedicated openCalendar() and closeCalendar() methods, just call those instead of directly toggling isCalendarOpen.
• The event.stopPropagation() in the icon's click handler is crucial—it stops the click event from reaching the document level, which would trigger our close logic right after opening.
• Focusing the input when clicking the icon ensures you're reusing any existing validation or state logic tied to the input's focus state.

That's it! Your users can now click either the input field or the calendar icon to open the dropdown.

内容的提问来源于stack exchange，提问作者Muhammad Ikram Ul Haq