Konversi Tanggal ke Format Indonesia dari Date Picker dengan JavaScript

Halo semua apa kabar ? Pada artikel ini saya akan menunjukkan bagaimana cara mengkonversi tanggal ke format bahasa Indonesia, termasuk nama hari, menggunakan vanila JavaScript. Kita akan membuat halaman HTML sederhana dengan date picker dan menampilkan tanggal yang dikonversi.

Berikut contoh kode nya

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Indonesian Date Converter</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      background-color: #f0f0f0;
    }
    .container {
      background-color: white;
      padding: 2rem;
      border-radius: 8px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    h1 {
      margin-top: 0;
      color: #333;
    }
    input, button {
      font-size: 1rem;
      padding: 0.5rem;
      margin-bottom: 1rem;
    }
    #result {
      font-size: 1.2rem;
      font-weight: bold;
      color: #0066cc;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>Indonesian Date Converter</h1>
    <input type="date" id="datePicker">
    <button onclick="convertDate()">Convert</button>
    <p id="result"></p>
  </div>
  
  <script>
  	function convertDate() {
      const datePicker = document.getElementById('datePicker');
      const resultElement = document.getElementById('result');
      const selectedDate = new Date(datePicker.value);

      if (isNaN(selectedDate.getTime())) {
        resultElement.textContent = 'Please select a valid date.';
        return;
    }

      const dayNames = ['Minggu', 'Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat', 'Sabtu'];
      const monthNames = ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'];

      const dayName = dayNames[selectedDate.getDay()];
      const day = selectedDate.getDate();
      const monthName = monthNames[selectedDate.getMonth()];
      const year = selectedDate.getFullYear();

      const indonesianFormat = `${dayName}, ${day} ${monthName} ${year}`;
      resultElement.textContent = indonesianFormat;
    }

    // Set the date picker's value to today's date
    document.getElementById('datePicker').valueAsDate = new Date();
  </script>
</body>
</html>

Berikut hasilnya

Related posts: