WebFX WebBoard
Message Thread:
View All Messages
Back to WebFX
 Calendar: how to make it popup?, Vadim, August 30, 2003
     Re:Calendar: how to make it popup?, dreadcast, September 1, 2003
         Re:Calendar: how to make it popup?, Vadim, September 3, 2003

Subject: Re:Calendar: how to make it popup? From: Vadim Date: September 3, 2003

Thanks alot !

You've done a grate job :)) It's very helpful for me

From: dreadcast
Sent: September 1, 2003
Subject: Re:Calendar: how to make it popup?

I was just working on it :)

add this after "DatePicker.days = ..." in datepicker.js :
DatePicker.fullDays = ["Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi"];

add this at the end of datepicker.js :

function dateField () {
 inputs = document.getElementsByTagName('input');
 for (i = 0; i < inputs.length; i++) {
  if (inputs[i].getAttribute('type') == 'date') {
   objID = inputs[i].getAttribute('id');
   obj = document.getElementById(objID);
    
   dateTable = document.createElement('table');
   dateTable.className = 'dateDiv';
   dateTable.setAttribute('title', 'Calendrier');
   dateTable.setAttribute('id', 'tbl' + objID);
   toggleDiv = function() {
    thisID = this.id.replace('tbl', '');
    toggle ('date' + thisID);
   };
   dateTable.onmousedown = toggleDiv;
   dateTable.cellPadding = 0;
   dateTable.cellSpacing = 0;
   dateTBody = document.createElement('tbody');
   dateTable.appendChild(dateTBody);
   dateTR = document.createElement('tr');
   dateTBody.appendChild(dateTR);
        
   dateInputTD = document.createElement('td');
   dateTR.appendChild(dateInputTD);

   dateBtnTD = document.createElement('td');
   dateBtnTD.className = 'button';
   dateBtnTD.setAttribute('align', 'right');
   dateBtnTD.setAttribute('vAlign', 'bottom');
   toggleBtn = function() { this.className='buttondown'; };
   dateBtnTD.onmousedown = toggleBtn;
   toggleBtn = function() { this.className='button'; };
   dateBtnTD.onmouseup = toggleBtn;
   dateTR.appendChild(dateBtnTD);
    
   dateBtn = document.createElement('img');
   dateBtn.setAttribute('src', '/test/cal.gif');
   dateBtnTD.appendChild(dateBtn);
    
   container = obj.parentNode;

   var d = new Date();
   var dp = new DatePicker(d);
   dpc = dp.create();
   dpc.id = 'date' + objID;
   dp.id = objID + '_dp';
   setTheDate = function () {
    thisID = this.id.replace('_dp', '');
    document.getElementById(thisID).value = DatePicker.fullDays[this._selectedDate.getDay()] + ' ' + this._selectedDate.getDate() + ' ' + DatePicker.months[this._selectedDate.getMonth()] + ' ' + this._selectedDate.getFullYear();
   };
   dp.onchange = setTheDate;
   container.insertBefore(dpc, obj);
   
   dateInput = document.getElementById(objID);
   dateInput.setAttribute('type', 'text');
   dateInput.setAttribute('name', objID);
   dateInputTD.appendChild(dateInput);
   container.insertBefore(dateTable, dpc);
  }
 }
}
window.onload = dateField;

this is not serious at the moment, but I will post a more homogeneous and serious version to the webboard...

in your web page, you add :

<input type="date" id="dateField" readonly="yes" />

(type="date" and id are requiered)

Also modify the datepicker.css :

.datePicker must be : position: absolute;

You can add as many <input /> as you want to your page.

From: Vadim
Sent: August 30, 2003
Subject: Re:Calendar: how to make it popup?

Hi !

I want a calendar popup under an input element when I press button to popup a calendar and hide it when I make a choise.

Give me a script pls. Thanks in advance

Vadim






Reply
Name: 
Email: 
Subject: 

Enter your reply to this message below. HTML tags are not supported but words that start with http://, ftp:// or mailto: are converted to links.


View All Messages
Back to WebFX