Solved: i want to use canlander to select time without pre...

yaozelin · ‎04-26-2020

i just want to use a canlander to select time,but when i add a "time" panel ,there are presets\relative\real-time\... showed on the  web page ,i want to remove these panel and only show a canlander to select time.

vnravikumar · ‎04-26-2020

Hi

Check the below CSS and add/remove options accordingly.

<form>
  <label>time</label>
  <fieldset submitButton="false">
    <input type="time" token="field1">
      <label></label>
      <default>
        <earliest>1587859200</earliest>
        <latest>now</latest>
      </default>
    </input>
  </fieldset>
  <row depends="$hide$">
    <panel>
      <html>
      <style>
       div[data-test-panel-id="presets"],div[data-test-panel-id="relative"],div[data-test-panel-id="realTime"],div[data-test-panel-id="dateTime"],div[data-test-panel-id="advanced"]{

        display:none !important;
        }
      </style>
    </html>
    </panel>
  </row>
</form>

View solution in original post

niketn · ‎04-26-2020

@yaozelin refer to one of my older answers to add HTML Date input in the Dashboard which required Simple XML JS Extension to handle HTML Date input selection and change: https://answers.splunk.com/answers/627432/jquery-datepicker-in-splunk.html

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

yaozelin · ‎04-26-2020

Thank you very much, but I would like to use the native style of splunk. I have offered this kind of scheme as an alternative. Thanks again.

vnravikumar · ‎04-26-2020

Hi

Check the below CSS and add/remove options accordingly.

<form>
  <label>time</label>
  <fieldset submitButton="false">
    <input type="time" token="field1">
      <label></label>
      <default>
        <earliest>1587859200</earliest>
        <latest>now</latest>
      </default>
    </input>
  </fieldset>
  <row depends="$hide$">
    <panel>
      <html>
      <style>
       div[data-test-panel-id="presets"],div[data-test-panel-id="relative"],div[data-test-panel-id="realTime"],div[data-test-panel-id="dateTime"],div[data-test-panel-id="advanced"]{

        display:none !important;
        }
      </style>
    </html>
    </panel>
  </row>
</form>

yaozelin · ‎04-26-2020

hello,vnravikumar,Thank you first.Your plan is just what I want，but I also want to change the style of “Date-Range”.First,after i clicking the time input,It's not going to show you “Date-Range” .It should jump directly to the calendar.t doesn't take two clicks to get to calendar.The second,once the calendar display，I just want one calendar to show up and none of the other options to show up. it's maybe a little difficult,thank you ,vnravikumar.

vnravikumar · ‎04-27-2020

Hi

Check this

<form script="date.js">
  <label>time</label>
  <fieldset submitButton="false">
    <input type="time" token="field1" id="rk">
      <label></label>
      <default>
        <earliest>1587945600</earliest>
        <latest>1588204800</latest>
      </default>
    </input>
  </fieldset>
  <row depends="$hide$">
    <panel>
      <html>
      <style>
       div[data-test-panel-id="presets"],div[data-test-panel-id="relative"],div[data-test-panel-id="realTime"],div[data-test-panel-id="dateTime"],
           div[data-test-panel-id="advanced"]{
              display:none !important;
        }

       div[data-test="time-range-dialog"]{
        min-width: 440px!important; width: 440px!important;
        }
      </style>
    </html>
    </panel>
  </row>
</form>

javascript:

require(["jquery", "splunkjs/mvc", "splunkjs/mvc/simplexml/ready!"], function($, mvc) {
    $( "[data-test='toggle']" ).click(function() {
         setTimeout(function(){
            $("[data-test='textbox']").filter(':visible:first').focus();
        }, 500);
        });
});

vnravikumar · ‎04-27-2020

The second option I guess it's not feasible. May be someone can help you.

i want to use canlander to select time without presets and relative and other optation

CSS

.conf24 | Registration Open!

ICYMI - Check out the latest releases of Splunk Edge Processor

Introducing the 2024 SplunkTrust!