Free Date Picker : Calendar : GUI Components JAVASCRIPT DHTML TUTORIALS


JAVASCRIPT DHTML TUTORIALS » GUI Components » Calendar »

 

Free Date Picker




<!--
Free Date Picker : An easy plugin to add a date picker (calendarin your web site
(version 0.1 : state alpha)
Copyright (C2004   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 optionany 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;

    ifmonth == || month == || month == || month == 10 ){
      days = 30;
    }
    else if(month == 1){
      days = 28;

      if(year % == 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', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 
          'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre');
    }

    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 précédent
    last_month = returnLastMonth(date);        // le mois suivant
    nb_days_last_month = returnDays(last_month);  // nombre jours mois précédent
    cnt_days = -date.getDay()+1;          // compteur de jours, part le dimanche du début du mois
    days_month = returnDays(date);          // nombre de jours mois sélectionné
    str = '';                    // forge la chaîne de caractères à mettre dans la div

    next_year.setYear(date.getFullYear() 1);    // année précédente
    last_year.setYear(date.getFullYear() 1);    // année suivante


    str += '<table cellspacing="0" cellpadding="0" border="1" width="250" bgcolor="white">';

    str += '<tr>';

    // année précédente
    str += ' <td colspan="1" align="left"><a href="' + "javascript:" + 
      obj_name + ".write_calendar('" + eval(last_year"')" ';"><--</a></td>';
    // mois précédent
    str += ' <td colspan="1" align="left"><a href="' + "javascript:" + 
      obj_name + ".write_calendar('" + eval(last_month"')" '"><-</a></td>';

    // libellé mois année
    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>';
    // année 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 précédent
        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 sélectionné
        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'>&nbsp;</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>



           
       



-

Leave a Comment / Note


 
Verification is used to prevent unwanted posts (spam). .

Follow Navioo On Twitter

JAVASCRIPT DHTML TUTORIALS

 Navioo GUI Components
» Calendar