Hey kids,
I implemented Pratik's datePicker.js this week and ran into some issues. Thought I'd share what I learned with my DevNet community.
Mainly, the JavaScript that you include needs quite a few things not mentioned in the documentation for datePicker.js. You need a pointer to the iFrame that contains the DCT, a way to include the CSS (because DCTs don't let you use the <link ... /> tag, and a couple of jquery calls. I've included my try/catch block because that's a GREAT way to help you figure out what's borking your code. You can always remove that later.
here's the javascript i used for these parts:
<script src="/iw/datepicker/jquery.min.js" language="javascript" ></script>
<script src="/iw/datepicker/jquery.datePicker.js" language="javascript" ></script>
<script language="javascript">
<![CDATA[
function localInit()
{
try{
//get forms pub iframe and document into which to insert jquery events and styles
var formframedocument = window.top.formframe.document;
// insert datePicker css since DCT doesn't allow stylesheet link html
var $head = $(formframedocument).contents().find("head");
$head.append($("<link/>",
{ rel: "stylesheet", href: "http://auramart/iw/datepicker/datePicker.css", type: "text/css" }));
// get date field from DCT and set to readonly to avoid manual input
var golive_dateIWItem = IWDatacapture.getItem("/content/golive_date");
golive_dateIWItem.setReadOnly(true);
// easy variable to store input for later access
var golive_dateInput = $(formframedocument).find("input[name='product/Publishing/coming_date']");
// initialize datePicker on the date field(s)
golive_dateInput.datePicker();
// bind datePicker toggle command to focus event of the date field
golive_dateInput.focus(function() {
$(this).datePicker({command: 'toggle'});
});
}catch(e){
alert(e);
}
}
IWEventRegistry.addFormHandler("onFormInit", localInit);
]]>
</script>
Hope you find that helpful.