A reusable, customizable date picker web component built with JavaScript, HTML, and CSS.
Welcome to the Custom Date Picker repository! This project is a web component-based date picker, implemented using JavaScript, HTML, and CSS. This README provides an overview of the functionality, code structure, and usage of the date picker. Additionally, it includes a screenshot to give a visual representation of the final implementation.
The Custom Date Picker is a reusable and flexible date selection component that can be easily integrated into any web application. It leverages modern web component standards to encapsulate its functionality, ensuring that it can be used independently without interfering with other parts of the application.
To use the Custom Date Picker, include the JavaScript and CSS files in your project and add the web component tags in your HTML.
Clone the repository:
git clone https://github.com/MohmadAoun/Custom-date-picker.git
cd Custom-date-picker
Include the script in your HTML:
<script src="path/to/date-picker.js"></script>
Add the date picker components to your HTML:
<month-selector></month-selector>
<year-selector></year-selector>
<calendar-grid></calendar-grid>
<div class="selected-date">
<span></span>
</div>
To handle changes in the selected month and year, add event listeners in your JavaScript:
document
.querySelector("month-selector")
.addEventListener("month-change", (event) => {
const year = parseInt(
document
.querySelector("year-selector")
.shadowRoot.querySelector(".display").textContent,
10
);
document
.querySelector("calendar-grid")
.generateCalendar(year, event.detail.index);
});
document
.querySelector("year-selector")
.addEventListener("year-change", (event) => {
const monthDisplay = document
.querySelector("month-selector")
.shadowRoot.querySelector(".display").textContent;
const month = new Date(`${monthDisplay} 1`).getMonth();
const year = parseInt(event.detail.item, 10);
document.querySelector("calendar-grid").generateCalendar(year, month);
});
The codebase is organized into classes representing different parts of the date picker. Each class is implemented as a web component:
DropdownSelector
for month selection.DropdownSelector
for year selection.class DropdownSelector extends HTMLElement {
// Implementation of the base dropdown selector
}
class MonthSelector extends DropdownSelector {
// Specific implementation for month selection
}
class YearSelector extends DropdownSelector {
// Specific implementation for year selection
}
class CalendarGrid extends HTMLElement {
// Implementation of the calendar grid
}
For any questions or contributions, feel free to open an issue or submit a pull request. Thank you for using the Custom Date Picker!