Datepicker in Javascript.

Question

What is the best way(pattern) to Create datepicker in Javascript.

I have created one using Singleton pattern, but am not satisfied.

Answer 1

You can just use jQuery UI Datepicker and forget about it.

Answer 2

1) Singleton Pattern

The Singleton pattern is often known as an "anti pattern", in other words only use it if absolutely necessary.

Is there a really good reason for all your calendars to use the same instance? I would guess not.

2) Javascript datepickers

I would recommend looking around for date picker libraries, or use jQuery.

Answer 3

I am a fan of http://jonathanleighton.com/projects/date-input (jQuery)

Lightweight and simple! :-)

Answer 4

CIC Kalender skript.

<script language="JavaScript" src="kalender.js"></script>

<script language="JavaScript">
var Singleton = new function Singleton() 
{
var instance = this;
var count = 0;
var result = "";
var callBack = "";
var id = "vnd";
var d = new Date();
var days = new Array('So','Mo','Di','Mi','Do','Fr','Sa');
var months = new Array('Januar', 'Februar','März','April','Mai','Juni','Juli','August','September','Oktober','November','Dezember');
var month = d.getMonth();
var date = d.getDate();
var day = d.getDay();
d.setDate(1);

var firstDay = d.getDay();
d.setDate(date);

var year = d.getFullYear();


Singleton.getInstance = function()
{
 return instance;
}

this.toString = function()
{
 return "[object Singleton]";
}

this.instanceMethod = function()
{
 alert( "instance method called!" );  
}
this.setCallBack = function(callBackFuncName) {
 callBack = callBackFuncName;
}

this.getFormattedDate =  function() {
  return  date + '.' + month + '.' +   year;
}

this.getLength = function() {


  switch(month){
     case 1:
        if ((year%4==0 && 
          year%100!=0) || 
          year%400==0)
           return 29; // leap year
        else
           return 28;
     case 3:
        return 30;
     case 5:
        return 30;
     case 8:
        return 30;
     case 10:
        return 30
     default:
        return 31;
  }

} this.setDateVariable = function() { day = d.getDay(); month = d.getMonth();

 d.setDate(1);
 firstDay = d.getDay();
 d.setDate(date);
    year = d.getFullYear();
}

this.writeCalendar = function() {

var calString = '<div id="calContainer" >';

    calString += '<table id="cal' + id + '" cellspacing="0" width="200"' + ' style="border:1px black solid;">';
    calString += '<tr><th colspan="7" class="month">' + months[month] + ' ' + year + '</th></tr>';

  /*
   * Row containing days of the week.
   */

   calString += '<tr>';
   for( var i = 0; i < days.length; i++ )   {
     calString += '<th class="dayHeader">' + days[i] + '</th>';
   }
   calString += '</tr>';

  /*
   * Body of the Calendar.
   */
  calString += '<tr>';

  for(var j = 0; j < 42; j++ ) {
     var displayNum = (j-firstDay+1);
     if( j < firstDay ) {
        calString += '<td class="empty"></td>';
     } else if ( displayNum == date ) {

        calString += '<td id="' + id + 
      'selected" class="date" ' +  
      'onClick="Singleton.getInstance().changeDate(this,\'' + 
             id + '\')">' + displayNum + '</td>';

     } else if ( displayNum > length ) {

        calString += '<td>&nbsp;</td>';

     } else if(displayNum <= date) {

        calString += '<td id="" class="days" ' + 
                id + '\')">' + displayNum + '</td>';
     }
 else {

        calString += '<td id="" class="days" ' + 
               'onClick="Singleton.getInstance().changeDate(this,\'' + 
                id + '\')">' + displayNum + '</td>';
     }

     if(j%7==6){

        calString += '</tr><tr>';

     }
  }
  /*
   * close the last number row
   */ 
    calString += '</tr>';


 /*
  * the nav row
  */

    calString += '<tr>';
    calString += '<td class="nav" ' + 
           'style="text-decoration:underline;"' +  
           ' onClick="Singleton.getInstance().changeMonth(-12,\'' + id + 
           '\')">&lt;</td>';

    calString += '<td class="nav" ' + 
           'onClick="Singleton.getInstance().changeMonth(-1,\'' + id + 
           '\')">&lt;</td>';

    calString += '<td class="month" ' +  
           'colspan="3">&nbsp;</td>';

    calString += '<td class="nav"' +  
          ' onClick="Singleton.getInstance().changeMonth(1,\'' + id + 
             '\')">&gt;</td>';

    calString += '<td class="nav" ' + 
           'style="text-decoration:underline;text-' +
           'align:right;" onClick="Singleton.getInstance().changeMonth(12,\'' + 
            id + '\')">&gt;</td>';

    calString += '</tr>';

    calString += '</table>';

    calString += '</div>';

 result = calString;

  return calString;

}

this.changeDate = function(td) { var oDiv = document.getElementById(id + "selected"); oDiv.className = "days"; oDiv.id = "";

 td.className = id + "selected";
 td.id = id + "selected";
 date = parseInt(td.innerHTML);

 // Create new Date object.
 selected_date = new Date();


 selected_date.setDate(date);
 selected_date.setMonth(month);
 selected_date.setYear(year);

 callBack(selected_date);

}

this.changeMonth = function(mo) {
  d.setMonth(d.getMonth() + mo);
  this.setDateVariable();
 document.getElementById("vnd").innerHTML = this.writeCalendar();
}

Singleton.staticMethod = function()
{
 count = count+1;
 alert( "static method called!" + count);
}

var length = this.getLength();

return Singleton;
}


function init() {
 Singleton.getInstance().setCallBack(setDates);

 document.getElementById("vnd").innerHTML = Singleton.getInstance().writeCalendar();
}
function setDates(date) {
 //alert(date);
}

<div id="vnd" style="font-family: Calibri, Verdana">This is a Date DIV</div>