JSFiddle - React, Tailwind, and code Playground

by momenelkamri

HTML

<input type="tel" id="date-range-input" />

JavaScript

// Haal het invoerveld op
const dateRangeInput = document.getElementById('date-range-input');
console.log("test 0", dateRangeInput);
// Voeg een eventlistener toe voor invoerwijzigingen
dateRangeInput.addEventListener('input', function (event) {
console.log("test")
  const input = event.target;
  const inputValue = input.value;

  // Verwijder eventuele tekens die geen cijfers of scheidingstekens zijn
  const cleanedValue = inputValue.replace(/[^0-9/-]/g, '');

  // Splits de ingevoerde waarde in twee delen op basis van het koppelteken (-)
  const dateParts = cleanedValue.split('-');

  // Als er twee datumdelen zijn
  if (dateParts.length === 2) {
    const startDate = dateParts[0].trim();
    const endDate = dateParts[1].trim();

    // Voeg de slash (/) toe tussen dag, maand en jaar als deze ontbreken
    const formattedStartDate = formatDateString(startDate);
    const formattedEndDate = formatDateString(endDate);

    // Voeg het koppelteken (-) tussen de twee datums toe
    const formattedValue = formattedStartDate + ' - ' + formattedEndDate;

    // Werk de waarde van het invoerveld bij
    input.value = formattedValue;
  }
});

// Functie om een datumstring te formatteren naar "dd/mm/yyyy"
function formatDateString(dateString) {
  const parts = dateString.split('/');
  const day = parts[0] ? parts[0].padStart(2, '0') : '';
  const month = parts[1] ? parts[1].padStart(2, '0') : '';
  const year = parts[2] || '';
  return `${day}/${month}/${year}`;
}