Dashboards & Visualizations

How to add a simple date picker?


Hello, I'm trying to add a simple date picker to a dashboard. I'm still pretty new to Splunk and Javascript so I'm hoping I'm just missing something simple. I've found other posts like:




However I'm still unable to get what I'd like, which is 1 calendar so the user can pick a date. Most of the solutions are to select 2 dates for a range. For me, the range will always be 1 day as the dashboard only shows daily reports. 

I did find https://medium.com/@nikolayryabykh/splunk-s01e03-the-one-with-js-and-css-b8c78851481c that has an example with a single date calendar picker but I'm having trouble making it work, maybe because it's from 2018. TL;DR, the instructions say to add:





<input type="text" token="token_date" id="date">
  <label>Test textbox:</label>





Then create a Javascript file with this:





require(["jquery", "splunkjs/mvc/simplexml/ready!"], function($) {
    .attr('type', 'date')
    .attr('min', '2018-01-11')




And add this:




<dashboard script="input.js">




I did Step 1 and 2 (via Upload Asset). I didn't do Step 3 as another procedure I was testing didn't require me to put script="input.js" in the form tag.

Thanks in advance!


Labels (2)
0 Karma


Please try step 3 and let us know the results.

If this reply helps you, Karma would be appreciated.


Well, I added it to the form tag on the dashboard:

<form version="1.1" script="text_date_input.js">

And now the picker appears! However, still have 2 problems:

1. I would like the picker to default to show yesterday's date, right now it's just showing "mm/dd/yyyy". I do have this in the dashboard:

    <query>| makeresults 
| eval fromDate=strftime(relative_time(now(),"-1d@d"),"%Y-%m-%d") 
| eval toDate=strftime(now(),"%Y-%m-%d")
| eval earliestTime=strptime(fromDate,"%Y-%m-%d") 
| eval latestTime=strptime(toDate,"%Y-%m-%d")</query>
      <set token="tokFromDate">$result.fromDate$</set>
      <set token="tokToDate">$result.toDate$</set>
      <set token="tokEarliestTime">$result.earliestTime$</set>
      <set token="tokLatestTime">$result.latestTime$</set>

And this is the input:

<input type="text" token="tokFromDate" id="date"/>

But the picker doesn't get set. I'm guessing some Javascript is needed to set the default date in the input, such as the code from the other solutions I've found:

	// On default model change of token tokFromDate assign the selected value to html date input inputDate
	defaultTokenModel.on("change:tokFromDate", function(newValue) {
		var tokFromDate=defaultTokenModel.get("tokFromDate");
		var tokToDate=defaultTokenModel.get("tokToDate");

2. The input also isn't updating the variables or tables when the date is changed on the picker.

0 Karma
Get Updates on the Splunk Community!

Observability | How to Think About Instrumentation Overhead (White Paper)

Novice observability practitioners are often overly obsessed with performance. They might approach ...

Cloud Platform | Get Resiliency in the Cloud Event (Register Now!)

IDC Report: Enterprises Gain Higher Efficiency and Resiliency With Migration to Cloud  Today many enterprises ...

The Great Resilience Quest: 10th Leaderboard Update

The tenth leaderboard update (11.23-12.05) for The Great Resilience Quest is out &gt;&gt; As our brave ...