Spotfire - "limit data using expression" and add popup calendar for user input (Custom Expression)

Sometimes you want to use user input to limit the data to do the calculation and visualisation.
(Actually, this does the same as the filter)
e.g. User can input their own date range to calculate number of permits of operators during  that date range. You can combine a dropdown list to control when and what data to use for user input:

Part of the code to toggle date entry part:


#Reset zoom sliders
from Spotfire.Dxp.Application.Visuals import *

#1 Loops through visuals
for vis in Application.Document.ActivePageReference.Visuals:

  #1.1 check each visual type
  if vis.TypeId==VisualTypeIdentifiers.BarChart:

    #1.2 Reset zoom sliders
    vis.As[VisualContent]().XAxis.ZoomRange=AxisRange.DefaultRange

Document.Properties['dlCompanyActivity'] = topSelection

if topSelection == 'Permit date':
 
oldHTML = vis.As[HtmlTextArea]().HtmlContent
oldDiv = '<DIV id = "norm_by_permit"  style="display:none">'
newDiv = '<DIV id = "norm_by_permit"  style="display:inline">'
newHtml = oldHTML.Replace(oldDiv,newDiv)

vis.As[HtmlTextArea]().HtmlContent = newHtml;
vis.As[HtmlTextArea]().HtmlContent += ""

else:

oldHTML = vis.As[HtmlTextArea]().HtmlContent
oldDiv = '<DIV id = "norm_by_permit"  style="display:inline">'
newDiv = '<DIV id = "norm_by_permit"  style="display:none">'
newHtml = oldHTML.Replace(oldDiv,newDiv)

vis.As[HtmlTextArea]().HtmlContent = newHtml;
vis.As[HtmlTextArea]().HtmlContent += ""


Also, for input type is date, use this reference to create a calendar:

http://spotfired.blogspot.ch/2014/05/popup-calendar-webplayer-compatible.html
http://spotfired.blogspot.com/2014/07/two-popup-calendars-start-and-end-date.html

html
<div style='display:none'>
   <div id='dt1Label'><SpotfireControl id='L4b31C0n7r01...'/>
   </div>
   <div id='dt2Label'><SpotfireControl id='L4b31C0n7r02...'/>
   </div>

</div>

Date1: <span id='dt1'><SpotfireControl id='Inpu7C0n7r01...'/>

<span id='dt1picker'></span>

Date2: <span id='dt2'><SpotfireControl id='Inpu7C0n7r02...'/>

<span id='dt2picker'></span>

js
//constraint date2 calendar based on selection and update property controls automatically
function picker1_onSelect(selectedDate,inst){

 //min date constraint based on other picker
 minDate = $(this).datepicker("getDate")
 $("#datePicker2").datepicker("option","minDate",minDate);

 //update document property after selection
 $("#dt1 input").focus(); 
 $("#dt2 input").focus(); 
}

//update document property after selection
function picker2_onSelect(selectedDate){
 $("#dt2 input").focus(); 
 $("#dt1 input").focus(); 
}

//global datepicker options
pickerOptions = {
 showOn: 'button', 
 buttonImageOnly: true, 
 buttonImage: 'http://kalender.isetegija.net/Styles/SandBeach/Images/DatePicker.gif', 
 minDate: "-36M", maxDate: "+0D",
 changeMonth: true,
 changeYear: true
}


//create first date picker
document.getElementById('dt1picker').innerHTML="<input type='hidden' id='datePicker1' value="+$('#dt1Label').text()+">"
$("#datePicker1").datepicker(pickerOptions);
$("#datePicker1").datepicker("option",{altField:"#dt1 input", onClose:picker1_onSelect})


//create second date picker
document.getElementById('dt2picker').innerHTML="<input type='hidden' id='datePicker2'value="+$('#dt2Label').text()+">"
$("#datePicker2").datepicker(pickerOptions);
$("#datePicker2").datepicker("option",{altField:"#dt2 input", onClose:picker2_onSelect})