Splunk Search

How to Set A date field on a custom HTML form

napomokoetle
Communicator

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!

0 Karma

shibinvarghese
New Member

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

0 Karma

napomokoetle
Communicator

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);


            }


        });

    });
0 Karma

sfatnass
Contributor

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

0 Karma

sundareshr
Legend

Have you tried using just the TimeRangeView?

0 Karma
Did you miss .conf21 Virtual?

Good news! The event's keynotes and many of its breakout sessions are now available online, and still totally FREE!