Datepicker in Javascript

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

I have created o开发者_如何学Gone using Singleton pattern, but am not satisfied.

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

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.

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

Lightweight and simple! :-)

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>