求推荐具备多特性的稳定Angular 4 Date/DateRange Picker插件

Hey there! I’ve been in your exact situation hunting for a reliable date/daterange picker for Angular 4 that ticks all your required boxes, and ngx-bootstrap is hands down the best fit I’ve found. It’s stable, well-maintained, and checks every feature you listed:

• Reactive & Template Forms Support: It fully integrates with both Angular’s template-driven (using [(ngModel)]) and reactive forms (via formControlName). Here’s a quick snippet for reactive forms:

  <input type="text" formControlName="dateRange" bsDaterangepicker>
  

  And for template-driven:

  <input type="text" [(ngModel)]="selectedRange" bsDaterangepicker>
  

• Easy Internationalization: You can easily switch locales using the BsLocaleService. Just import the locale you need (like zh-CN, en-US) and set it in your component:

  import { BsLocaleService } from 'ngx-bootstrap/datepicker';
  import { defineLocale } from 'ngx-bootstrap/chronos';
  import { zhCnLocale } from 'ngx-bootstrap/locale';
  
  defineLocale('zh-cn', zhCnLocale);
  
  constructor(private localeService: BsLocaleService) {
    this.localeService.use('zh-cn');
  }
  

  You can even customize locale strings if you need to tweak specific terms.

• Bootstrap CSS Compatibility: Since ngx-bootstrap is built specifically for Bootstrap, it seamlessly adopts your existing Bootstrap styles—no extra CSS hacks required. It’ll match your app’s Bootstrap theme out of the box.

• Clear Value Button: Enable a built-in clear button with just one configuration option:

  <input type="text" bsDaterangepicker [clearBtn]="true">
  

  This adds a small, intuitive button to reset the selected date/date range to empty.

• Custom DateRange Quick Selection: This is where it really shines—you can define custom shortcut ranges using the ranges input. For example:

  customRanges = {
    'Today': [new Date(), new Date()],
    'This Week': [new Date(new Date().setDate(new Date().getDate() - new Date().getDay())), new Date()],
    'Last 30 Days': [new Date(new Date().setDate(new Date().getDate() - 29)), new Date()]
  };
  

  Then pass it to the picker:

  <input type="text" bsDaterangepicker [ranges]="customRanges">
  

  These shortcuts will show up in the picker sidebar for one-click selection.

Quick Setup Note for Angular 4 #

Make sure to install the correct version of ngx-bootstrap that supports Angular 4—ngx-bootstrap@3.x is compatible (newer versions target newer Angular releases). Install it with:

npm install ngx-bootstrap@3.x --save

Then import the required modules in your Angular module:

import { BsDatepickerModule, BsDaterangepickerModule } from 'ngx-bootstrap';

@NgModule({
  imports: [
    BsDatepickerModule.forRoot(),
    BsDaterangepickerModule.forRoot()
  ]
})

I’ve used this plugin in several Angular 4 projects and it’s been rock-solid. It covers all your requirements and has a helpful community if you run into any small tweaks you need to make.

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