Free Date Picker : An easy plugin to add a date picker (calendar) in your web site
<!--
Free Date Picker : An easy plugin to add a date picker (calendar) in your web site
(version 0.1 : state alpha)
Copyright (C) 2004 Dany Milot
This library is free software; you can redistribute it and/or modify it under the terms
of the GNU Lesser General Public License as published by the Free Software Foundation;
either version 2.1 of the License, or (at your option) any later version.
This library is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY;
without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
See the GNU Lesser General Public License for more details.
You should have received a copy of the GNU Lesser General Public License along with this
library; if not, write to the Free Software Foundation, Inc., 59 Temple Place, Suite 330,
Boston, MA 02111-1307 USA
----------------------------------------------------------------------------------------
Look at http://sourceforge.net/projects/freedatepicker/ for updates and developpement
-->
<SCRIPT language="JavaScript" type="text/javascript">
<!--
function free_date_picker(obj_name, layer_name, text_to ,type, hide_self, language)
{
////////////////////////////////////////////////////////////////////////////////////
// IF str < lng, add leading 0 to complete the str
function leading_zeros(str, lng)
{
// param validation
if(lng == null)
lng = 2;
var str = str.toString();
while(str.length < lng)
str = '0' + str;
return str;
}
////////////////////////////////////////////////////////////////////////////////////
// Nbr days for this month
function returnDays(date)
{
var year = date.getFullYear();
var month = date.getMonth();
var days = 31;
if( month == 3 || month == 5 || month == 8 || month == 10 ){
days = 30;
}
else if(month == 1){
days = 28;
if(year % 4 == 0){
days = 29;
if(year % 100 == 0){
days = 28;
if(year % 400 == 0){
days = 29;
}
}
}
}
return(days);
}
////////////////////////////////////////////////////////////////////////////////////
// Return last month
function returnLastMonth(date)
{
var year = date.getFullYear();
var month = date.getMonth();
var dt = new Date();
month --;
if(month == -1){
month = 11;
year --;
}
dt.setYear(year);
dt.setDate(1);
dt.setMonth(month);
return dt;
}
////////////////////////////////////////////////////////////////////////////////////
// Retourne le mois suivant
function returnNextMonth(date)
{
var year = date.getFullYear();
var month = date.getMonth();
var dt = new Date();
month ++;
if(month == 12){
month = 0;
year ++;
}
dt.setYear(year);
dt.setDate(1);
dt.setMonth(month);
return dt;
}
////////////////////////////////////////////////////////////////////////////////////
// Retourne le nom du mois
function return_month_name(date)
{
switch(language){
case("en"):
var month = new Array('January', 'February', 'March', 'April', 'May', 'June',
'July', 'August', 'September', 'October', 'November', 'December');
break;
case("fr"):
default:
var month = new Array('Janvier', 'Fvrier', 'Mars', 'Avril', 'Mai', 'Juin',
'Juillet', 'Aot', 'Septembre', 'Octobre', 'Novembre', 'Dcembre');
}
return month[date.getMonth()];
}
////////////////////////////////////////////////////////////////////////////////////
this.setto = function(eng_date)
{
// input text
if(type == 1)
document.getElementById(text_to).value = eng_date;
// span, div ...
if(type == 2)
document.getElementById(text_to).innerHTML = eng_date;
}
////////////////////////////////////////////////////////////////////////////////////
this.write_calendar = function(date)
{
var nb_days_last_month = 0;
var cnt_days = 0;
var days_month = 0;
var str = new String();
var style = new String();
var next_month = new Date();
var last_month = new Date();
var today = new Date();
var date = new Date(date);
var last_year = new Date(date);
var next_year = new Date(date);
date.setDate(1); // le premier du mois
next_month = returnNextMonth(date); // le mois prcdent
last_month = returnLastMonth(date); // le mois suivant
nb_days_last_month = returnDays(last_month); // nombre jours mois prcdent
cnt_days = -date.getDay()+1; // compteur de jours, part le dimanche du dbut du mois
days_month = returnDays(date); // nombre de jours mois slectionn
str = ''; // forge la chane de caractres mettre dans la div
next_year.setYear(date.getFullYear() + 1); // anne prcdente
last_year.setYear(date.getFullYear() - 1); // anne suivante
str += '<table cellspacing="0" cellpadding="0" border="1" width="250" bgcolor="white">';
str += '<tr>';
// anne prcdente
str += ' <td colspan="1" align="left"><a href="' + "javascript:" +
obj_name + ".write_calendar('" + eval(last_year) + "')" + ';"><--</a></td>';
// mois prcdent
str += ' <td colspan="1" align="left"><a href="' + "javascript:" +
obj_name + ".write_calendar('" + eval(last_month) + "')" + '"><-</a></td>';
// libell mois anne
str += ' <td colspan="3" align="center">'
str += return_month_name(date) + ' ' + date.getFullYear();
str += ' </td>';
// mois suivant
str += ' <td colspan="1" align="right"><a href="' + "javascript:" +
obj_name + ".write_calendar('" + eval(next_month) + "')" + '">-></a></td>';
// anne suivante
str += ' <td colspan="1" align="right"><a href="' + "javascript:" +
obj_name + ".write_calendar('" + eval(next_year) + "')" + '">--></a></td>';
str += '</tr>';
// pour tous les jours du mois
var cnt_semaines = 0;
while(cnt_semaines < 6){
cnt_semaines ++;
str += ' <tr>';
for(var cnt = 0; cnt < 7; cnt++){
// mois suivant
if(cnt_days > days_month){
day = cnt_days - days_month;
month = next_month.getMonth() + 1;
year = next_month.getFullYear();
style = "font-size:10px;";
}
// mois prcdent
else if(cnt_days < 1){
day = cnt_days + nb_days_last_month;
month = last_month.getMonth() + 1;
year = last_month.getFullYear();
style = "font-size:10px;";
}
// mous slectionn
else{
var d1 = new Date();
var d2 = new Date();
d1.setMonth(date.getMonth());
d1.setYear(date.getFullYear());
d1.setDate(cnt_days);
day = cnt_days;
month = date.getMonth() + 1;
year = date.getFullYear();
// aujourd'hui ?
if(d1.getFullYear() == d2.getFullYear() && d1.getMonth() == d2.getMonth() && d1.getDate() == d2.getDate() ){
style = "font-size:18px;font-color:red";
}
else{
style = "font-size:12px;";
}
}
dstr = year + '/' + leading_zeros(month) + '/' + leading_zeros(day);
// inscrit la cellule
str += ' <td width="14%">';
str += ' <span style="' + style + '">';
str += ' <a href="javascript:' + obj_name + '.setto(\'' + dstr + '\')">';
str += day;
str += ' </a>';
str += ' </font>';
str += ' </td>';
cnt_days ++;
}
str += ' </tr>';
}
str += '</table>';
document.getElementById(layer_name).innerHTML = str;
}
this.show = function()
{
if(hide_self)
document.getElementById(layer_name).style.visibility = 'visible';
}
this.hide = function()
{
if(hide_self)
document.getElementById(layer_name).style.visibility = 'hidden';
}
////////////////////////////////////////////////////////////////////////////////////
// create layer and show calendar
document.write('<div id="' + layer_name + '" onmouseout="' + obj_name + '.hide();">...</div>');
this.write_calendar(new Date());
}
</SCRIPT>
<table border=1>
<tr>
<td width=33%>On a div</td>
<td width=33%>On an input</td>
<td width=33%>Layer</td>
</tr>
<tr>
<td><div id='aaa'> </div></td>
<td><input id='bbb'></td>
</tr>
<tr>
<td><script>var a = new free_date_picker('a', 'date_picker_a', 'aaa', 2, false, 'fr');</script></td>
<td><script>var b = new free_date_picker('b', 'date_picker_b', 'bbb', 1, false, 'en');</script></td>
</tr>
</table>
Related examples in the same category
