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?
Thanks for the reply. The point of that exercise with the date range slider is to have it fit in with the rest of the inputs. I also tried something more self contained but it always ended up misaligned with the rest of the inputs.
There’s 2 new inputs in this notebook:
A bunch of buttons to animate a Date input:
And, the button to get the device location is now also a standalone input:
Both of these can be used by themselves, or they can be bound to a more conventional Date or Location input.
