JavaScript Date and Time Pickers for Spotfire ®

Introduction

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. 

Solution

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.

Date
<span id="date">
   <SpotfireControl id="Spotfire Date Input Property Control (format as "yyyy-MM-dd")" /> 
</span>

Time
<span id="time">
   <SpotfireControl id="Spotfire Time Input Property Control. Format string must be: "HH:mm"  />
</span>

Datetime
<span id="datetime">
   <SpotfireControl id="Spotfire DateTime Input Property Control formatted as "yyyy-MM-ddTHH:mm" /> 
</span>



<script> 
document.querySelector("#date input").type="date";
document.querySelector("#time input").type="time";
document.querySelector("#datetime input").type="datetime-local";
</script>

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

html

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

js

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

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

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:
 

//https://community.tibco.com/s/article/Date-and-Time-Pickers

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
dt.addEventListener("click",dt.focus)

//remove border
dt.style.border="none"

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

References

https://developer.mozilla.org/en-US/docs/Learn/Forms/HTML5_input_types#date_and_time_pickers 

https://www.scaler.com/topics/html/html-forms/ 

License:   TIBCO BSD-Style License