Date Range Viewer
Start Date:
End Date:
(Required)
Start Date: End Date:
Description
For a work project, I needed to create a method in JavaScript that allowed users to visualize several date ranges in comparison with each other. The majority of the date ranges were within the same year but a few spanned across years. The date range viewer needed to be able to dynamically add years either early or later then the starting year. However, the date range viewer needed to take up limited space. A overflow-x: auto; and a width of 368px was added to a div (IE rendered problem in quirks mode prevented a width of 365px). Each day in the year is represented by a single pixel with special cases for February and leap years.
The date ranges are not only visualized but can be directly edited as well. Clicking and dragging on a date range bar allows you to easily adjust the start and end date. As the bar drags, it also reports back where the new start and end dates are. The coder can decide what to do with this information. I've decided to display it in the text boxes above.
If a date range bar is dragged further than the years the date range is currently showing, new years are automatically added. The date range viewer can supported an unlimited number of views and can add them either before the current year or after.