Angular Input Date Format Dd/mm/yyyy Html

MUAZHAN

3 min read

·

Jun 28, 2024

41

Share

Cara Mengatur Format Tanggal Input di Angular dengan dd/mm/yyyy

Dalam pengembangan aplikasi web menggunakan Angular, seringkali kita memerlukan input tanggal dari pengguna. Angular secara default menggunakan format tanggal yang mungkin tidak sesuai dengan preferensi pengguna di berbagai wilayah. Artikel ini akan membahas cara mengatur format input tanggal di Angular menjadi dd/mm/yyyy.

1. Mengatur Format Input Tanggal di Template HTML

Kita dapat menggunakan directive [ngModelOptions] dalam komponen Angular untuk mengatur format input tanggal:

Kode di atas menggunakan directive [ngModelOptions] dengan nilai standalone: true untuk mengizinkan manipulasi format tanggal.

2. Fungsi formatTanggal untuk Mengatur Format

Kita perlu menambahkan fungsi formatTanggal di komponen Angular untuk mengubah format tanggal dari YYYY-MM-DD (default) menjadi dd/mm/yyyy.

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

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.html',
  styleUrls: ['./my-component.css']
})
export class MyComponent {
  tanggal: string;

  formatTanggal(event: any) {
    // Mengubah format tanggal
    const parts = event.split('-');
    this.tanggal = parts[2] + '/' + parts[1] + '/' + parts[0];
  }
}

Dalam fungsi formatTanggal, kita membagi string tanggal berdasarkan pemisah - dan kemudian menggabungkan bagian-bagian tersebut dalam format dd/mm/yyyy.

3. Menampilkan Tanggal dalam Format dd/mm/yyyy

Untuk menampilkan tanggal yang sudah diubah formatnya di template HTML, kita bisa menggunakan interpolasi string:

Tanggal: {{ tanggal }}

Dengan kode di atas, tanggal akan ditampilkan dalam format dd/mm/yyyy.

Catatan:

• Kode di atas adalah contoh sederhana. Anda mungkin perlu menyesuaikan kode dengan kebutuhan spesifik aplikasi Anda.
• Ada berbagai cara lain untuk mengatur format tanggal di Angular.
• Jika Anda ingin menggunakan library tambahan untuk menangani format tanggal, seperti Moment.js atau Date-fns, Anda perlu menambahkannya ke proyek Angular Anda.

Dengan menerapkan cara di atas, Anda dapat dengan mudah mengatur format input tanggal menjadi dd/mm/yyyy di aplikasi Angular Anda.