Popup Calendar (WebPlayer compatible)

Update!

It is now easier and almost out of the box to use different date picker for date, time or even date-time by using the power of HTML5.  No jquery or other libraries needed

html

date:<span class="date">

   <SpotfireControl id="Spotfire Date Input Property Control" /> 

  </span> (use M/d/yyyy formatting to have it work properly)

 Time: <span class="time">

   <SpotfireControl id="Spotfire Time Input Property Control" />

 </span> (use this formatting: hh:mm:ss)

 Datetime:<span class="datetime">

   <SpotfireControl id="Spotfire DateTime Input Property Control" />

 </span> (use this formatting: yyyy-MM-ddThh:mm

js

[...document.querySelectorAll(".date input")].map(x => x.type="date");

[...document.querySelectorAll(".time input")].map(x => x.type="time");

[...document.querySelectorAll(".datetime input")].map(x => x.type="datetime-local");

The above script will apply the proper type attribute value to each html5 input. 

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

Old-way

Ingredients

• Spotfire 6.0 to Spotfire 11.4
• TextArea
• Input Field Property Control
• Javascript script

Preparation

1. Add a TextArea and right click to edit the HTML
2. Add an Input Field Property Control wrapped by a tag with id='dt1' 
3. Add a span html tag with id='dt1picker' next to your SpotfireControl for the calendar 
4. Add javascript

HTML:
<span id='dt1'>
   <SpotfireControl id="ed353..YourSInputPropControl" />
</span>
<span id='dt1picker'></span>

JS:

//update document property after selection

function datePicker_onSelect(selectedDate){
 //alert(selectedDate)
 $("#dt1 input").focus()
$("#dt1 input").blur()
}

//jquery datepicker configuration
//you can comment the buttonImageOnly and buttonImage lines to show a button instead of a calendar or the image of your choice.
pickerOptions = {
 showOn: 'button', 
 buttonImageOnly: true, 
 buttonImage: 'http://staff.washington.edu/tabrooks/343INFO/UnobtrusiveDatePicker/cal-grey.gif', 
 minDate: "-36M", maxDate: "+0D",
 changeMonth: true,
 changeYear: true,
 altField:"#dt1 input",
 onSelect:datePicker_onSelect
 }

//create the date picker
document.getElementById('dt1picker').innerHTML="<input type='hidden' id='datePicker'>"
$("#datePicker").datepicker(pickerOptions);

Refer to the jquery datepicker documentation for configuration options