search

wakirin / Litepicker

Date range picker - lightweight, no dependencies
MIT License
899 stars 132 forks source link

compare two date ranges on a single calendar #194

Closed futwick closed 3 years ago

futwick commented 3 years ago

Litepicker is excellent. Thank you for creating it.

It would be even better if it had the ability to compare two date ranges like the Google Analytics calendar can: image

wakirin commented 3 years ago

related to #21

https://litepicker.com/docs/options#highlighteddays-114

futwick commented 3 years ago

I've found another workaround. I've made two transparent inline pickers and absolutely positioned one over the other.

image

Not perfect but it has potential.

I'm switching between the two pickers by changing their z-index.

I've had to make sure the two calendars stay in sync (when the month changes on one it must also change on the other).

I've made the following elements transparent.

.containermonths background on both calendars: `.litepicker .containermonths { background-color: transparent; }`

.day-item and .month-item-header text color on the second calendar: `#picker2container .litepicker .container__days .day-item,

picker2container .litepicker .month-item-header {

color: transparent;
}`

Here's a demo: https://jsfiddle.net/futwick/7s8wj104/

wakirin commented 3 years ago

Nice, thanks for sharing the solution.