Please excuse my bad english!:
DatePicker for Lotus Notes Databases
Create a new form (DatePicker-form).
Copy the HTML/JavaScript DatePicker in the form(DatePicker-form):
<tr>
<td align=left colspan="2" class="Title">Put here text in popup window, first line<br><br></td>
</tr>
<tr>
<td colspan=4 class="dayName">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<table border="0">
<tr>
<td>
<select name="tbSelMonth" onChange='fUpdateCal(_dlgDatePicker.tbSelYear.value, _dlgDatePicker.tbSelMonth.value)' class="pullDown">
<option value="1">Januar</option>
<option value="2">Februar</option>
<option value="3">März</option>
<option value="4">April</option>
<option value="5">Mai</option>
<option value="6">Juni</option>
<option value="7">Juli</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">Oktober</option>
<option value="11">November</option>
<option value="12">Dezember</option>
</select>
</td>
<td>
<div align="right">
<select name="tbSelYear" onChange='fUpdateCal(_dlgDatePicker.tbSelYear.value, _dlgDatePicker.tbSelMonth.value)' class="pullDown">
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2010">2011</option>
<option value="2010">2012</option>
<option value="2010">2013</option>
<option value="2010">2014</option>
<option value="2010">2015</option>
<option value="2010">2016</option>
<option value="2010">2017</option>
<option value="2010">2018</option>
<option value="2010">2019</option>
<option value="2010">2020</option>
</select>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<script language="JavaScript">
var dCurDate = new Date();
fDrawCal(dCurDate.getFullYear(), dCurDate.getMonth()+1, 30, 30, 1);
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<div align="center" class="dayName">Put in here a button calling “Today”,to set the date of this day in the datefield on your form, where you use the DatePicker.Make it “onClick” event JavaScript : todayClick(); </div>
</td>
<td>
<div align="right">Put in here a button calling “OK” and set it “onClick” event JavaScript : okClick(); Also put in here also a button calling “Cancel” and set it “onClick” event JavaScript : cancelClick(); </div>
</td>
</tr>
Put in the window title of this form “ Choose a date please” (DatePicker-form).
Put in Notes objekt HTML-Head-Content of this form the CSS content and format for your needs(DatePicker-form):
“<STYLE TYPE="text/css"> BODY {background : rgb(255,255,255) } .divContent { position:absolute; left:10; top:10; z-index:2 } .clsDateOff{ color: #FFFFFF; font-weight: bold; padding: 0 3; tab-index: 0; border: solid #CBCFE0 2px; cursor: Hand } .Title { font: normal 8pt Verdana, Arial, Helvetica, sans-serif; color: #212d72; } INPUT, SELECT, TEXTAREA{ color: #212d72; font : normal 8pt Verdana, Helvetica, Arial; background : #EAEBF2; } .dayName { font-family:Verdana, Arial; font-size:12px; font-weight: normal; color: #212d72 } .dayNumber { font-family:Verdana, Arial; font-size:x-small; font-weight: normal; color: #212d72; } ”
Put in Notes objekt JS Header of this form and format for your needs (DatePicker-form):
var dDate = new Date();
var dCurMonth = dDate.getMonth();
var dCurDayOfMonth = dDate.getDate();
var dCurYear = dDate.getFullYear();
var objPrevElement = new Object();
function okClick(){
frm=document.forms[0];
if(frm.calSelectedDate.value!=''){
window.dialogArguments.retDay=frm.calSelectedDate.value;
window.dialogArguments.retMonth=frm.tbSelMonth.value;
window.dialogArguments.retYear=frm.tbSelYear.value;
window.returnValue=true;
window.close();
}else{
alert('You need to choose a date before confirming !');
}
}
function cancelClick(){
window.returnValue=false;
window.close();
}
function todayClick(){
frm=document.forms[0];
var dToday = new Date();
window.dialogArguments.retDay=dToday.getDate();
window.dialogArguments.retMonth=dToday.getMonth()+1;
window.dialogArguments.retYear=dToday.getYear();
window.returnValue=true;
window.close();
}
function fToggleColor(myElement) {
var toggleColor = “#000000”;
if (myElement.id == “calDateText”) {
if (myElement.color == toggleColor) {
myElement.color = "";
} else {
myElement.color = toggleColor;
}
} else if (myElement.id == “calCell”) {
for (var i in myElement.children) {
if (myElement.children[i].id == "calDateText") {
if (myElement.children[i].color == toggleColor) {
myElement.children[i].color = "";
} else {
myElement.children[i].color = toggleColor;
}
}
}
}
}
function fSetSelectedDay(myElement){
if (myElement.id == “calCell”) {
if (!isNaN(parseInt(myElement.children["calDateText"].innerText))) {
myElement.bgColor = "#cccccc";
objPrevElement.bgColor = "";
document.all.calSelectedDate.value = parseInt(myElement.children["calDateText"].innerText);
objPrevElement = myElement;
}
}
}
function fGetDaysInMonth(iMonth, iYear) {
var dPrevDate = new Date(iYear, iMonth, 0);
return dPrevDate.getDate();
}
function fBuildCal(iYear, iMonth, iDayStyle) {
var aMonth = new Array();
aMonth[0] = new Array(7);
aMonth[1] = new Array(7);
aMonth[2] = new Array(7);
aMonth[3] = new Array(7);
aMonth[4] = new Array(7);
aMonth[5] = new Array(7);
aMonth[6] = new Array(7);
var dCalDate = new Date(iYear, iMonth-1, 1);
var iDayOfFirst = dCalDate.getDay();
var iDaysInMonth = fGetDaysInMonth(iMonth, iYear);
var iVarDate = 1;
var i, d, w;
if (iDayStyle == 2) {
aMonth[0][0] = “Sonntag”;
aMonth[0][1] = “Montag”;
aMonth[0][2] = “Dienstag”;
aMonth[0][3] = “Mittwoch”;
aMonth[0][4] = “Donnerstag”;
aMonth[0][5] = “Freitag”;
aMonth[0][6] = “Samstag”;
} else if (iDayStyle == 1) {
aMonth[0][0] = “So”;
aMonth[0][1] = “Mo”;
aMonth[0][2] = “Di”;
aMonth[0][3] = “Mi”;
aMonth[0][4] = “Do”;
aMonth[0][5] = “Fr”;
aMonth[0][6] = “Sa”;
} else {
aMonth[0][0] = “So”;
aMonth[0][1] = “Mo”;
aMonth[0][2] = “Di”;
aMonth[0][3] = “Mi”;
aMonth[0][4] = “Do”;
aMonth[0][5] = “Fr”;
aMonth[0][6] = “Sa”;
}
for (d = iDayOfFirst; d < 7; d++) {
aMonth[1][d] = iVarDate;
iVarDate++;
}
for (w = 2; w < 7; w++) {
for (d = 0; d < 7; d++) {
if (iVarDate <= iDaysInMonth) {
aMonth[w][d] = iVarDate;
iVarDate++;
}
}
}
return aMonth;
}
function fDrawCal(iYear, iMonth, iCellWidth, iCellHeight, iDayStyle) {
var myMonth;
myMonth = fBuildCal(iYear, iMonth, iDayStyle);
document.write(“
”)document.write(“
”);document.write(“
”);document.write(“
”);document.write(“
”);document.write(“
”);document.write(“
”);document.write(“
”);document.write(“
”);document.write(“
”);for (w = 1; w < 7; w++) {
document.write(“
”)for (d = 0; d < 7; d++) {
document.write(“
”)}
document.write(“
”);}
document.write(“
| ” + myMonth[0][0] + “ | ” + myMonth[0][1] + “ | ” + myMonth[0][2] + “ | ” + myMonth[0][3] + “ | ” + myMonth[0][4] + “ | ” + myMonth[0][5] + “ | ” + myMonth[0][6] + “ |
| ”);
if (!isNaN(myMonth[w][d])) { document.write(“” + myMonth[w][d] + “”); } else { document.write(“ ”); } document.write(“ |
}
function fUpdateCal(iYear, iMonth) {
myMonth = fBuildCal(iYear, iMonth);
objPrevElement.bgColor = “”;
document.all.calSelectedDate.value = “”;
for (w = 1; w < 7; w++) {
for (d = 0; d < 7; d++) {
if (!isNaN(myMonth[w][d])) {
calDateText[((7*w)+d)-7].innerText = myMonth[w][d];
} else {
calDateText[((7*w)+d)-7].innerText = “”;
}
}
}
}
Call this DatePicker in another form:
Copy this in the beginning of the form (Call-form):
<input name=“DateFormat” value=""Create a field between these quotation marks called DateFormat, make it as text and computed for display " type=“hidden”>
Mark the whole tag as pass-through HTML and “Hide When” for Notes and web.
Copy this formula as “Default value” for the field:
@ReplaceSubstring(@Text(@Date(2000; 12; 31); “D0S0”); “31” : “12” : “2000”; “dd” : “mm” : “yyyy”)
Create a date field on this form (Call-form) and call it “Date”, make it date/time-type an editable.
Create beneath a little calendar icon (image ressource) and give it an action hotspot with this JavaScript in the “onClick event” of the picture:
openDatePickerDialog(window, document.forms[0].Date, document.forms[0].DateFormat.value)
Ready to start ! Hope it helps somebody
Barbara