DEVELOPMENT DATE_PICKER , TEMPLATE PROCESSOR #2
Description
USER STORY- PROBLEM 1 JAVASCRIPT DATE PICKER (DEVELOPMENT)
Description:
As a student enrolled in SSDI under Professor Dobbs, I want to solve the Problem-1 of Project-3 by creating an interactive Date Picker component using HTML, CSS, and JavaScript. This component should allow users to select dates from a calendar and execute a callback function when a date is chosen. Additionally, I aim to ensure that the selected date's information (month, day, year) is correctly passed to the callback function.
Acceptance Criteria:
• Implement a JavaScript class named DatePicker in the DatePicker.js file.
• The DatePicker class constructor should accept two arguments:
• An existing div element's ID where the calendar will be displayed.
• A callback function to handle selected date information.
• Ensure that the class stores these values for later use.
• Create a render method within the DatePicker class.
• This method should take a Date object as an argument, which determines the displayed month.
• Replace the contents of the specified div element with an HTML calendar.
• The calendar should feature a grid layout, with rows representing weeks and columns representing days of the week.
• Weekdays should be labeled with abbreviations (e.g., "Su" for Sunday).
• Each day of the month should be represented by a numeric value.
• Days not belonging to the selected month should be visually dimmed to indicate that they are part of other months.
• Ensure that the calendar adapts to the specific month's number of weeks, with a variable number of rows.
• Display the name of the month and the year at the top of the calendar.
• Include navigation controls ("<" and ">") that enable users to switch to the previous or next month.
• Implement the functionality that triggers the callback function when a user clicks on a valid day of the current month.
• Pass the selected date's information (month, day, year) to the callback function.
• Ensure that clicking on days belonging to months other than the current month does not invoke the callback function.