The code below is something I whipped up really quick to automatically attach the floating scal sample to input fields with a specific class. I did test it for basic working functionality in FF3 mac, Safari mac, FF3 windows xp, IE7 windows xp, IE6 windows xp. I can't say anything except that I got the datebox to automatically add the calendar icon and when I clicked around a bit it seemed to work properly.

@NOTE TO MODERATOR: This is a re-post of my post a minute ago... I thought I was logged in but I wasn't so the post didn't get associated with my account. I also forgot to mention that if you would like a more neatly written version of this to include as a sample or to add as a feature then please let me know and I'll be happy to help.

I've wrapped this code inside an enclosure to prevent pollution of the global namespace so even though the code itself is quick and dirty, you won't have to worry about it conflicting with your code. Save the JavaScript code as "datebox.js".

You'll need a little calendar icon (16 x 16). I used the "calendar.png" icon from the http:://famfamfam.com set of icons, which are free and look good too.

You'll also need the modified CSS document which is below the JavaScript code block. I updated a few of the class and ID values used so that they are less likely to conflict with your own code. Save the CSS as "datebox.css".

The directory tree should look like this once you've saved everything together:

/datebox/datebox.js
/datebox/datebox.css
/datebox/calendar.png
/datebox/prototype.js
/datebox/scriptaculous.js
/datebox/builder.js
/datebox/effect.js
/datebox/dragdrop.js
/datebox/scal.js

All you have to do then is place the following tags somewhere in the

Shameless plug: If you work with PHP and want to be able to use PHP functions in JavaScript then check out http://phpjs.org

[CODE]
// JavaScript Document

/* Use an enclosure so we don't pollute the global namespace. */
(function() {

/* We only want one instance of the calendar. */
var proto_datebox = null;

/* The image that should be displayed in the datebox to show that it is a calendar widget */
var img_url = 'calendar.png';
var datebox_css_url = 'datebox.css';
var draghandle = 'datebox-rtop';

var dateboxDivCode = "" +
" " +
" " +
" " +
" " +
" " +
" " +
" " +
"";

/* Extend the scal calendar class */
Object.extend(scal.prototype, {
toggleCalendar: function() {
var element = $(this.options.wrapper) || this.element;
this.options[element.visible() ? 'onclose' : 'onopen'](element);
this.options[element.visible() ? 'closeeffect' : 'openeffect'](element, {duration: 0.1});
},
isOpen: function() {
return ( $(this.options.wrapper) || this.element).visible();
}
});

// @param element => is the where the calender will be rendered by Scal.
// @param input => is the where the date will be updated.
// @param container => is the for dragging.
// @param source => is the img/button which raises up the calender, the script will locate the calenar over this control.
function dateboxRender(element, input, container, source, draghandle) {
if (!proto_datebox) {
container = $(container);
if(draghandle) {
new Draggable(container, {handle: draghandle, starteffect: Prototype.emptyFunction, endeffect: Prototype.emptyFunction});
}

// The singleton calendar is created.
proto_datebox = new scal(element, $(input), {
updateformat: 'mm/dd/yyyy',
closebutton: ' ',
wrapper: container
});
}
else {
proto_datebox.updateelement = $(input);
}
var date = new Date($F(input));
proto_datebox.setCurrentDate(isNaN(date) ? new Date() : date);

// Locates the calendar over the calling control (in this example the "img").
if (source = $(source)) {
Position.clone($(source), container, {setWidth: false, setHeight: false, offsetLeft: source.getWidth() + 2});
}
// Show the calendar =)
proto_datebox.openCalendar();
};

Event.observe(window, "load", function(onload_event) {
$$('body')[0].insert(dateboxDivCode);
var stylesheet = Builder.node('link', {
rel: 'stylesheet',
type: 'text/css',
href: datebox_css_url
});
$$('head')[0].appendChild(stylesheet);
//$$('head').invoke('insert', "");
$$('input.datebox').invoke('createDateBox');
/*Event.observe("imgStartDate", "click", imgCalendar_Click.bindAsEventListener(this, "startDate"));
Event.observe("imgEndDate", "click", imgCalendar_Click.bindAsEventListener(this, "endDate"));
Event.observe("imgAnotherDate", "click", imgCalendar_Click.bindAsEventListener(this, "anotherDate"));
Event.observe("imgOneMore", "click", imgCalendar_Click.bindAsEventListener(this, "oneMore"));*/
});

var dateboxExtensionToPrototype = {
createDateBox: function(el) {
el.setStyle({
background: 'url(' + img_url + ') no-repeat right'
});
Event.observe(el, "click", dateboxDisplayCalendar.bindAsEventListener(this, el));
}
}

function dateboxDisplayCalendar(click_event, el) {
dateboxRender("datebox-calendar", el, "datebox-calendar-container", Event.element(click_event), draghandle);
}

/* Add the createDateBox function to the Element prototype */
Element.addMethods(dateboxExtensionToPrototype);

/* End enclosure */
})();
[/CODE]

