pavan-vanjre
commented
4 months ago Completed the development for date picker, so closing the user story
Closed pavan-vanjre closed 4 months ago
pavan-vanjre
commented
4 months ago Completed the development for date picker, so closing the user story
USER STORY- PROBLEM 1 JAVASCRIPT DATE PICKER (DEVELOPMENT)
Description: As a student enrolled in SSDI under Professor Dobbs, I want to solve the Problem 2 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.