How to Set A date field on a custom HTML form

[napomokoetle]

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!

[shibinvarghese]

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

[napomokoetle]

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


            }


        });

    });

[sfatnass]

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

[sundareshr]

Have you tried using just the TimeRangeView?