How to create a custom time range type

FAQs
1

Create a file namedsrc/types/MyTimeRange.type.emb.js

Containing:

import { defineType, defineOption } from "@embeddable.com/core";

const MyTimeRange = defineType("myTimeRange", {
  label: "My Time Range",
  toString: (option) => option.name,
  toNativeDataType: {
    timeRange: (value) => value.relativeTimeString
        ? value.relativeTimeString
        : [value.from, value.to],
  },
});

const now = new Date()

defineOption(MyTimeRange, { 
	name: 'Today', 
	relativeTimeString: 'today' 
});
defineOption(MyTimeRange, { 
	name: 'Last week', 
	relativeTimeString: 'last week' 
});
defineOption(MyTimeRange, { 
  name: 'Last month', 
  from: new Date(now.getFullYear(), now.getMonth() - 1, now.getDate()), 
  to: new Date(now.getFullYear(), now.getMonth(), now.getDate())
});

export default MyTimeRange;

Screen recording of how you can use this time range type

And for more info, we have an example dropdown component that uses the time range type: