SpinEdit in HTML-Code

[zappel]

Hallo!

In Delphi gibt es ja den "SpinEdit". Gut geeignet, um z.B. schnell die Jahreszahl in einem Kalender zu ändern. Nun brauche ich eine Komponente, die gleich aufgebaut ist, in HTML. Habe schon alles Mögliche bei google eingegeben, aber bis jetzt nichts Vergleichbares gefunden.

Gibt es den "SpinEdit" in HTML?
Oder kann mir jemand sagen, wie ich das realisieren kann?

[Marcel Gascoyne]

Du musst die Funktionalität mit JavaScript selber programmieren: Button mit Ereignis versehen und neues Fenster erzeugen; in diesem Fenster den Kalender zeichnen; Bei Datumsauswahl Ergebnis in das Formularfeld übernehmen.

Oder Du lädst Dir einfach einen fertigen Kalender herunter und baust diesen in Deine Seite ein, z.b. von Hotscripts.

Gruß,
Marcel

[gothic_mike]

Zitat von zappel:

Hallo!

In Delphi gibt es ja den "SpinEdit". Gut geeignet, um z.B. schnell die Jahreszahl in einem Kalender zu ändern. Nun brauche ich eine Komponente, die gleich aufgebaut ist, in HTML. Habe schon alles Mögliche bei google eingegeben, aber bis jetzt nichts Vergleichbares gefunden.

Gibt es den "SpinEdit" in HTML?
Oder kann mir jemand sagen, wie ich das realisieren kann?

hmm, sowei ich weis gibt es sowas nicht in HTML.
du könntest aber neben einem normalen Edit zwei buttons (images) anbringen,
die bei klick ein javascript aufrufen, was den wert im Edit entsprechend ändert...

[zappel]

Danke für die schnellen Antworten!

Ich habe schon selber einen Kalender in PHP programmiert. Ich brauche nur noch eine elegante Lösung, wie bequem das Jahr gewechselt werden kann. SpinEdit wäre geeignet, gibt es aber wohl in HTML nicht.
Dann muss ich mir wohl eine Alternative einfallen lassen.

[SubData]

Code:

/*
  Kalender by rp @ ZI-Zeitsysteme
  More Infos: [url]http://cover-of-darkness.de[/url]
  This notice must stay intact for use!
*/
var ns4 = document.layers;
var ie4 = document.all;
var ns6 = document.getElementById&&!document.all
var isVisible = false;
var currentdate, datefield, futureonly;
var Months   = new Array("Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember");
var Days     = new Array("Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag", "Sonntag");
var DayShort = new Array("So", "Mo", "Di", "Mi", "Do", "Fr", "Sa", "So");
var InitD, InitM, InitY;
var posx, posy;
var wDay = 0;

function Init()
{
 if(document.layers)
 {
  document.captureEvents(Event.MOUSEMOVE);
  document.onmousemove=MouseMoved;
 }
 else
 {
  document.body.onmousemove=MouseMoved;
 }
}

function MouseMoved(MouseEvent)
{
 posy=(document.layers)?MouseEvent.pageY-(window.pageYOffset):event.y;
 posx=(document.layers)?MouseEvent.pageX-(window.pageXOffset):event.x;
}



function PickDate(date)
{
 InitD = date; InitM++;
 if (InitD < 10){ InitD = '0' + InitD; }
 if (InitM < 10){ InitM = '0' + InitM; }
 document.getElementsByName(datefield)[0].value = InitD + '.' + InitM + '.' + InitY;
 HideCalendar();
}

function FirstDay(day)
{
  var yy=day.getFullYear(), mm=day.getMonth();
  var fd=new Date(yy,mm,1);
  return fd.getDay();
}


function LastDay(day)
{
  var yy=day.getFullYear(), mm=day.getMonth();
  for (var i=31; i>=28; i--)
  {
    var nd=new Date(yy,mm,i);
    if (mm == nd.getMonth())
    {
      return i;
    }
  }
}

function ChangeYear(mod)
{
 if (mod ==  1){ InitY++; }
 if (mod == -1){ InitY--; }
 InitX    = new Date(InitY, InitM, InitD);
 RedrawCalendar();
}

function ChangeMonth(mod)
{
 InitM = InitM + mod;
 if (InitM > 11){ InitM = 0; InitY++; }
 if (InitM < 0 ){ InitM = 11; InitY--; }
 InitX    = new Date(InitY, InitM, InitD);
 RedrawCalendar();
}

function RedrawCalendar()
{
 var Calendar = CalHeader() + CalTable() + CalFooter();
 document.all.FloatingKalender.innerHTML = Calendar;
}


function ShowCalendar(field, futureflag)
{
 if (futureflag) { futureonly = true; }
 if (isVisible) { HideCalendar(); }
 if (ie4)
 {
  DateArray = document.getElementsByName(field)[0].value.split(".");
  currentdate = new Date(DateArray[2], DateArray[1] - 1, DateArray[0]);
 }
 else
 {
  currentdate = new Date(document.getElementsByName(field)[0].value);
 }
 datefield = field;
 InitD = currentdate.getDate();
 InitM = currentdate.getMonth();
 InitY = currentdate.getFullYear();
 crossobj=ns6? document.getElementById('FloatingKalender') : document.all.FloatingKalender;
 if (ie4)      { crossobj.style.left=posx; crossobj.style.top=posy; crossobj.style.visibility="visible"; }
 else if (ns6) { crossobj.style.left=posx + 'px'; crossobj.style.top=posy + 'px'; crossobj.style.visibility="visible"; }
 else if (ns4) { document.FloatingKalender.left = posx; document.FloatingKalender.top = posy; document.FloatingKalender.visibility="show"; }
 if (ie4)
 {
  for(i=0; i<document.getElementsByTagName("SELECT").length; i++)
  {
   document.getElementsByTagName("SELECT")[i].style.visibility = "hidden";
  }
 }
 var Calendar = CalHeader() + CalTable() + CalFooter();
 document.all.FloatingKalender.innerHTML = Calendar;
}

