🏠 back to Observable

Astronomical clock and inputs

This is an astronomical clock, showing the current time, and the approximate position of sun and moon in relation to the horizon.

You can have it follow the current time, and initialize at your location by adding now and here query parameters to the URL.

(Embedded version, current time and location)

The inputs are in a separate notebook:

A question: I have a widget similar to Inputs.range, but with a date input instead of a text box. This is currently implemented by adding a slider to an Inputs.date (this is so it has the same style sheets as the other inputs) but this depends on some internals of that library. How should I do it properly?

4 Likes

This is great!

I like the date range slider, and (though I’ve only briefly glanced at it) I don’t really know of a much better way to do it. There’s no one specially-sanctioned official “right” way to build your own input; it looks like you’re already doing the getter/setter pattern, which was gonna be my only suggestion.

I think the “proper” way would just be to go all the way and make it self-contained so it doesn’t call Inputs.date, which as you’ve discovered would mean duplicating a bunch of Inputs internals. I guess starting from range.js and changing the type="number" input to type="date" and adding the number ↔ date coercion?