Basic date range input

[ae3e]

Hi,

My goal is to get a basic date range picker with some predefined date ranges that I can used in multiple markdown files.

It works fine if I declare the whole code in a markdown file but I'm not able to isolate it in a separate file to get a reusable component. I guess my problem is how to write button action code in a separate JS file?

Thanks for any help

Below is my code that can be used in an Observable project :

Fenced code blocks

let startInput = Inputs.datetime({ label: "From", value: new Date()-7*24*3600000});
let endInput = Inputs.datetime({ label: "To", value: new Date(),validate:e=>new Date(e.value)>startInput.value });

const predefinedPeriodInput = Inputs.button([
  ["6 hours", value => 6*3600*1000],
  ["2 days", value => 2*24*3600*1000],
  ["1 week", value => 7*24*3600*1000],
  ["1 month", value => 31*24*3600*1000],
  ["1 year", value => 365*24*3600*1000]
], {value: null, width:90});

const predefinedPeriod = Generators.input(predefinedPeriodInput);

const daterange_insitu = view(Inputs.form({
  from : startInput,
  to : endInput,
  predefined : predefinedPeriodInput
}))

if(predefinedPeriod){
  startInput.value = new Date()-predefinedPeriod;
  endInput.value = new Date();
  startInput.dispatchEvent(new Event("input", {bubbles: true}));
  endInput.dispatchEvent(new Event("input", {bubbles: true}));
}

${daterange_insitu.from.toLocaleString()} au ${daterange_insitu.to.toLocaleString()}

daterange_insitu

Local import

How to write button action code in a separate JS file?

import {daterange as daterange_exsitu } from "./components/daterange.js";

let dr = view(daterange_exsitu)

dr

Here is the code of the JS file ./components/daterange.js

import {button, datetime, form} from "npm:@observablehq/inputs";
import {Generators} from "npm:@observablehq/stdlib";


let startInput = datetime({ label: "From", value: new Date()-7*24*3600000});
let endInput = datetime({ label: "To", value: new Date(),validate:e=>new Date(e.value)>startInput.value });

const predefinedPeriodInput = button([
  ["6 hours", value => 6*3600*1000],
  ["2 days", value => 2*24*3600*1000],
  ["1 week", value => 7*24*3600*1000],
  ["1 month", value => 31*24*3600*1000],
  ["1 year", value => 365*24*3600*1000]
], {value: null, width:90});

const predefinedPeriod = Generators.input(predefinedPeriodInput);

export const daterange = form({
  from : startInput,
  to : endInput,
  predefined : predefinedPeriodInput
})

if(predefinedPeriod){
  startInput.value = new Date()-predefinedPeriod;
  endInput.value = new Date();
  startInput.dispatchEvent(new Event("input", {bubbles: true}));
  endInput.dispatchEvent(new Event("input", {bubbles: true}));
}

[ae3e]

I finally solved my problem by writing code in the reduce function of the button.

Here is the component file :

import {button, datetime, form} from "npm:@observablehq/inputs";

let startInput = datetime({ label: "From", value: new Date()-7*24*3600000});
let endInput = datetime({ label: "To", value: new Date(),validate:e=>new Date(e.value)>startInput.value });

const predefinedPeriodInput = button([
  ["6 hours", value => setRange(6*3600*1000)],
  ["2 days", value => setRange(2*24*3600*1000)],
  ["1 week", value => setRange(7*24*3600*1000)],
  ["1 month", value => setRange(31*24*3600*1000)],
  ["1 year", value => setRange(365*24*3600*1000)]
], {value: null, width:90});

const setRange = (period)=>{
    startInput.value = new Date()-period;
    endInput.value = new Date();
    return period;
}

export const daterange = form({
  from : startInput2
  to : endInput,
  predefined : predefinedPeriodInput
})

Then I can use the component in any markdown files :

```js
import {daterange } from "./components/daterange.js";
let dr = view(daterange)
```

[ryanmckaytx]

Thank you for this! Super useful component