How to use selected time picker in custom datasource plugin?

For previous custom plugins, one could use something like the following code from here

query(options) {
      const from: Moment = this.dateToMoment(options.range.from, false);
      const to: Moment = this.dateToMoment(, true);


to get time range selected in the Grafana time picker. With react and custom components, is this still a valid way to get the time range?

I have looked at a few links (1, 2 and 3) throughout docs and forums but unable to find a way to add time range to user query.

I have tried using const templateSrv = getTemplateSrv(); but haven’t had much luck getting time range out of it.

I contribute to and use this druid datasource plugin and currently trying to add a functionality where whatever the user has selected in time picker will be automatically added to user query for interval range.

Could someone please give me pointers are to how to get this done?


I think you could use the dateTime and/or dateTimeParse from @grafana/data.

import { dateTime, dateTimeParse } from "@grafana/data";

For example:

const from = dateTime(options.range.from);
const to = dateTime(;
1 Like

Thanks, I got this to work with the code snippet you shared.

1 Like