Nesse artigo vou mostrar como podemos criar um DateTimePicker com Javascript.
Vamos criar o estilo da página, no estilo vamos configurar as cores, fontes, altura, largura e bordas do componente.
.borderButtonDateTimePicker
{
border-right: #A0C0E7 1px solid;
border-top: #A0C0E7 1px solid;
border-left: #A0C0E7 1px solid;
border-bottom: #A0C0E7 1px solid;
background-color:#E2EBF5 ;
}
.borderTextBoxDateTimePicker
{
border-top: #A0C0E7 1px solid;
border-left: #A0C0E7 1px solid;
border-bottom: #A0C0E7 1px solid;
background-color:#E2EBF5 ;
}
.upButtonDateTimePicker
{
height:10px;
background: url(cal_plus.png) no-repeat center;
}
.downButtonDateTimePicker
{
height:10px;
background: url(cal_minus.png) no-repeat center;
}
.fontDateTimePicker
{
font-family:Segoe UI, Tahoma, Sans-Serif;
font-size:10pt;
color:#000000;
}
.fontHeaderDateTimePicker
{
font-family:Segoe UI, Tahoma, Sans-Serif;
font-size:10pt;
font-weight:bold;
color:#1F3870;
}
.fontCellDateTimePicker
{
font-family:Segoe UI, Tahoma, Sans-Serif;
font-size:10pt;
color:#000000;
}
.buttonDateTimePicker
{
border-right: #A0C0E7 1px solid;
border-top: #A0C0E7 1px solid;
border-left: #A0C0E7 1px solid;
border-bottom: #A0C0E7 1px solid;
background-color:#E2EBF5 ;
font-family:Segoe UI, Tahoma, Sans-Serif;
font-size:10pt;
color:#000000;
}
.borderComboBoxDateTimePicker
{
border-right: #A0C0E7 1px solid;
border-top: #A0C0E7 1px solid;
border-left: #A0C0E7 1px solid;
border-bottom: #A0C0E7 1px solid;
background: -webkit-gradient(linear, left top, left bottom, from(#DFEEFF), to(#B4D4FF));
/* For Webkit Browsers */
background: -moz-linear-gradient(top, #DFEEFF, #B4D4FF); /* for Firefox */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#DFEEFF',
endColorstr='#B4D4FF'); /* for IE */
}
.buttonComboBoxDateTimePicker
{
border-left: #A0C0E7 1px solid;
border-right: #A0C0E7 1px solid;
border-top: #A0C0E7 1px solid;
border-bottom: #A0C0E7 1px solid;
background-color: #E2EBF5;
}
Vamos criar um enumerador para indicar o alinhamento da DIV que contém o calendário.
var AlignDateTimePicker = { ToUp: 0, ToDown: 1 };
Para criar o componente vamos criar uma classe no Javascript.
//Id = Nome do objeto
//alignPopup = Indicando se o popup aparece em cima ou embaixo.
function dateTimePicker(id, alignPopup) {
this.id = id;
this.alignPopup = alignPopup;
this.objMonth;
this.objYear;
this.objHour;
this.objMinute;
this.objSecond;
this.currentDate;
this.currentTime;
this.currentDay;
this.lastObjDay;
this.currentNameDay;
this.corSelection;
this.objDateTimePickerComboDIV = this.id + 'DateTimePickerComboDIV';
this.objValueDateTimePicker = this.id + 'ValueDateTimePicker';
this.objCalendarDateTimePickerDIV = this.id + 'CalendarDateTimePickerDIV';
this.objNameLabelDateTimePicker = this.id + 'NameLabelDateTimePicker';
this.objNameButtonDateTimePicker = this.id + 'NameButtonDateTimePicker';
this.imgArrowComboBox = 'SetaCombo.png';
this.onClick;
this.onSelectionIndex;
}
Agora vamos criar as funções que serão chamadas nos eventos de OnMouserOver, OnMouserOut e Onclick dos elementos ComboBox e Botões do componente.
//OnMouseOver do ComboBox.
dateTimePicker.prototype.selectionComboBox = function () {
var label = document.getElementById(this.objNameLabelDateTimePicker);
var button = document.getElementById(this.objNameButtonDateTimePicker);
button.style.backgroundColor = "#FFE6A0";
label.style.borderBottomColor = "#FFCD4A";
label.style.borderTopColor = "#FFCD4A";
label.style.borderLeftColor = "#FFCD4A";
label.style.borderRightColor = "#FFCD4A";
button.style.borderBottomColor = "#FFCD4A";
button.style.borderTopColor = "#FFCD4A";
button.style.borderLeftColor = "#FFCD4A";
button.style.borderRightColor = "#FFCD4A";
};
//OnMouseOut do ComboBox.
dateTimePicker.prototype.deSelectionComboBox = function () {
var label = document.getElementById(this.objNameLabelDateTimePicker);
var button = document.getElementById(this.objNameButtonDateTimePicker);
button.style.backgroundColor = "";
label.style.borderBottomColor = "";
label.style.borderTopColor = "";
label.style.borderLeftColor = "";
label.style.borderRightColor = "";
button.style.borderBottomColor = "";
button.style.borderTopColor = "";
button.style.borderLeftColor = "";
button.style.borderRightColor = "";
};
//OnMouseOver do elemento dia.
dateTimePicker.prototype.selectionItem = function (elemento) {
try {
this.corSelection = elemento.style.backgroundColor;
elemento.style.backgroundColor = "#FFE6A0";
}
catch (e) {
alert(e.ToString());
}
};
//OnMouseOut do elemento dia.
dateTimePicker.prototype.deSelectionItem = function (elemento) {
try {
elemento.style.backgroundColor = this.corSelection;
}
catch (e) {
alert(e.ToString());
}
};
//Habilita a DIV do DateTimePicker.
dateTimePicker.prototype.showDivCombox = function () {
try {
if (this.onClick != null) {
this.onClick();
}
var obj = document.getElementById(this.objDateTimePickerComboDIV);
obj.style.display = 'block';
if (this.alignPopup == AlignDateTimePicker.ToUp) {
var objImg = document.getElementById('upImgPosition' + this.objNameButtonDateTimePicker);
obj.style.top = (objImg.offsetTop - parseInt(obj.style.height) - 2) + 'px';
}
else {
var objImg = document.getElementById('downImgPosition' + this.objNameButtonDateTimePicker);
obj.style.top = (objImg.offsetTop + 2) + 'px';
}
}
catch (e) {
alert(e.ToString());
}
};
//Desabilita a DIV do DateTimePicker.
dateTimePicker.prototype.hideDivCombox = function () {
try {
document.getElementById(this.objDateTimePickerComboDIV).style.display = 'none';
}
catch (e) {
alert(e.ToString());
}
};
//Evento OnClick do botão OK.
datePicker.prototype.selectionValueDateTimePicher = function () {
try {
this.setValueTextBox();
document.getElementById(this.objDatePickerComboDIV).style.display = 'none';
if (this.onSelectionIndex != null) {
this.onSelectionIndex();
}
}
catch (e) {
alert(e.ToString());
}
};
//Evento OnClick do elemento Dia.
dateTimePicker.prototype.selectionDayDateTimePicker = function (objDay) {
try {
if (this.lastObjDay != null) {
this.lastObjDay.bgColor = '';
}
else {
document.getElementById(this.currentNameDay).bgColor = '';
}
this.lastObjDay = objDay;
this.lastObjDay.bgColor = '#FFE6A0';
this.currentDay = this.lastObjDay.innerHTML;
}
catch (e) {
alert(e.ToString());
}
};
//Evento OnClick Botão Up Mês.
dateTimePicker.prototype.onClickUpMonthDateTimePicker = function () {
this.currentDate.setMonth(this.currentDate.getMonth() - 1);
this.updateDateDateTimePicker();
this.createCalendarDateTimePicker();
};
//Evento OnClick Botão Down Mês.
dateTimePicker.prototype.onClickDownMonthDateTimePicker = function () {
this.currentDate.setMonth(this.currentDate.getMonth() + 1);
this.updateDateDateTimePicker();
this.createCalendarDateTimePicker();
};
//Evento OnClick Botão Up Ano.
dateTimePicker.prototype.onClickUpYearDateTimePicker = function () {
this.currentDate.setYear(this.currentDate.getFullYear() - 1);
this.updateDateDateTimePicker();
this.createCalendarDateTimePicker();
};
//Evento OnClick Botão Down Ano.
dateTimePicker.prototype.onClickDownYearDateTimePicker = function () {
this.currentDate.setYear(this.currentDate.getFullYear() + 1);
this.updateDateDateTimePicker();
this.createCalendarDateTimePicker();
};
//Evento OnClick Botão Up Hora.
dateTimePicker.prototype.onClickUpHourDateTimePicker = function () {
this.currentTime.setHours(this.currentTime.getHours() - 1);
this.updateTimeDateTimePicker();
};
//Evento OnClick Botão Down Hora.
dateTimePicker.prototype.onClickDownHourDateTimePicker = function () {
this.currentTime.setHours(this.currentTime.getHours() + 1);
this.updateTimeDateTimePicker();
};
//Evento OnClick Botão Up Minuto.
dateTimePicker.prototype.onClickUpMinuteDateTimePicker = function () {
this.currentTime.setMinutes(this.currentTime.getMinutes() - 1);
this.updateTimeDateTimePicker();
};
//Evento OnClick Botão Down Minuto.
dateTimePicker.prototype.onClickDownMinuteDateTimePicker = function () {
this.currentTime.setMinutes(this.currentTime.getMinutes() + 1);
this.updateTimeDateTimePicker();
};
//Evento OnClick Botão Up Segundo.
dateTimePicker.prototype.onClickUpSecondDateTimePicker = function () {
this.currentTime.setSeconds(this.currentTime.getSeconds() - 1);
this.updateTimeDateTimePicker();
};
//Evento OnClick Botão Down Segundo.
dateTimePicker.prototype.onClickDownSecondDateTimePicker = function () {
this.currentTime.setSeconds(this.currentTime.getSeconds() + 1);
this.updateTimeDateTimePicker();
};
Vamos criar os métodos para manipular os valores de data e hora, como colocar uma nova data e hora, retornar a data e hora e formatar o valor para ser apresentado nos elementos do componente.
//Retorna a descrição do mês.
dateTimePicker.prototype.getMes = function (mes) {
try {
if (mes == 0) {
return "Janeiro";
}
else if (mes == 1) {
return "Fevereiro";
}
else if (mes == 2) {
return "Março";
}
else if (mes == 3) {
return "Abril";
}
else if (mes == 4) {
return "Maio";
}
else if (mes == 5) {
return "Junho";
}
else if (mes == 6) {
return "Julho";
}
else if (mes == 7) {
return "Agosto";
}
else if (mes == 8) {
return "Setembro";
}
else if (mes == 9) {
return "Outubro";
}
else if (mes == 10) {
return "Novembro";
}
else if (mes == 11) {
return "Dezembro";
}
}
catch (e) {
alert(e.ToString());
}
};
//Formata o números do ano, dia, minuto e segundo.
dateTimePicker.prototype.formatNumberDateTime = function (value) {
if (value.toString().length == 1) {
return "0" + value;
}
else {
return value;
}
};
//Retorna o mês selecionado.
dateTimePicker.prototype.getDateTime = function () {
return new Date(this.currentDate.getFullYear(), this.currentDate.getMonth(), this.currentDay,
his.currentTime.getHours(), this.currentTime.getMinutes(), this.currentTime.getSeconds());
};
//Coloca a data e hora no componente.
dateTimePicker.prototype.setNewDateTime = function (newDate) {
this.currentDate = newDate;
this.currentTime = newDate;
this.currentDay = this.currentDate.getDate();
this.createCalendarDateTimePicker();
this.setValueTextBox();
};
//Coloca o texto no label do componente.
dateTimePicker.prototype.setValueTextBox = function () {
document.getElementById(this.objValueDateTimePicker).innerHTML = this.formatNumberDateTime(
this.currentDay) + '/' + this.formatNumberDateTime(this.currentDate.getMonth() + 1) + '/' +
this.currentDate.getFullYear() + ' ' + this.formatNumberDateTime(this.currentTime.getHours()) +
':' + this.formatNumberDateTime(this.currentTime.getMinutes());
}
//Atualiza os labels Mês e ano.
dateTimePicker.prototype.updateDateDateTimePicker = function () {
try {
this.objMonth.innerHTML = this.getMes(this.currentDate.getMonth());
this.objYear.innerHTML = this.currentDate.getFullYear();
}
catch (e) {
alert(e.ToString());
}
};
//Atualiza os labels Hora, minuto e segundo.
dateTimePicker.prototype.updateTimeDateTimePicker = function () {
try {
this.objHour.innerHTML = this.formatNumberDateTime(this.currentTime.getHours());
this.objMinute.innerHTML = this.formatNumberDateTime(this.currentTime.getMinutes());
this.objSecond.innerHTML = this.formatNumberDateTime(this.currentTime.getSeconds());
}
catch (e) {
alert(e.ToString());
}
};
O próximo método será o primeiro que será chamado, o método vai construir e adicionar o elemento na página HTML.
//Método para iniciar a criação do componente.
dateTimePicker.prototype.onLoadDateTimePicker = function (valueDate, objRecipient, valueWidth) {
try {
this.currentDate = valueDate;
this.currentTime = valueDate;
this.currentDay = this.currentDate.getDate();
objRecipient.innerHTML = this.createComboBoxDateTimePicker(valueWidth);
this.objMonth = document.getElementById('month' + this.id);
this.objYear = document.getElementById('year' + this.id);
this.objHour = document.getElementById('hour' + this.id);
this.objMinute = document.getElementById('minute' + this.id);
this.objSecond = document.getElementById('second' + this.id);
this.updateDateDateTimePicker();
this.updateTimeDateTimePicker();
this.setValueTextBox();
}
catch (e) {
alert(e.ToString());
}
};
//Cria o combobox do componente.
dateTimePicker.prototype.createComboBoxDateTimePicker = function (valueWidth) {
var tableComboBox = '';
tableComboBox += '<table cellpadding="0" cellspacing="0" border="0" width="' + (parseInt(valueWidth) + 10) + 'px"> \r\n';
tableComboBox += ' <tr> \r\n ';
tableComboBox += ' <td id="' + this.objNameLabelDateTimePicker + '" style="width:' + valueWidth + 'px;" class="borderButtonDateTimePicker" onmouseover="' + this.id + '.selectionComboBox();"
onmouseout="' + this.id + '.deSelectionComboBox();"> \r\n ';
tableComboBox += ' <img id="upImgPosition' + this.objNameButtonDateTimePicker + '" style="position:absolute;visibility:hidden;" alt="" src="' + this.imgArrowComboBox + '" /> \r\n';
tableComboBox += ' <label id="' + this.objValueDateTimePicker + '" class="fontDateTimePicker" style="width:100%"> </label> \r\n ';
tableComboBox += ' </td> \r\n ';
tableComboBox += ' <td id="' + this.objNameButtonDateTimePicker + '" style="width:10px;" align="center" class="buttonComboBoxDateTimePicker" onclick="' + this.id + '.showDivCombox();"
onmouseover="' + this.id + '.selectionComboBox();" onmouseout="' + this.id + '.deSelectionComboBox();" > \r\n ';
tableComboBox += ' <img alt="" src="' + this.imgArrowComboBox + '" /> \r\n';
tableComboBox += ' </td> \r\n';
tableComboBox += ' </tr> \r\n ';
tableComboBox += ' <tr> \r\n ';
tableComboBox += ' <td> \r\n ';
tableComboBox += ' <img id="downImgPosition' + this.objNameButtonDateTimePicker + '" style="position:absolute;visibility:hidden;" alt="" src="' + this.imgArrowComboBox + '" /> \r\n';
tableComboBox += ' <div id="' + this.objDateTimePickerComboDIV + '" style="position:absolute;width:200px;height:210px;display:none;overflow:hidden;top:0;"
class="borderComboBoxDateTimePicker"> ';
tableComboBox += ' ' + this.createTableDateTimePicker();
tableComboBox += ' </div> \r\n ';
tableComboBox += ' </td> \r\n';
tableComboBox += ' </tr> \r\n ';
tableComboBox += '</table> \r\n ';
return tableComboBox;
};
Criaremos as componentes que vão conter os valores da descrição dos meses, anos, dias, horas, minutos e segundos. Os botões OK e FECHAR serão criados nesse método.
//Cria a estrutura do calendário.
dateTimePicker.prototype.createTableDateTimePicker = function () {
var content = '';
content += '<table cellspacing="0" cellpadding="0" border="0" width="180px" align="center">';
content += ' <tr style="height:3px;" ><td></td></tr>';
content += ' <tr>';
content += ' <td style="width:90px;">';
content += ' <table cellspacing="0" cellpadding="0" border="0" width="90px">';
content += ' <tr>';
content += ' <td style="width:75px" class="borderTextBoxDateTimePicker">';
content += ' <label id="month' + this.id + '" class="fontDateTimePicker"> </label>';
content += ' </td>';
content += ' <td style="width:15px;">';
content += ' <table cellspacing="0" cellpadding="0" border="0" width="100%" class="borderButtonDateTimePicker">';
content += ' <tr>';
content += ' <td class="upButtonDateTimePicker" onclick="' + this.id + '.onClickUpMonthDateTimePicker();" onmouseover="' + this.id + '.selectionItem(this);" onmouseout="' +
this.id + '.deSelectionItem(this);">';
content += ' ';
content += ' </td>';
content += ' </tr>';
content += ' <tr>';
content += ' <td class="downButtonDateTimePicker" onclick="' + this.id + '.onClickDownMonthDateTimePicker();" onmouseover="' + this.id + '.selectionItem(this);"
onmouseout="' + this.id + '.deSelectionItem(this);">';
content += ' ';
content += ' </td>';
content += ' </tr>';
content += ' </table>';
content += ' </td>';
content += ' </tr>';
content += ' </table>';
content += ' </td>';
content += ' <td style="width:20px;"></td>';
content += ' <td style="width:70px;">';
content += ' <table cellspacing="0" cellpadding="0" border="0" width="70px">';
content += ' <tr>';
content += ' <td style="width:55px" class="borderTextBoxDateTimePicker">';
content += ' <label id="year' + this.id + '" class="fontDateTimePicker"> </label>';
content += ' </td>';
content += ' <td style="width:15px;">';
content += ' <table cellspacing="0" cellpadding="0" border="0" width="100%" class="borderButtonDateTimePicker">';
content += ' <tr>';
content += ' <td class="upButtonDateTimePicker" onclick="' + this.id + '.onClickUpYearDateTimePicker();" onmouseover="' + this.id + '.selectionItem(this);" onmouseout="' +
this.id + '.deSelectionItem(this);">';
content += ' ';
content += ' </td>';
content += ' </tr>';
content += ' <tr>';
content += ' <td class="downButtonDateTimePicker" onclick="' + this.id + '.onClickDownYearDateTimePicker();" onmouseover="' + this.id + '.selectionItem(this);"
onmouseout="' + this.id + '.deSelectionItem(this);">';
content += ' ';
content += ' </td>';
content += ' </tr>';
content += ' </table>';
content += ' </td>';
content += ' </tr>';
content += ' </table>';
content += ' </td>';
content += ' </tr>';
content += ' <tr style="height:7px;" ><td></td></tr>';
content += ' <tr>';
content += ' <td colspan="3">';
content += ' <div id="' + this.objCalendarDateTimePickerDIV + '" style="width:180px;">';
content += ' ' + this.createCalendarDateTimePicker(true);
content += ' </div>';
content += ' </td>';
content += ' </tr>';
content += ' <tr style="height:7px;" ><td></td></tr>';
content += ' <tr>';
content += ' <td colspan="3">';
content += ' <table cellspacing="0" cellpadding="0" border="0" width="100%">';
content += ' <tr>';
content += ' <td style="width:30%" align="center">';
content += ' <table cellspacing="0" cellpadding="0" border="0" width="35px">';
content += ' <tr>';
content += ' <td style="width:25px" class="borderTextBoxDateTimePicker" align="center">';
content += ' <label id="hour' + this.id + '" class="fontDateTimePicker">00</label>';
content += ' </td>';
content += ' <td style="width:20px;">';
content += ' <table cellspacing="0" cellpadding="0" border="0" width="100%" class="borderButtonDateTimePicker">';
content += ' <tr>';
content += ' <td class="upButtonDateTimePicker" onclick="' + this.id + '.onClickUpHourDateTimePicker();" onmouseover="' + this.id + '.selectionItem(this);"
onmouseout="' + this.id + '.deSelectionItem(this);">';
content += ' ';
content += ' </td>';
content += ' </tr>';
content += ' <tr>';
content += ' <td class="downButtonDateTimePicker" onclick="' + this.id + '.onClickDownHourDateTimePicker();" onmouseover="' + this.id + '.selectionItem(this);"
onmouseout="' + this.id + '.deSelectionItem(this);">';
content += ' ';
content += ' </td>';
content += ' </tr>';
content += ' </table>';
content += ' </td>';
content += ' </tr>';
content += ' </table> ';
content += ' </td>';
content += ' <td style="width:5%" align="center">:</td>';
content += ' <td style="width:30%" align="center">';
content += ' <table cellspacing="0" cellpadding="0" border="0" width="35px">';
content += ' <tr>';
content += ' <td style="width:25px" class="borderTextBoxDateTimePicker" align="center">';
content += ' <label id="minute' + this.id + '" class="fontDateTimePicker">00</label>';
content += ' </td>';
content += ' <td style="width:20px;">';
content += ' <table cellspacing="0" cellpadding="0" border="0" width="100%" class="borderButtonDateTimePicker">';
content += ' <tr>';
content += ' <td class="upButtonDateTimePicker" onclick="' + this.id + '.onClickUpMinuteDateTimePicker();" onmouseover="' + this.id + '.selectionItem(this);"
onmouseout="' + this.id + '.deSelectionItem(this);">';
content += ' ';
content += ' </td>';
content += ' </tr>';
content += ' <tr>';
content += ' <td class="downButtonDateTimePicker" onclick="' + this.id + '.onClickDownMinuteDateTimePicker();" onmouseover="' + this.id + '.selectionItem
(this);" onmouseout="' + this.id + '.deSelectionItem(this);">';
content += ' ';
content += ' </td>';
content += ' </tr>';
content += ' </table>';
content += ' </td>';
content += ' </tr>';
content += ' </table> ';
content += ' </td>';
content += ' <td style="width:5%" align="center">:</td>';
content += ' <td style="width:30%" align="center">';
content += ' <table cellspacing="0" cellpadding="0" border="0" width="35px">';
content += ' <tr>';
content += ' <td style="width:25px" class="borderTextBoxDateTimePicker" align="center">';
content += ' <label id="second' + this.id + '" class="fontDateTimePicker">00</label>';
content += ' </td>';
content += ' <td style="width:20px;">';
content += ' <table cellspacing="0" cellpadding="0" border="0" width="100%" class="borderButtonDateTimePicker">';
content += ' <tr>';
content += ' <td class="upButtonDateTimePicker" onclick="' + this.id + '.onClickUpSecondDateTimePicker();" onmouseover="' + this.id + '.selectionItem(this);"
onmouseout="' + this.id + '.deSelectionItem(this);">';
content += ' ';
content += ' </td>';
content += ' </tr>';
content += ' <tr>';
content += ' <td class="downButtonDateTimePicker" onclick="' + this.id + '.onClickDownSecondDateTimePicker();" onmouseover="' + this.id + '.selectionItem
(this);" onmouseout="' + this.id + '.deSelectionItem(this);">';
content += ' ';
content += ' </td>';
content += ' </tr>';
content += ' </table>';
content += ' </td>';
content += ' </tr>';
content += ' </table> ';
content += ' </td>';
content += ' </tr>';
content += ' </table> ';
content += ' </td>';
content += ' </tr>';
content += ' <tr style="height:7px;" ><td></td></tr>';
content += ' <tr>';
content += ' <td colspan="3" align="center">';
content += ' <input class="buttonDateTimePicker" type="button" value="OK" style="width:50px" onclick="' + this.id + '.selectionValueDateTimePicher();"/> ';
content += ' <input class="buttonDateTimePicker" type="button" value="Fechar" style="width:50px" onclick="' + this.id + '.hideDivCombox();"/>';
content += ' </td>';
content += ' </tr>';
content += '</table>';
return content;
};
//Cria o calendário.
dateTimePicker.prototype.createCalendarDateTimePicker = function (isReturn) {
try {
var date = new Date(this.currentDate.getFullYear(), this.currentDate.getMonth(), 1);
this.lastObjDay = null;
this.currentNameDay = '';
var table = '<table cellpadding="0" cellspacing="0" border="0" width="100%" class="borderButtonDateTimePicker">\r\n';
for (var i = 0; i < 6; i++) {
table += ' <tr>\r\n';
var columns = [' ', ' ', ' ', ' ', ' ', ' ', ' '];
if (i > 0) {
var isNextTr = false;
for (var iCol = 0; iCol < columns.length; iCol++) {
if (!isNextTr) {
var day = date.getDate();
if (day == 1 && i > 1) {
isNextTr = true;
continue;
}
columns[date.getDay()] = day;
date.setDate(day + 1);
if (date.getDate() == day) {
date.setDate(day + 1);
}
if (date.getDay() == 0) {
isNextTr = true;
}
}
}
}
else {
columns = ['D', 'S', 'T', 'Q', 'Q', 'S', 'S'];
}
for (var iCol = 0; iCol < columns.length; iCol++) {
var styleCol = '';
var cursorCol = '';
var bgColorCol = '';
var onClickCol = '';
if (i > 0 && iCol < columns.length - 1) {
styleCol = 'border-right: #A0C0E7 1px solid;';
}
if (i == 1) {
styleCol += 'border-top: #A0C0E7 1px solid;';
}
if (columns[iCol] == this.currentDay) {
bgColorCol = 'bgColor="#FFE6A0"';
this.currentNameDay = this.id + 'currentObjDatDateTimePicker';
}
if (i > 0 && columns[iCol] != ' ') {
cursorCol = 'cursor:pointer;';
onClickCol = 'onclick="' + this.id + '.selectionDayDateTimePicker(this);"';
}
table += ' <td id="' + this.currentNameDay + '" ' + onClickCol + ' '
+ bgColorCol + ' style="' + cursorCol + styleCol + '" align="center" class="'
+ (i == 0 ? 'fontHeaderDateTimePicker'
: 'fontCellDateTimePicker') + '">' + columns[iCol] + '</td>';
}
table += ' </tr>\r\n';
}
table += '</table>\r\n';
if (isReturn == null || isReturn == false) {
document.getElementById(this.objCalendarDateTimePickerDIV).innerHTML = table;
}
else {
return table;
}
}
catch (e) {
alert(e.ToString());
}
};
<html>
<head>
<title>DateTimePicker</title>
<link rel="stylesheet" href="MainStyleSheet.css" type="text/css" />
<script language="javascript" type="text/javascript" src="DateTimePickerJScript.js"></script>
<script language="javascript" type="text/javascript">
var terminoPontoServicoDateTimePicker;
function onLoadDateTimePicker() {
terminoPontoServicoDateTimePicker = new
dateTimePicker('terminoPontoServicoDateTimePicker', AlignDateTimePicker.ToDown);
terminoPontoServicoDateTimePicker.onLoadDateTimePicker(new Date(),
document.getElementById('recipientDateTimePicker'), 130);
}
</script>
</head>
<body onload="onLoadDateTimePicker();">
<table cellpadding="0" cellspacing="0" border="0" width="150px">
<tr>
<td id="recipientDateTimePicker">
</td>
</tr>
</table>
</body>
</html>
O componente é construído em duas partes. A primeira parte é ComboBox e a segunda é o Calendário.
Para criar o calendário crie um vetor com 7 elementos, e posiciono os dias conforme com o valor da variável de Data, cada mudança que o usuário faz nos TextBox mês, ano, hora, minuto e segundo atualizo o calendário, verifico o dia da semana e coloco o dia na posição do vetor.