Adding javascript based date picker into dashboard

anilkapu — Fri, 25 Sep 2020 07:52:12 GMT

Hi,

I have dashboard with several visualizations. Im trying to add 2 date pickers "From", "To" to select date range so that the visualizations query events in that date range input by the user. I'm not able to use splunk's default "Time" input object because I have to limit users from selecting "From" date to maximum of 3 years from current date.

I have been able to add the date pickers into simplexml as per suggestion in this post https://community.splunk.com/t5/Dashboards-Visualizations/Jquery-datepicker-in-splunk/m-p/361049

The thing which I'm struggling with is to set the min/max attribute of "date" type element on "change" event. To explain this...for example.. if a user selects "From" date as 09/21/2020, then the calendar in "To" date should disable all the dates before this date.. Likewise if user selects 09/21/2020 as "To" date then disable all date selections after this date in "From" date field.

Here is the code for dashboard

<dashboard script="datepicker.js"> <label>HTML Date Picker</label>  <search> <query>| makeresults | eval fromDate=strftime(relative_time(now(),"-1d@d"),"%Y-%m-%d") | eval toDate=strftime(now(),"%Y-%m-%d")</query> <earliest>-1s@s</earliest> <latest>now</latest> <done> <eval token="strMinDate">strftime(relative_time(now(), "-3years"), "%Y-%m-%d")</eval> <eval token="strMaxDate">strftime(now(), "%Y-%m-%d")</eval> </done> </search>  <search> <query>| makeresults | eval earliestTime=strptime("$tokFromDate$","%Y-%m-%d") | eval latestTime=strptime("$tokToDate$","%Y-%m-%d")</query> <earliest>-1s@s</earliest> <latest>now</latest> <done> <set token="tokEarliestTime">$result.earliestTime$</set> <set token="tokLatestTime">$result.latestTime$</set> </done> </search> <row> <panel> <title>Selected String Time - $strMinDate$ - $strMaxDate$</title> <html> <style> .dateContainer { display: flex; } .dateInput { padding-right: 15px; } </style> <div class="dateContainer"> <div class="dateInput"> <div>From Date:</div> <input id="inputFromDate" type="date" min="$strMinDate$" max="$strMaxDate$"/> </div> <div class="dateInput"> <div>To Date:</div> <input id="inputToDate" type="date" min="$strMinDate$" max="$strMaxDate$"/> </div> </div> </html> </panel> </row> <row> <panel> <title>Converted Epoch Time - $tokFromDate$ $tokToDate$</title> <chart> <title>Splunkd errors timechart by top 5 components</title> <search> <query>index=_internal sourcetype="splunkd" log_level!="INFO" component="*" | timechart count by component limit=5 usenull=f useother=f </query> <earliest>$tokEarliestTime$</earliest> <latest>$tokLatestTime$</latest> </search> <option name="charting.axisTitleX.text">Time</option> <option name="charting.axisTitleY.text">Count</option> <option name="charting.chart.stackMode">stacked</option> </chart> </panel> </row> </dashboard>

Below is the javascript

require([ "jquery", "splunkjs/mvc", "splunkjs/mvc/simplexml/ready!" ], function($, mvc) { var submittedTokenModel = mvc.Components.get("submitted"); var defaultTokenModel = mvc.Components.get("default"); // On change of html date input inputFromDate, update the token tokFromDate in default and submitted model $(document).on("change", "#inputFromDate", function() { var dateText = $("#inputFromDate").val(); defaultTokenModel.set("tokFromDate", dateText); submittedTokenModel.set("tokFromDate", dateText); //update the min value of "To" date field to selected "From" date if (dateText) $("#inputToDate").attr('min', dateText); }); // On change of html date input inputToDate, update the token tokToDate in default and submitted model $(document).on("change", "#inputToDate", function() { var dateText = $("#inputToDate").val(); defaultTokenModel.set("tokToDate", dateText); submittedTokenModel.set("tokToDate", dateText); //update the max value of "From" date field to selected "To" date if (dateText) $("#inputFromDate").attr('max', dateText); }); });

I'm using Splunk version Version:7.3.3 Build -7af3758d0d5e

Could any one suggest what am I doing wrong? Any help would be much appreciated

topic Adding javascript based date picker into dashboard in Dashboards & Visualizations

Adding javascript based date picker into dashboard