The avatar for @dmaynard
David Maynard
Retired Computer Scientist: SRI-ARC (Engelbart), Xerox PARC, Xerox SDS, Electronic Arts, SGI, Google, Box
Published
Edited
Jun 23, 2021
Insert cell
md`# Testing Date Inputs in Observable`
Insert cell
today = d3.timeFormat("%Y-%m-%d")(new Date(Date.now()))
Insert cell
Insert cell
viewof pastDate = Inputs.text({
type: "date",
label: html`<b>A Date in the Past</b>`,
max: "2021-06-15",
value: today
})
Insert cell
md` However it lets me select future dates and thinks they are valid`
Insert cell
[pastDate, viewof pastDate.checkValidity()]
Insert cell
viewof futureDate = Inputs.text({
type: "date",
label: html`<b>A Date in the Future</b>`,
min: today,
value: today
})
Insert cell
futureDate
Insert cell
[futureDate, viewof futureDate.checkValidity()]
Insert cell
genDateRangeCheck = function(minDate, maxDate) {
// minDate and maxDate MUST be in yyyy-mm-dd format
let min = d3.utcParse("%Y-%m-%d")(minDate);
let max = d3.utcParse("%Y-%m-%d")(maxDate);
return function(form) {
let now = d3.utcParse("%Y-%m-%d")(form.value);
return now >= min && now <= max;
};
}
Insert cell
viewof mayDate = Inputs.text({
type: "date",
label: html`<b>A Date in May</b>`,
validate: genDateRangeCheck("2021-05-01", "2021-05-31"),
value: today
})
Insert cell
md`### This actually "works" but results in one the world's worst human factors interface`
Insert cell
[mayDate, viewof mayDate.checkValidity()]
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more