How to create a calendar or date picker widget using JavaScript?

There are several ways to create a calendar or date picker widget using JavaScript. Here is one approach using HTML, CSS, and JavaScript:

HTML structure: Create an input field and a container element to hold the calendar widget.

<input type="text" id="datepicker" />
<div id="calendar"></div>

CSS styles: Style the input field and calendar container as desired.

#datepicker {
  width: 200px;
  padding: 10px;
}

#calendar {
  position: absolute;
  top: 30px;
  left: 0;
  width: 200px;
  padding: 10px;
  background-color: white;
  border: 1px solid gray;
  display: none;
}

JavaScript logic: Add event listeners to show the calendar when the input field is clicked and hide it when a date is selected.

// Get necessary elements
const input = document.getElementById('datepicker');
const calendar = document.getElementById('calendar');

// Show the calendar when input field is clicked
input.addEventListener('click', function () {
  calendar.style.display = 'block';
});

// Hide the calendar and set selected date when a date is clicked
calendar.addEventListener('click', function (event) {
  const selectedDate = event.target.getAttribute('data-date');
  if (selectedDate) {
    input.value = selectedDate;
    calendar.style.display = 'none';
  }
});

// Function to generate calendar for a specific month and year
function generateCalendar(month, year) {
  // Logic to generate the calendar goes here
}

// Generate initial calendar
generateCalendar(0, 0);

Calendar generation function: Implement the generateCalendar function to dynamically create the calendar for a specific month and year. This can be done by manipulating the DOM or using a templating library like Handlebars or React.

The generateCalendar function should update the contents of the #calendar element to display the calendar for the specified month and year. It might include functionality to navigate between months and years, highlight the current date, and apply custom styling.