### Install date-fns v1 and ngx-date-fns v4

Source: https://github.com/joanllenas/ngx-date-fns/blob/master/README.md

Install specific versions for compatibility with date-fns v1.

```bash
npm install --save date-fns@1.29.0
npm install --save ngx-date-fns@4.0.3
```

--------------------------------

### Install date-fns v3 and ngx-date-fns v11

Source: https://github.com/joanllenas/ngx-date-fns/blob/master/README.md

Install specific versions for compatibility with date-fns v3.

```bash
npm install --save date-fns@3.6.0
npm install --save ngx-date-fns@11.0.1
```

--------------------------------

### Install date-fns and ngx-date-fns

Source: https://github.com/joanllenas/ngx-date-fns/blob/master/README.md

Install the latest versions of date-fns and ngx-date-fns for Angular v17+.

```bash
npm install --save date-fns
npm install --save ngx-date-fns
```

--------------------------------

### Install date-fns v2 and ngx-date-fns v10

Source: https://github.com/joanllenas/ngx-date-fns/blob/master/README.md

Install specific versions for compatibility with date-fns v2. Consider v2.16.1 or >= v2.21.1 for tree shaking.

```bash
npm install --save date-fns@2.30.0
npm install --save ngx-date-fns@10.0.1
```

--------------------------------

### Change Locale Dynamically at Runtime

Source: https://github.com/joanllenas/ngx-date-fns/blob/master/README.md

Allows changing the default locale at runtime by injecting DateFnsConfigurationService and calling its setLocale method. This example demonstrates changing between German and Spanish locales.

```typescript
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';
import { es, de } from 'date-fns/locale';
import { DateFnsConfigurationService, DateFnsModule } from 'ngx-date-fns';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, DateFnsModule],
  template: `
    <p>{{ dateOne | dfnsFormat: 'EEE LLLL d yyyy' }}</p>
    <hr />
    Set default locale to: <a href="#" (click)="changeToGerman()">German</a>,
    <a href="#" (click)="changeToSpanish()">Spanish</a>.
  `
})
export class App {
  dateOne = new Date(2016, 0, 1);
  constructor(public config: DateFnsConfigurationService) {}
  changeToGerman() {
    this.config.setLocale(de);
  }
  changeToSpanish() {
    this.config.setLocale(es);
  }
}

bootstrapApplication(App);

```

--------------------------------

### Get Weekday Name

Source: https://github.com/joanllenas/ngx-date-fns/blob/master/README.md

Retrieves the name of a weekday based on its number. Supports different format options and locales. This is an impure pipe.

```html
<div>
  <!-- Prints Monday -->
  {{ 0 | dfnsWeekdayName }}
</div>
<div>
  <!-- Prints Mon -->
  {{ 0 | dfnsWeekdayName : 'x3' }}
</div>
```

--------------------------------

### Basic Usage of ngx-date-fns Pipes

Source: https://github.com/joanllenas/ngx-date-fns/blob/master/README.md

Demonstrates formatting, finding min/max dates, calculating distance to now, and parsing dates using various ngx-date-fns pipes with explicit locale settings.

```typescript
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';
import { es } from 'date-fns/locale';
import { DateFnsModule } from 'ngx-date-fns';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, DateFnsModule],
  template: `
    <p>{{ dateOne | dfnsFormat: 'MM/dd/yyyy' }}</p>
    <p>{{ [dateOne, dateTwo] | dfnsMin | dfnsFormat: 'EEE LLLL d yyyy' }}</p>
    <p>
      {{ [dateOne, dateTwo] | dfnsMax | dfnsFormat: 'EEE LLLL d yyyy' }}
    </p>
    <p>
      {{ dateThree | dfnsFormatDistanceToNow: options }} - (Explicit 'es'
      locale)
    </p>
    <p>{{ 0 | dfnsWeekdayName: 'full':options }} - (Explicit 'es' locale)</p>
    <p>
      {{
        '12 de Marzo'
          | dfnsParse: parseFormat:parseDate:parseLocale
          | dfnsFormat: 'MM/dd/yyyy'
      }}
    </p>
  `
})
export class App {
  dateOne = new Date(2016, 0, 1);
  dateTwo = new Date(2017, 0, 1);
  dateThree: Date;
  options = {
    locale: es,
    addSuffix: true
  };
  parseDate = new Date(2010, 0, 1);
  parseFormat = `do 'de' MMMM`;
  parseLocale = { locale: es };

  constructor() {
    this.dateThree = new Date();
    this.dateThree.setDate(this.dateThree.getDate() - 6);
  }
}

bootstrapApplication(App);

```

--------------------------------

### Bootstrap Angular Application with Global Locale

Source: https://github.com/joanllenas/ngx-date-fns/blob/master/README.md

Bootstrap your Angular application using the configured appConfig that includes the globally set locale.

```typescript
// main.ts
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';
import { es } from 'date-fns/locale';
import { DateFnsModule } from 'ngx-date-fns';
import { appConfig } from './app.config';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, DateFnsModule],
  template: `
    (...)
  `
})
export class App {
  // (...)
}

bootstrapApplication(App, appConfig).catch(err => console.error(err));

```

--------------------------------

### Format Date Relative to Now

Source: https://github.com/joanllenas/ngx-date-fns/blob/master/README.md

Formats a date relative to the current time. This is an impure pipe.

```typescript
import { dfnsFormatRelativeToNow } from 'date-fns';

// Example usage:
const now = new Date();
const pastDate = new Date(now.getTime() - 60000);
console.log(dfnsFormatRelativeToNow(pastDate)); // e.g., "1 minute ago"
```

--------------------------------

### Set Global Locale in Angular App Configuration

Source: https://github.com/joanllenas/ngx-date-fns/blob/master/README.md

Configure the default locale for all date-fns pipes globally by overriding the DateFnsConfigurationService in your Angular application's configuration file.

```typescript
// app.config.ts
import { ApplicationConfig } from '@angular/core';
import { DateFnsConfigurationService } from 'ngx-date-fns';
import { fr } from 'date-fns/locale';

const frenchConfig = new DateFnsConfigurationService();
frenchConfig.setLocale(fr);

export const appConfig: ApplicationConfig = {
  providers: [{ provide: DateFnsConfigurationService, useValue: frenchConfig }]
};

```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.