[CSS]

/*to get round corners*/
span.datebox-rtop{display:block;background: transparent;}
span.datebox-rtop span{display:block;height: 1px; overflow: hidden; background: #608294}
span.datebox-r1{margin: 0 5px}
span.datebox-r2{margin: 0 3px}
span.datebox-r3{margin: 0 2px}
span.datebox-rtop span.r4{margin: 0 1px;height: 2px}

/*Styles for date picker*/

.datebox-floating{
background-color: White;
margin:0px;
border:1px solid #bfcdd4;
font-family: Arial;
font-size:12px;
width:219px; /* cellwidth * 7 + cellpadding * 14 + cellborder * 14 */
display:block;
padding:0px;
min-height:175px;
}
.datebox-floating:hover{
cursor:pointer;
/*cursor:hand; /* If you're worried about old IE versions, turn this on. I have it off because I hate seeing css exceptions in my debug window. ;) */
}
.datebox-floating .calwrapper{
display:block;
}
.datebox-floating .calweekswrapper{
display:block;
border: solid 1px White;
}
.datebox-floating .calheader{
display: block;
width:100%;
text-align:center;
color:#CF6228;
font-size:13px;
font-weight: bold;
background-color: #EEF3F6;
padding-bottom: 2px;
}
.datebox-floating .caltitle{
width:auto;
margin-left:auto;
margin-right:auto;
text-align:center;
}
.datebox-floating .calcontrol{
font-weight: bold;
width:20px;
background: transparent no-repeat center center;
}

.datebox-floating .calcontrol:hover{
}
.datebox-floating .calclose{
float:right;
display:block;
background-image: url(img/close.jpg);
}
.datebox-floating .calprevmonth{
float:left;
/*background-image: url(images/calendar/month-previous.jpg);*/
}
.datebox-floating .calnextmonth{
float:right;
/*background-image: url(images/calendar/month-next.jpg);*/
}
.datebox-floating .calnextyear{
float:right;
/*background-image: url(images/calendar/year-next.jpg);*/
}
.datebox-floating .calprevyear{
float:left;
/*background-image: url(images/calendar/year-previous.jpg);*/
}
.datebox-floating .daybox{
float:left;
background-color: white;
border:1px solid white;
width:25px;
padding:2px;
color:black;
text-align:center;
}
.datebox-floating .dayboxvalue{
display: none;
}
.datebox-floating .dayboxname{
border: 1px solid #EEF3F6;
background-color: #EEF3F6;
color:#6190AA;
}
.datebox-floating .dayboxsunday{
background-color: White;
border: 1px solid White;
}
.datebox-floating .dayboxsaturday{
background-color: White;
border: 1px solid White;
}
.datebox-floating .daybox:hover{
}
.datebox-floating .dayboxname:hover{
}
.datebox-floating .dayinmonth{
color:#6190AA;
}
.datebox-floating .dayoutmonth{
color:gray;
}
.datebox-floating .dayselected{
background-color: #CF6228;
color: White;
}
.datebox-floating .daycurrent{
border:1px solid #e8eef7;
}
.datebox-floating .weekbox{
width:100%;
min-height:21px;
display:block;
margin-top:3px;
background-color: #EEF3F6;
}
.datebox-floating .endweek{
float:left;
}
.datebox-floating .weekboxname{
background-color: #EEF3F6;
}
[/CSS]

Posted by: Michael White
Website: http://getsprink.com