Ben Borgers

War Room — using the native date picker

February 13, 2023

A couple months ago, I finally added the ability to set due dates for tasks in War Room.

I built my own modal with a calendar-style date picker when I did that, but recently I decided to replace it with a nicer implementation that felt more lightweight. I decided to rely on the native browser date picker for the new version — why build a date picker when you can use a nice one that’s built-in already?

I ended up building this tiny pop-up that’s pinned right below the button, which allows you to set a due date for a task:

I asked Christian to test it out and he usefully bashed it around and pointed out that setting a due date for a task at the bottom of the screen meant that the pop-up was cut off, so I had to flip it if the task is within the bottom 150 pixels of the screen:

In reality the pop-up is implemented as a Modal, so the rest of the screen can’t be scrolled or interacted with while it’s open. When the “due” button is clicked, I measure where the button is on the screen, and position the modal right below (or above) it so that it appears to be “pinned” by the button.

More blog posts

Subscribe to my newsletter for a monthly round-up of new blog posts and projects I’m working on!

Twitter ↗ RSS feed ↗