Popup Calendar (WebPlayer compatible)



Ingredients
  • Spotfire 6.0+
  • 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

27 comments:

Anonymous said...

I'm able to get this to work to return an alert message but, how do I assign "selectedDate" to a spotfire document property? The displayed text in my input text boxes changes to the selected date but, the underlying document properties are not changing as they do when I manually enter a date.

Leviaguirre said...

1) Insert an input field property control to your textarea
2) Edit the Text Area and add a <div id='myDatePicker'> </div>
3) add the script, but make sure the altField value matches your Input Field Property Control from step 1
4) you can remove the alert line

The script will only put the date in your input field property control as if you do it manually. You will have to press the enter or tab key to pass the value to spotfire.

Mithun Mathews said...

Hi Leviaguirre, This is very useful script and I can see clients wanting to add this.
However I am having trouble with executing this.
Basically I have two input fields.
Document.property "StarDate" and "EndDate". How should i go about tweaking the script, so it can fit in my case.? Should i be changing the "myDatePicker" to "Startdate" and then add "enddate"

Leviaguirre said...

You will need to add two input fields for each document property; StartDate and EndDate, each with a calendar icon (▦) next to it.
Start Date [ ]▦
End .Date [ ]▦

Remember that this calendar is just a way to facilitate date entry into an Input Field Property Control.

Leviaguirre said...

I created a sample of your use case: http://spotfired.blogspot.com/2014/07/two-popup-calendars-start-and-end-date.html

Mithun Mathews said...

Thanks A Million for checking on this,Much appreciated..nice Blog by the way!!

Leviaguirre said...

You are welcome! I just updated the script that shows two calendars. It was not working propery few hours ago.-

Anonymous said...

Hey nice blog but how can I change the format for the date time picker as when I am opening the report from UK as the system date setting are in dd-mm-yy format
its taking wrong date but on opening it from US is working fine
what I understood that we need to add regional setting.
How can we add it
$.datepicker.setDefaults( $.datepicker.regional[ "" ] );


As if I select 10- Nov -2014 from london its changing it to 11-Oct -2014 but from US systems its working fine

Jose Leviaguirre said...

Add "altFormat" to your "pickerOptions" object:

$( ".selector" ).datepicker({
altFormat: "dd-mm-yy"
});

Here is the documentation for all available options: http://api.jqueryui.com/datepicker/

fivy f rakhmawati said...

This is awesome!!!!!
Now how can I use the datepicker's value in SQL information links and custom expression in column?

Jose Leviaguirre said...

Just pass the javascript value to a (hidden) input field property control so the value is passed as a document property. The datePicker_onSelect function does just that. With Document Properties you can then use it in custom expressions.

To transfer the value from your popup calendar

datePicker_onSelect(selectedDate)
$("#dt1 input").val(selectedDate).blur();

see also: http://spotfired.blogspot.com/2014/09/passing-javascript-values-to-document.html

Anonymous said...

I successfully implemented the popup calendar in the text area. But I found that it would be partially covered by other visualizations or text areas, well, since my text area is small. Any solution for it? Thanks!!

Greg Gegner said...

this is good, but I need a little help with step 4 the second part(change the altField value to match your Spotfire control id:)...What to I change if the ID was AAAA?

Jose Leviaguirre said...

Anonymous@March 19-9:42,
Popup calendar is only visible within the textarea the same way filters do. For example, try to place a date range filter and you will notice that the oob spotfire date popup behaves similarly

Ashwani Singh said...

Hi Jose,i tried to use date picker and implemented the way you have suggested but it seems that some of the html tags are not supporting text area.I can view the calender icon in the "edit textarea mode" but as soon as i close the textarea edit mode,i don't find the icon visible in the textarea.I have given a local system path of the calender icon.

Please guide.

Thanks,
ashwani

Jose Leviaguirre said...

Hello Ashwani, avoid editing the text area when using javascript widgets as it might corrupt the code. Always try to edit the html instead

Ashwani Singh said...

Hi Jose,
I can't see the calender icon in web player.I assume this is because i have given the local path of my machine in jquery section:

buttonImage: 'C:/Users/AXYZ/Desktop/analysis_files/date_picker.jpg'

Do i need to embed the image in dashboard itself so that it would be visible in web player?If yes then how to implement?


Thanks,
Ashwani

Jose Leviaguirre said...

The webplayer or server needs to have access to the calendar icon. Seems that the calendar icon used in this example hosted somewhere in the interenet is no longer available. I'll update with an available one. Thanks Ashwani for your comments!

Stuart Johnstone said...

Hi - Struggling to get this to work using SpotFire 6 and IE 11

Get "interpretation error during update".

Any thoughts.

Jose Leviaguirre said...

Stuart, some times I get that error too. It seems that it is caused by some text are with certain javascript Spotfire dislikes. This happens in any browser. What I do is remove the text area and try to find the root cause by adding incremental chunks. If you don' t want to remove the text area, you could remove the javascript or comment it all out and start uncommenting portions of code at the time.

Swarupa Patra said...

how set default date ? I used defaultDate : 0 but it didn't work

Binita Singh said...

How can i set the input field to today's date when the dashboard is opened..Also if i choose a selected date then it should set to selected date and not change when i navigate to next page..

Jose Leviaguirre said...

Hello Binita, you can use a document property

Paul said...

Hi, I want to connect the output of the popup calendar to a Text Filter (representing a DateTime) field. However I am not able to update the filter with the value from the popup (although the alert seems to get the right value form the filter). What am I doing wrong here?

//update document property after selection
function datePicker_onSelect(selectedDate){
$("#dt1 input").focus()
$("#dt1 input").blur()

document.getElementById("afd5959f0d1347a583a8a569303ce699").value = selectedDate
alert(document.getElementById("afd5959f0d1347a583a8a569303ce699").value)
}

Jose Leviaguirre said...

Hello Paul,

If you want to update a date filter, make sure your filter type is a "Text Filter" and the format is the same as the date picker: edit>col properties>formatting> MM/dd/yyyy.

You can create a calculated column to copy your date filter to perserve the filter type you want and use the cal column as your text filter to pass the value to it. You can also hide this calc filter in the text area.

Yuxue Li said...

Could you help the issue that the calendar cannot popup?
And when I open the Edit HTML, there are a lot of auto generated texts but no warning error mentioned.

Jose Leviaguirre said...

Hello Yuxue,

The calendar might not be working because of the auto generated text when editing text area as text instead of always editing as html. Another reason might be the htmlsanitation setting not turned off (tools/admin mgr/preferenes/text area preferences/performHtmlSanitation should be set to False)

Please avoid editing text area when using javascript with jquery. For some reason, when you edit as text and not as html, it can generate undesired html code. try to always edit as html.