Jump to content
We've recently updated our Privacy Statement, available here. ×
  • JavaScript Date and Time Pickers for Spotfire ®

    Learn how to add date time pickers to Spotfire for use in Text Areas


    Spotfire Property Controls of type Input can drive Document Properties of different date data types such as Date, Time and DateTime. These inputs can be enhanced by converting them into HTML5 date pickers by adding the proper type attribute on the input html tag with some javaScript. Before HTML5 there were many libraries such as JQuery or complex date-picker functions but not anymore. 



    A simple date picker in HTML5 looks like this

     <input type="date">
     <input type="time">
     <input type="datetime-local">

    With some JavaScript we can add the missing attributes when adding an Spotfire Input Property Control. To do so, we need to wrap our Spotfire Controls with an html tag and apply the corresponding attribute with JavaScript.

    <span id="date">
       <SpotfireControl id="Spotfire Date Input Property Control (format as "yyyy-MM-dd")" /> 
    <span id="time">
       <SpotfireControl id="Spotfire Time Input Property Control. Format string must be: "HH:mm"  />
    <span id="datetime">
       <SpotfireControl id="Spotfire DateTime Input Property Control formatted as "yyyy-MM-ddTHH:mm" /> 
    document.querySelector("#date input").type="date";
    document.querySelector("#time input").type="time";
    document.querySelector("#datetime input").type="datetime-local";

    If you want to make changes right after the date picker changes so you can pass the values right to the document property, just add or set the change event handler on the input. Here is a complete example for a simple date picker



    <span id="date">
        <SpotfireControl input />


     dateInput = document.querySelector("#date input")
     dateInput.onchange = ()=>{dateInput.focus();dateInput.blur();}

    For the date pickers to hold the selected value, the Property Controls must be formatted accordingly. 

    DataType Format
    Date yyyy-MM-dd
    Time HH:mm
    DateTime yyyy-MM-ddTHH:mm
    Month yyyy-MM

    Here is an example for Date picker. You might need to use custom formatting for Time or DateTime if not already available there. 



    If you want to force the user to select a value from the date picker without being able to enter the date manually, use this code:

    dt = document.querySelector("#monthpicker input")
    dt.type = "month"   //example for a month picker. Make sure the format is yyyy-MM
    dt.type = "date"      //regular date picker. Format should be yyyy-MM-dd
    //click out of the control to reflect changes as soon as the user selects a new date
    dt.onchange = dt.blur;
    //show the calendar popup
    dt.onclick = dt.showPicker
    //make the date picker active
    //remove border
    //min date. User can't select a date before oct 22
    dt.min = "2022-10" //use this to set minimum month when using month picker
    dt.min = "2022-10-15" //use this to set minimum date for date picker




    License:   TIBCO BSD-Style License



    User Feedback

    Recommended Comments

    There are no comments to display.

  • Create New...