Datepicker в Javascript

Question

Каков наилучший способ (шаблон) для создания указателя даты в Javascript.

Я создал один с использованием шаблона Singleton, но не удовлетворен.

Answer 1

Вы можете просто использовать jQuery UI Datepicker и забыть об этом.

Answer 2

1) синглтон

Шаблон Singleton часто называют «анти-шаблоном», другими словами, используйте его только в случае крайней необходимости.

Есть ли действительно веская причина для всех ваших календарей использовать один и тот же экземпляр? Я бы не догадался.

2) Выбор даты в Javascript

Я бы порекомендовал поискать библиотеки выбора даты или использовать jQuery.

Answer 3

CIC Kalender, скрипт.

<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>

Answer 4

Я фанат http://jonathanleighton.com/projects/date-input (jQuery)

Легкий и простой! : -)