.gif)
html
Date1: <span id='dt1'><SpotfireControl id='Inpu7C0n7r01...'/></span>
<span id='dt1picker'></span>
Date2: <span id='dt2'><SpotfireControl id='Inpu7C0n7r02...'/></span>
<span id='dt2picker'></span>
//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})
20 comments:
Hi,
Thanks for the script .. it works well except .. after selecting dates they show as expected i the 2 input boxes, if i then switch tabs in spotfire and then come back the the tab with the date boxes.. the dates are no longer shown ..
The properties still hold the correct dates but i really want the actual values to still show .. any ideas ?
Thanks
A document property should do the trick. You will need to set and extract the value from your document property. To extract the value once the doc prop is set, you can do:
html
<div id='docPropDate1' style='display:none'><your-SpotfireControl-label-here/></div>
script
$("#docPropDate1").innerText()
to set a doc property, look at this: http://spotfired.blogspot.com/2014/09/passing-javascript-values-to-document.html
I am still unable to get the selected dates to show once you switch back and forth between tabs.
Isaac,
The nature of this one in particular snippet is that, every time you switch back to the tabs with the popup calendars, all the settings that were applied through javascript or after interacting with the calendar will be reset, unless you tweak this script and add some logic to start the dates from the document property.
This happens because when the page gets refreshed, the javascript that renders the calendars runs. You need to tweak the script to have the initial popup calendars have the date you want. In this case, the value of your document properties.
I'll try to find some time to enhance this snippet.
Isaac, I've updated the script to retain the value. I added two (hidden) Label Property Controls in html and pass such values when creating the date pickers in js
This code works perfectly for me. Initially when we implement this code, it is light weight. But after implementation when we click on calendar icon to show calendar. Javascript dynamically generates calendar which also generates dynamic HTML to showcase calendar. But after selection of that date, the code created by the calendar does not get erased. Is there any way of doing that?
Hello Vaibhav,
Yes, after implementing the calendar or any other jquery/javascript widgets that generates html code, make sure to always edit textarea as html to preserve your original and clean html code.
Jose
Thanks for the information Jose. But is there any other way to control this behaviour if I can't restrict the people from using edit text area as html option after implementing jquery/javascript widgets.
One way is making the analysis read only, but might not be what you are looking for, Vaibhav.
Another option is to create an extension using the SDK but this will be my last resource. I would put something in the documentation or a comment on how to properly use the html area.
An idea is to put another text area for users to edit and perhaps use a bookmark to revert back the text area where the popup calendar is.
There might be another way as to opening a new browser window with the window.open and control the child window from its parent, but my efforts have not succeeded yet.
Let us know if you thought or find a work around. Perhaps latest Spotfire version no longer has these issues.
Hi Jose,
I tried to re-use the exact same JS code and HTML keeping the name of the input field property control also same i.e "date 1" and "date2" respectively.
Still the script does not update the document property when I go and check back the value via Edit>>Document Properties
Is there something that I'm missing in this?
Mritunjay Kumar,
You have to tweak the code. If you use the exact same code it will not work.
In this example, the first two Property Controls are labels (for display purposes) pointing to docProp1 and docProp2 of type string or date. The second set of Property Controls should be Input fields pointing to docProp1 and docProp2 respectively.
1. Create two spotfire document properties called dp1 and dp2
2. Replace with your label property controls pointing to dp1 and dp2
3. Replace with your input controls pointing to dp1 and dp2 respectively.
the code should look similar to the follwing code, but with different SpotfireControl id's:
Date1:
Date2:
4. Insert a javascript without any modification and it should work
5. Make sure you don't edit the text area as text, but as html
6. If this does not work, check with your admin if your html sanitizing is off
7. Note: i can't put 'div' or 'span' tags on blogger's comments, so i placed them as '' and ''
the html in my previous comment did not go through. I represent the as (tags)
Date1: (span id='dt1')(SpotfireControl id="15b0d472d52447e0bf421ecafdab0bfd" /)(/span)
(span id='dt1picker')(/span)
Date2: (span id='dt2')(SpotfireControl id="f1ddb7d1695845568d4c5654185c271a" /)(/span)
(span id='dt2picker')(/span)
Jose - Just wanted to thank you for this post, it helped me quite a bit.
Of course, Spotfire is crashing when I try to use the properties to limit data with in-database connections, but I seem to be crashing Spotfire a lot nowadays as I convert from info links to in-db.
Thanks again for the clear & helpful post!
- rlm
You are welcome Russell. This is an old post and I don't know why it crashes a lot. Is my script the root cause? Does Spotfire crashes if you use a regular document property with the in-db connection?
I doubt it's your script - more likely a data-type issue. The dt1/2 are date-types and I'm thinking that it may be the cause of the crash in the data limiting. I have one text property being used in the data limiting now and it works fine. I'm adding this as "and [field] >= '${dt1}'" (with and without the quotes) and it crashes.
I wasn't implying to lay it on your shoulders, I really just wanted to make sure you knew that your code was still helping folks out.
Thanks
- rlm
great! Thanks for sharing Russ
Hi,
Firts of all, thank you for the help in advance.
I have 2 calendars configured with range properties in the document, I need to update the second calendar and automatically select one more day than the one selected in the first calendar.
For example, if in the first calendar I select 31/01/2022 the 2nd calendar should select 01/02/2022. Would it be possible?
format date (dd/mm/yy)
Hello Andres, thanks for your comment. Did you try this new way of creating calendars? https://community.tibco.com/wiki/date-and-time-pickers. If not, it should be possible with a little javascript. You might also like the date range expressions. I will be converting this answer in a full post:
https://community.tibco.com/questions/how-create-wtd-mtd-ytd-all-date-filter-buttons
Hello,
thank you for the update it works well! i only have an issue with showing the chosen date, after selecting it shows the date in the input field for one second and then overwrites 'mm/dd/yyyy'in the input field. this issue is when the document property type is a date.
thank you in advance.
Hello Unknown,
Try this approach
https://spotfired.blogspot.com/2014/05/popup-calendar-webplayer-compatible.html
Post a Comment