How to add a simple date picker?

[jasmartin]

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:

https://community.splunk.com/t5/Dashboards-Visualizations/using-splunk-UI-to-select-a-specific-date/...

https://community.splunk.com/t5/Dashboards-Visualizations/Calendar-date-picker/m-p/49711

https://community.splunk.com/t5/Dashboards-Visualizations/Jquery-datepicker-in-splunk/m-p/361049

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>
</input>

Then create a Javascript file with this:

require(["jquery", "splunkjs/mvc/simplexml/ready!"], function($) {
  $("[id^=date]")
    .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!

[richgalloway]

Please try step 3 and let us know the results.

[jasmartin]

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:

<search>
    <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>
    <earliest>-1s@s</earliest>
    <latest>now</latest>
    <done>
      <set token="tokFromDate">$result.fromDate$</set>
      <set token="tokToDate">$result.toDate$</set>
      <set token="tokEarliestTime">$result.earliestTime$</set>
      <set token="tokLatestTime">$result.latestTime$</set>
    </done>
  </search>

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");
		if(tokFromDate!=="undefined"){
			$('#inputDate').val(tokFromDate);
		}
	});

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