Dashboards & Visualizations

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

pmardo
New Member

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>
0 Karma

mousumide
New Member

//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.

0 Karma

jkat54
SplunkTrust
SplunkTrust

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

0 Karma

pmardo
New Member

// 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);
    });
0 Karma

pmardo
New Member

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.

0 Karma

jkat54
SplunkTrust
SplunkTrust

You can use code blocks to allow your HTML markup

<html><body>LIKE THIS</body></html>
0 Karma

pmardo
New Member

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

0 Karma
Get Updates on the Splunk Community!

Index This | I am a number, but when you add ‘G’ to me, I go away. What number am I?

March 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with another ...

What’s New in Splunk App for PCI Compliance 5.3.1?

The Splunk App for PCI Compliance allows customers to extend the power of their existing Splunk solution with ...

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...