function HideCalendar()
{
 crossobj=ns6? document.getElementById('FloatingKalender') : document.all.FloatingKalender
 if (ie4||ns6) { crossobj.style.visibility="hidden"; }
 else if (ns4) { document.FloatingKalender.visibility="hide"; } 
 if (ie4)
 {
  for(i=0; i<document.getElementsByTagName("SELECT").length; i++)
  {
   document.getElementsByTagName("SELECT")[i].style.visibility = "visible";
  }
 }
 isVisible = false;
}

function CalHeader()
{
 mykalhead  = '<table border="0" align="center" bgcolor="#333333" cellspacing="0" cellpadding="1" width="177">';
 mykalhead += '<tr><td height="10" width="151" colspan="7" class="CalendarBorder" onMousedown="InitDrag(event, \'FloatingKalender\', \'FloatingKalenderBar\')" id="FloatingKalenderBar" style="cursor: hand;">  Kalender</td><td align="center" class="CalendarBorder" colspan="2" width="26">[url="javascript:HideCalendar();"][img]/gif?image=icon_close[/img][/url]</td></tr>';
 mykalhead += '<tr><td width="1" class="CalendarBorder"></td><td width="175" colspan="7" align="center" class="CalendarHead">[url="javascript:ChangeYear(-1);"]&#0171[/url]  [url="javascript:ChangeMonth(-1);"]&#0139[/url]  ' + Months[InitM] + ' ' + InitY + '  [url="javascript:ChangeMonth(1);"]&#0155[/url]  [url="javascript:ChangeYear(1);"]&#0187[/url]</td><td width="1" class="CalendarBorder"></td></tr>';
 mykalhead += '<tr><td width="1" class="CalendarBorder"></td><td width="25" align="center" class="CalendarHead">Mo</td><td width="25" align="center" class="CalendarHead">Di</td><td width="25" align="center" class="CalendarHead">Mi</td><td width="25" align="center" class="CalendarHead">Do</td><td width="25" align="center" class="CalendarHead">Fr</td><td width="25" align="center" class="CalendarHead">Sa</td><td width="25" align="center" class="CalendarHead">So</td><td width="1" class="CalendarBorder"></td></tr>';
 return (mykalhead);
}

function CalFooter()
{
 mykalfoot  = '<tr><td width="1" class="CalendarBorder"></td><td width="175" align="center" colspan="7" class="CalendarHead">[url="javaScript:HideCalendar();"][Abbruch][/url]</td><td width="1" class="CalendarBorder"></td></tr>';
 mykalfoot += '<tr><td height="1" width="177" colspan="9" class="CalendarBorder" align="center"></td></tr>';
 mykalfoot += '</table>';
 return (mykalfoot);
}

function CalTable()
{
 var mykalbody = "", dayCount = 1, fd = FirstDay(currentdate), ld = LastDay(currentdate), sclass;
 if (fd == 0){ fd = 6 }
 else { fd--; }
 for (var i=0; i<6; i++)
 {
   mykalbody += '<tr><td width="1" class="CalendarBorder"></td>';
   for (var j=wDay; j<wDay+7; j++)
   {
     if (i*7+j<fd || dayCount>ld)
     {
       mykalbody += '<td width="25" class="CalendarContent"></td>';
     }
     else
     {
       sclass="CalendarContent";
       if (dayCount==InitD)
       {
         sclass="CalendarDay";
       }
       mykalbody += '<td class="' + sclass + '" width="25">[url="javascript:PickDate(' + dayCount + ')"]' + (dayCount++) + '[/url]</td>';
     }
   }
   mykalbody += '<td width="1" class="CalendarBorder"></td></tr>';
 }
 return(mykalbody);
}

Der Aufruf erfolgt einfach über ShowCalendar(feldname);
Feldname ist ein textfeld wo hinterher das Datum angezeigt wird.

Wäre natürlich nett, wenn du mich mit nem Dankeswort erwähnst

Das Div hier musste noch irgendwo nach unten setzen:

Code:

<div id="FloatingKalender" style="position: absolute; width: 177; visible: false">
  <ilayer width="100%" onSelectStart="return false">
    <layer width="100%" onMouseover="DragSwitch=1; if (ns4) DragDropNS('FloatingKalender')" onMouseout="DragSwitch=0">
    </layer>
  </ilayer>
</div>

Edit: Im Onload Tag muss noch Init(); gesetzt werden

[zappel]

Danke für deine Mühe! Werde mir das mal anschauen, aber ich denke nicht, dass ich das verwenden werde, denn ein Kalender in PHP ist wesentlich dynamischer und kann auf eine MySQL-Datenbank zugreifen, so dass ich sehr einfach Termine im Kalender verwalten kann.

[SubData]

Achso... ein richtiger Kalender mit Einträgen... Na das ist mit JavaScript schwer zu realisieren.
Das Ding hier kann man eher mit nem TDateTimePicker vergleichen