topic Re: How to Set A date field on a custom HTML form in Splunk Search

How to Set A date field on a custom HTML form

napomokoetle — Mon, 30 May 2016 12:53:56 GMT

Hi Everyone,

I am running Splunk ver 6.4 on CentOS release 6.6 (Final)

Running web GUI on Firefox ver 46.0.1 and Chrome ver 50.0.2661.102

I have a custom HTML dashboard with a form that has a date field that I'm trying to fill with the JQUERY datepicker function. I am able to get the datepicker GUI pop-up the Calendar when a user clicks on the DatePlanned field, but when the user clicks on the preferred date value the field does NOT populate.

My code for the relevant field on the form looks as follows:

    var input4 = new TextInput({
        "id": "input4",
        "value": "$form.DatePlanned$",
        "el": $('#input4')
    }, {tokens: true}).render();



 $("#input4").on('click', function(){
        $( '#input4' ).datepicker();
        $( '#input4' ).datepicker('setDate', date);

        FormUtils.handleValueChange(input4);

 });

And the form looks as follows:

 <form id="formEventInfo">
        <div class="fieldset">
            <div class="input input-radiogroup" id="input8">
                <label>MarkThisAsNonTssaEntry</label>
            </div>              
            <div class="input input-text" id="input1">
                <label>PrimaryKey</label>
            </div>
            <div class="input input-text" id="input2">
                <label>RFSNumber</label>
            </div>
            &lt;br/&gt;
            <div class="input input-text" id="input3">
                <label>Comment</label>
            </div>
            <div class="input input-text" id="input4">
                <label>DatePlanned</label>
            </div>
            <div class="input input-radiogroup" id="input5">
                <label>ActionRequired</label>
            </div>
            <div class="input input-radiogroup" id="input6">
                <label>MarkAsReviewed</label>
            </div>
            <div class="form-submit" id="search_btn">
                <button class="btn btn-primary submit">Submit</button>
            </div>
        </div>

        <div>
            <div class="input input-text" id="input7">
                <label>Enter a Key ID from the table below</label>
            </div>
            <div><button id="deleteRecord">Delete Record</button></div>
        </div>&lt;br/&gt;
    </form>

Please help!

Re: How to Set A date field on a custom HTML form

sundareshr — Tue, 31 May 2016 14:06:00 GMT

Have you tried using just the TimeRangeView?

Re: How to Set A date field on a custom HTML form

napomokoetle — Wed, 01 Jun 2016 19:05:37 GMT

Here's what I tried that sort of works...

The only problem is after the date is inserted into the form field, I can't get the calendar to hide way on date change!

I'd appreciate any help as I have tried all sorts of tricks to hide away the calendar. But none worked!

 var input4 = new TextInput({
     "id": "input4",
     "value": "$form.DatePlanned$",
     "el": $('#input4')
 }, {tokens: true}).render();


 $("#input4").on('click', function(newValue){

    var unsubmitted_tokens = mvc.Components.get('default');
    var submitted_tokens = mvc.Components.get('submitted');

        $("#input4").datepicker({
        onSelect: function() {


                var mydate = $( '#input4' ).datepicker({ dateFormat: 'dd/mm/yy',autoClose: true});

            unsubmitted_tokens.set('form.DatePlanned', mydate.val());

            FormUtils.handleValueChange(input4);


            }


        });

    });

Re: How to Set A date field on a custom HTML form

shibinvarghese — Mon, 22 Aug 2016 04:34:59 GMT

were you able to get this work? I'm having similar problem.

Re: How to Set A date field on a custom HTML form

sfatnass — Tue, 23 Aug 2016 12:04:28 GMT

i have the same problem, i don't know if you resolved it