Simple calendar setups [popup calendar] DHTML Calendar — for the impatient This page lists some common setups for the popup calendar. In order to see how to do any of them please see the source of this page. For each example it's structured like this: there's the <form> that contains the input field, and following there is the JavaScript snippet that setups that form. An example of flat calendar is available in another page. The code in this page uses a helper function defined in "calendar-setup.js". With it you can setup the calendar in minutes. If you're not that impatient, ;-) complete documenation is available. Basic setup: one input per calendar. Clicking in the input field activates the calendar. The date format is "%m/%d/%Y %I:%M %p". The calendar defaults to "single-click mode". The example below has been updated to show you how to create "linked" fields. Basically, when some field is filled with a date, the other is updated so that the difference between them remains one week. The property useful here is "onUpdate". function catcalc(cal) { var date = cal.date; var time = date.getTime() // use the _other_ field var field = document.getElementById("f_calcdate"); if (field == cal.params.inputField) { field = document.getElementById("f_date_a"); time -= Date.WEEK; // substract one week } else { time += Date.WEEK; // add one week } var date2 = new Date(time); field.value = date2.print("%Y-%m-%d %H:%M"); } Calendar.setup({ inputField : "f_date_a", // id of the input field ifFormat : "%Y-%m-%d %H:%M", // format of the input field showsTime : true, timeFormat : "24", onUpdate : catcalc }); Calendar.setup({ inputField : "f_calcdate", ifFormat : "%Y-%m-%d %H:%M", showsTime : true, timeFormat : "24", onUpdate : catcalc }); Input field with a trigger button. Clicking the button activates the calendar. Note that this one needs double-click (singleClick parameter is explicitely set to false). Also demonstrates the "step" parameter introduced in 0.9.6 (show all years in drop-down boxes, instead of every other year as default). ... Calendar.setup({ inputField : "f_date_b", // id of the input field ifFormat : "%m/%d/%Y %I:%M %p", // format of the input field showsTime : true, // will display a time selector button : "f_trigger_b", // trigger for the calendar (button ID) singleClick : false, // double-click mode step : 1 // show all years in drop-down boxes (instead of every other year as default) }); Input field with a trigger image. Note that the Calendar.setup function doesn't care if the trigger is a button, image, or anything else. Also in this example we setup a different alignment, just to show how it's done. The input field is read-only (that is set from HTML). Calendar.setup({ inputField : "f_date_c", // id of the input field ifFormat : "%B %e, %Y", // format of the input field button : "f_trigger_c", // trigger for the calendar (button ID) align : "Tl", // alignment (defaults to "Bl") singleClick : true }); Hidden field, display area. The calendar now puts the date into 2 elements: one is an input field of type "hidden"—so that the user can't directly see or modify it— and one is a <span> element in which the date is displayed. Note that if the trigger is not specified the calendar will use the displayArea (or inputField as in the first example). The display area can have it's own format. This is useful if, for instance, we need to store one format in the database (thus pass it in the input field) but we wanna show a friendlier format to the end-user. Your birthday: Click to open date selector. Calendar.setup({ inputField : "f_date_d", // id of the input field ifFormat : "%Y/%d/%m", // format of the input field (even if hidden, this format will be honored) displayArea : "show_d", // ID of the span where the date is to be shown daFormat : "%A, %B %d, %Y",// format of the displayed date align : "Tl", // alignment (defaults to "Bl") singleClick : true }); Hidden field, display area, trigger image. Very similar to the previous example. The difference is that we also have a trigger image. Your birthday: -- not entered -- . Calendar.setup({ inputField : "f_date_e", // id of the input field ifFormat : "%Y/%d/%m", // format of the input field (even if hidden, this format will be honored) displayArea : "show_e", // ID of the span where the date is to be shown daFormat : "%A, %B %d, %Y",// format of the displayed date button : "f_trigger_e", // trigger button (well, IMG in our case) align : "Tl", // alignment (defaults to "Bl") singleClick : true }); Hidden field, display area. Very much like the previous examples, but we now disable some dates (all weekends, that is, Saturdays and Sundays). Your birthday: Click to open date selector. Calendar.setup({ inputField : "f_date_f", // id of the input field ifFormat : "%Y/%d/%m", // format of the input field (even if hidden, this format will be honored) displayArea : "show_f", // ID of the span where the date is to be shown daFormat : "%A, %B %d, %Y",// format of the displayed date align : "Tl", // alignment (defaults to "Bl") dateStatusFunc : function (date) { // disable weekend days (Saturdays == 6 and Subdays == 0) return (date.getDay() == 6 || date.getDay() == 0) ? true : false; } });