Customer Banners (Ads) - SpiceUp. AX and SpotfireX Disclaimer



If you find this site useful and you want to support, buy me a coffee   to keep this site alive and without ads.

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. 

DataTypeFormat 
Dateyyyy-MM-dd 
TimeHH:mm 
DateTimeyyyy-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

36 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.

Jose 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.

Unknown 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"

Jose 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.

Jose Leviaguirre said...

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

Unknown said...

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

Jose 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 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!!

Unknown 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

Unknown 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

Unknown 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!

Unknown 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.

Unknown said...

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

Unknown 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.

Unknown 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.

Milan said...

Hi Jose,

How to get the default date as current date in above code?

Thanks,
Milan

Jose Leviaguirre said...

Hello Milan,

I am not sure what you mean exactly, but here is the jQuery Datepicker API https://jqueryui.com/datepicker/

If you want the current date to be the starting point of your document property (because the date picker is just a friendly way to enter dates onto your document property) I would run a data function to populate such doc prop whit current date, or using a javascript function when the page loads:

today = Intl.DateTimeFormat(['en', 'us']).format()
$('#dt1 input').val(today)

Anil said...

Hi Jose,

Thanks for above code. when users accessing the report from Poland, when they pick date from calendar, in dt1picker it is displaying wrong value and the report is not working as excepted. but it is working fine if, they enter date manually into dt1picker box. so why it is not working when we pick from calendar for that country. it is working fine for me, which i resides in UK.

Jose Leviaguirre said...

Hello Anil

I guess its related to the locale or the format the date is entered from the calendar, but check jquery datepicker documentation to see what is going on. In some countries dates are entered as month/day/year and in others is day/month/year

Divyashree said...

Hi, I want to embed a calendar image in spotfire and then use it rather than using an external link.
Could you suggest me how to achieve this.

Thanks,
Divya

Jose Leviaguirre said...

Hello Diva,

I like to convert small images to SVG. There are many online tools for that. Since the image is text based, you can add the code in your html

João said...

Hi! I was able to use the HTML5 version using id="date", and using a different id for each date picker that I need. And adding them in JS too. Couldn't use it as class="date". Anyone know what I'm doing wrong? Not having to had a different id to the JS would be nice ;)

Jose Leviaguirre said...

Hello Joao. I am glad you were able to make it work. Try using other class name different than "date". It might be a reserved word.

João said...

Hello again Jose! Using a different name worked! Thank you very much!

Best regards!