Date Format Pipes - Complete Documentation

Table of Contents

• Overview
• Installation
• Pipes
• Usage Examples

Overview

The ngx-st-date-format library provides Angular pipes for formatting dates and times using the browser's locale.

Pipes included:

• stDateFormatPipe: Formats dates
• stDateTimeFormatPipe: Formats dates with time
• stTimeFormatPipe: Formats time only

Installation

npm install ngx-st-date-format

Import the module:

import { StDateFormatModule } from 'ngx-st-date-format';

@NgModule({
  imports: [StDateFormatModule]
})
export class AppModule { }

Pipes

stDateFormatPipe

Formats a date using toLocaleDateString().

Input: string | Date | undefined | null
Output: Formatted date string or empty string

Example:

<p>{{ user.birthDate | stDateFormatPipe }}</p>
<!-- Output: 1/15/2024 (or locale-specific format) -->

<p>{{ '2024-01-15' | stDateFormatPipe }}</p>
<!-- Output: 1/15/2024 -->

stDateTimeFormatPipe

Formats a date with time using toLocaleString().

Input: string | Date | undefined | null
Output: Formatted date and time string or empty string

Example:

<p>{{ order.createdAt | stDateTimeFormatPipe }}</p>
<!-- Output: 1/15/2024, 2:30:45 PM (or locale-specific format) -->

<p>{{ '2024-01-15T14:30:45' | stDateTimeFormatPipe }}</p>
<!-- Output: 1/15/2024, 2:30:45 PM -->

stTimeFormatPipe

Formats time only using toLocaleTimeString().

Input: string | Date | undefined | null
Output: Formatted time string or empty string

Example:

<p>{{ meeting.startTime | stTimeFormatPipe }}</p>
<!-- Output: 2:30:45 PM (or locale-specific format) -->

<p>{{ '2024-01-15T14:30:45' | stTimeFormatPipe }}</p>
<!-- Output: 2:30:45 PM -->

Usage Examples

Example 1: User Profile

@Component({
  template: `
    <div class="profile">
      <p>Birth Date: {{ user.birthDate | stDateFormatPipe }}</p>
      <p>Registered: {{ user.registeredAt | stDateTimeFormatPipe }}</p>
      <p>Last Login: {{ user.lastLogin | stDateTimeFormatPipe }}</p>
    </div>
  `
})
export class ProfileComponent {
  user = {
    birthDate: new Date('1990-05-15'),
    registeredAt: new Date('2020-01-10T10:30:00'),
    lastLogin: new Date()
  };
}

Example 2: Order List

@Component({
  template: `
    <table>
      <tr *ngFor="let order of orders">
        <td>{{ order.id }}</td>
        <td>{{ order.orderDate | stDateFormatPipe }}</td>
        <td>{{ order.deliveryTime | stTimeFormatPipe }}</td>
        <td>{{ order.createdAt | stDateTimeFormatPipe }}</td>
      </tr>
    </table>
  `
})
export class OrderListComponent {
  orders = [
    {
      id: 1,
      orderDate: '2024-01-15',
      deliveryTime: '2024-01-15T14:30:00',
      createdAt: '2024-01-15T10:20:30'
    }
  ];
}

Example 3: Event Schedule

@Component({
  template: `
    <div *ngFor="let event of events">
      <h3>{{ event.name }}</h3>
      <p>Date: {{ event.date | stDateFormatPipe }}</p>
      <p>Time: {{ event.startTime | stTimeFormatPipe }} - {{ event.endTime | stTimeFormatPipe }}</p>
    </div>
  `
})
export class EventScheduleComponent {
  events = [
    {
      name: 'Team Meeting',
      date: '2024-01-20',
      startTime: '2024-01-20T09:00:00',
      endTime: '2024-01-20T10:30:00'
    }
  ];
}

Behavior

• All pipes return empty string for null or undefined values
• Dates are formatted using browser's locale settings
• Accepts both Date objects and date strings
• Uses native JavaScript date formatting methods

This library provides simple, locale-aware date formatting without additional configuration.