topic KV Store: How to add 2 jquery date pickers to my HTML dashboard? in Dashboards & Visualizations

KV Store: How to add 2 jquery date pickers to my HTML dashboard?

pmardo — Mon, 14 Dec 2015 05:15:47 GMT

Hello!

I want to add in 2 jquery datepickers to my html dashboard.

I can see the jquery date picker calendar, but whenever I click a date, the input field does not populate. I think I'm missing very simple and I'd love feedback..

Please keep in mind I'm pretty new to HTML/Javascript. I used the KV Store tutorial, and inserted some code...

HTML:

<div type="text" name="date" id="input3" class="datepicker">
 <label>DCT_DueDate</label>
 </div> &lt;br/&gt;

<div type="text" name="date" id="input4" class="datepicker">
 <label>DIA_DueDate</label>
 </div> &lt;br/&gt;

JAVASCRIPT:

<script>
    $(function() {
        $("#input3").datepicker();

    });

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

    input3.on("change", function(newValue) {
        FormUtils.handleValueChange(input3);
    });

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

    input4.on("change", function(newValue) {
        FormUtils.handleValueChange(input4);
    });
</script>

Re: KV Store: How to add 2 jquery date pickers to my HTML dashboard?

jkat54 — Mon, 14 Dec 2015 14:53:50 GMT

You can use code blocks to allow your HTML markup

<html><body>LIKE THIS</body></html>

Re: KV Store: How to add 2 jquery date pickers to my HTML dashboard?

jkat54 — Mon, 14 Dec 2015 15:09:42 GMT

Here's what you pasted:

<div type="text" name="date" id="input3" class="datepicker">
<label>DCT_DueDate </label>
</div> &lt;br/&gt;

<div type="text" name="date" id="input4" class="datepicker">
<label>DIA_DueDate</label>
</div> &lt;br/&gt;

JAVASCRIPT:
<script>
$(function() {
$("#input3").datepicker();}
);

     var input3 = new TextInput({
         "id": "input3",
         "value": "$form.DCT_DueDate$",
         "el": $('#input3')
     }, {tokens: true}).render();
     input3.on("change", function(newValue) {
         FormUtils.handleValueChange(input3);
     });

     var input4 = new TextInput({
         "id": "input4",
         "value": "$form.DIA_DueDate$",
         "el": $('#input4')
     }, {tokens: true}).render();
     input4.on("change", function(newValue) {
         FormUtils.handleValueChange(input4);
     });
</script>

You start the JAVASCRIPT with "$(" but dont have ending ")"

You mention "function()" but this might not be correct use of function command.. "function functionName()" is correct i think.

You go on to call your function in this manner "function(newValue)" which means you're passing a copy of the variable named newValue to your function that doesnt appear to be capable of receiving a variable??? not certain on this one.

You might want to use the MVC stuff mentioned on this post instead:

https://answers.splunk.com/answers/288446/how-to-implement-jquery-in-an-html-dashboard-to-ad.html

Re: KV Store: How to add 2 jquery date pickers to my HTML dashboard?

pmardo — Mon, 14 Dec 2015 16:07:23 GMT

haha thanks for mentioning this. i was trying to lookup html markup and originally did the html tag but not the body tag!

Re: KV Store: How to add 2 jquery date pickers to my HTML dashboard?

pmardo — Mon, 14 Dec 2015 16:39:28 GMT

Can you be more specific on how you would implement the MVC component? I saw this question but wasn't sure how to use it. I couldn't find documentation on it.

Re: KV Store: How to add 2 jquery date pickers to my HTML dashboard?

pmardo — Mon, 14 Dec 2015 16:40:07 GMT

// I know this isn't right, but am I going in the right direction?

    $(function dueDates() {
       mvc.Components.getInstance("input3").val('');
       mvc.Components.getinstance("input4").val('');
    });

    $(".datepicker").on('click', function(){
        dueDates())
    });

// Not sure if the code below is needed..

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

    input3.on("change", function(newValue) {
        FormUtils.handleValueChange(input3);
    });

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

    input4.on("change", function(newValue) {
        FormUtils.handleValueChange(input4);
    });

Re: KV Store: How to add 2 jquery date pickers to my HTML dashboard?

mousumide — Wed, 28 Jun 2017 11:35:48 GMT

//Use this. I implemented this in my current assignment and it worked perfectly for me.

var input12 = new TextInput({
"id": "input12",
"value": "$form.StartDate$",
"default": "$StartDate$",
"el": $('#input12')
}, {tokens: true}).render();
$("input[id^='input12']").datepicker();

    input12.on("change", function(newValue) {
        FormUtils.handleValueChange(input12);
    });

//when the back end Code is generated,Splunk adds up some extra digits at the end of the input12, this piece of code
$("input[id^='input12']") ensures that it ignores what ever is at the end of input12 and calls the date picker function for that input.