Date Picker

Maybe somebody can use this? Date validation can be cumbersome.

The code at the bottom is the datepicker, include it. Then it implements like this:

var obj = new AW.UI.Input;
obj.mkThisDate = dateAWInput_me;
obj.mkThisDate();

Now, when you click the input box, a little calendar pops up. :)

Cheers.



function datePicker(){
var px = 0; var py = 0;
var sHTML = ""; var tHTML = "";
to_day = new Date; var d=0;
var panel = new AW.HTML.SPAN;
var m_com = new AW.UI.Combo;
preserve_date = new Date;
var month = ["January","February","March","April","May","June","July","August","September","October","November","December"];
var y_inp = new AW.UI.Input;
panel.setStyle("font","menu"); panel.setStyle("border","solid 2px #000");
panel.setStyle("font-size","x-small"); panel.setStyle("position","absolute");
panel.setStyle("display","none"); panel.setStyle("height",180);
panel.setStyle("background-color", "#ddd"); panel.setStyle("width",128);
panel.setStyle("z-index",9999);
m_com.setItemValue([0,1,2,3,4,5,6,7,8,9,10,11]);
m_com.setId("m_com");
m_com.setItemText(month);
m_com.setItemCount(12); m_com.setSize(78);
m_com.getContent("box/text").setAttribute("readonly",true);
m_com.onControlValidated = function(text){
for (i = 0; i < 12; i++){if(text==month[i]){to_day.setMonth(i)};};
render();
};
y_inp.setControlSize(40);
y_inp.onControlValidating = function(text){
if(isNaN(text) || text < 1970 || text > 2038){
alert("Year must be between 1970 and 2038.");
y_inp.setControlText(to_ay.getFullYear());
return false;
};
to_day.setYear(text);
render();
};
var h_inp = new AW.UI.Input; h_inp.setControlSize(25);
var m_inp = new AW.UI.Input; m_inp.setControlSize(25);
h_inp.onControlValidating = function(text){
if (isNaN(text) || text < 0 || text > 23){
alert("Hours must be a number between 0 and 23");
h_inp.setControlText(to_day.getHours());
return false
};
to_day.setHours(text);
};
m_inp.onControlValidating = function(text){
if (isNan(text) || text < 0 || text > 60){
alert("Minutes must be number between 0 and 59");
m_inp.setControlText(to_day.getMinutes());
return false
};
to_day.setMinutes(text);
};
document.write(panel);
function paint(ipx,ipy,d){
px = ipx; py = ipy;
fix_x = 0; fix_y = 0;
if (d){to_day = new Date(d); preserve_date = new Date(d)};
render();
panel.setStyle("top",py); panel.setStyle("left",px);
panel.setStyle("display","block");
};
this.cal_paint = paint;
function render(){
tHTML = '<table style="font:menu;font-size:x-small;background-color:#000" cellspacing=0 cellpadding=0 width="100%">';
tHTML+= '<tr height="70%"><td style="border:solid 1px #fff;color:#fff" width="10">';
tHTML+= '<a href="javascript:cal_closeDp(false)" class="mybutton">X</a><td width="99%" ';
tHTML+= 'onmousedown="javascript:cal_moveMe(event)" onmouseout="javascript:cal_moveMeNoMore(event)" ';
tHTML+= 'onmousemove="javascript:cal_movingMe(event)" onmouseup="javascript:cal_moveMeNoMore()">&nbsp;</table>';
sHTML = '<table style="font:menu;font-size:x-small;background-color:#fff" ';
sHTML+= 'cellspacing=0 cellpadding=1 border width="124">';
sHTML+= '<tr style="background-color:#ddd;color:#777">';
sHTML+= '<th>S<th>M<th>T<th>W<th>T<th>F<th>S';
var dcurs = new Date; dcurs.setYear(to_day.getYear());
dcurs.setMonth(to_day.getMonth()); dcurs.setDate(1);
var dokay = false;
var d = 0; var i = 0; var j = 0;
for (i = 0; i < 6; i++){
sHTML+='<tr>';
for (j = 0; j < 7; j++){
if ((dcurs.getDay() == j) && (i == 0) && (d == 0)) dokay=true;
if (dokay == true) {d++; dcurs.setDate(d)};
if (dokay == true && dcurs.getMonth() == to_day.getMonth()){
sHTML+='<td align="center"';
sHTML+=' onclick="javascript:cal_select('+d+')" id="smkcal_'+d+'">'+d;
} else sHTML+='<td>&nbsp;';
};
};
sHTML+="</table>";
m_com.setSelectedItems([to_day.getMonth()]);
m_com.setControlText(m_com.getItemText(m_com.getSelectedItems()));
year = to_day.getFullYear();
y_inp.setControlText(year);
hours = to_day.getHours().toString();
mints = to_day.getMinutes().toString();
while (hours.length < 2){hours = "0"+hours};
while (mints.length < 2){mints = "0"+mints};
h_inp.setControlText(hours);
m_inp.setControlText(mints);
sHTML+='<table style="background-color:#ddd" cellspacing="0" align="center">';
sHTML+='<tr><td align="center">'+h_inp+':'+m_inp+'</table>';
sHTML+='<table class="mybutton" width="100%">';
sHTML+='<tr><td width="99%">&nbsp;<td><a href="javascript:cal_closeDp(true)" ';
sHTML+='class="mybutton">OK</a><td>&nbsp;<td><a href="javascript:cal_closeDp(false)" ';
sHTML+='class="mybutton">Cancel</a></table>';
isp = [tHTML, m_com, y_inp, sHTML];
panel.element().innerHTML = isp.join("");
select(to_day.getDate());
};
this.cal_render = render;
function select(d){
if (this.d_selected){
eleId = "smkcal_"+this.d_selected;
document.getElementById(eleId).className = false;
};
this.d_selected = d;
to_day.setDate(d);
eleId = "smkcal_"+d;
document.getElementById(eleId).className = "selected";
};
this.cal_select = select;
function closeDp(save){
panel.setStyle("display", "none");
if (save == true)
doSomething(to_day.toUTCString());
else
to_day = preserve_date;
};
this.cal_closeDp = closeDp;
moving = false;
function moveMe(event){moving=true;fix_x=event.clientX-px;fix_y=event.clientY-py};
this.cal_moveMe = moveMe
function moveMeNoMore(event){moving = false;};
this.cal_moveMeNoMore = moveMeNoMore;
function movingMe(event){
if (moving == false){return false}else{
px = event.clientX - fix_x; py = event.clientY - fix_y;
panel.setStyle("left", px); panel.setStyle("top", py)
};
};
this.cal_movingMe = movingMe;
render();
};
var date = new AW.Formats.Date;
date.setDataFormat("RFC822");
date.setErrorText(" ");
date.setErrorValue(Infinity);
date.setTextFormat("dd-mmm-yy hh:mm");
function dateAWInput_me(){
this.setControlFormat(date);
this.getContent("box/text").setAttribute("readonly","readonly");
this.onControlValueChanged = d_vChg;
this.setEvent("onclick",d_click);
this.toString();
};
function d_vChg(text){
cb = this;
doSomething = function(d){cb.setControlValue(d)};
var d = this.getControlValue();
cal_paint(event.clientX,event.clientY,d);
return false;
};

this.setEvent("onclick",d_click);

Gives me the error, d_click is undefined :(

Ooops... a mix-up. Forgot the d_click() and wrote the wrong d_vChg().

the bottom should go like this:

...

function d_vChg(text){
this.setControlText(date.dataToText(this.getControlValue()));
};
function d_click(event){
cb = this;
doSomething = function(d){cb.setControlValue(d);};
var d = this.getControlValue();
cal_paint(event.clientX,event.clientY,d);return false;
};


Also... there is a typo: "isNan" is originally posted instead of "isNaN"

I think that'll make it work.

Thanks for the fast response but it still wont run.

The last line is still making some troubles:

cal_paint(event.clientX,event.clientY,d);return false;

results in:
Error: Object expected.