Criando DateTimePicker no Javascript

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

Listagem 1. Estilo da p�gina

Vamos criar um enumerador para indicar o alinhamento da DIV que cont�m o calend�rio.


var AlignDateTimePicker = { ToUp: 0, ToDown: 1 };

Listagem 2. Enumerador alinhamento da DIV

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

Listagem 3. Construtor da classe

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();
};

Listagem 4. Eventos

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());
    }
};

Listagem 5. M�todos Data e Hora

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());
    }
};

Listagem 6. Inicializar componente


//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 + '"  class="borderButtonDateTimePicker" onmouseover="' + this.id + '.selectionComboBox();" 
onmouseout="' + this.id + '.deSelectionComboBox();"> \r\n ';
    tableComboBox += '            <img id="upImgPosition' + this.objNameButtonDateTimePicker + '"  alt="" src="' + this.imgArrowComboBox + '" />  \r\n';
    tableComboBox += '             <label id="' + this.objValueDateTimePicker + '" class="fontDateTimePicker" > </label> \r\n ';
    tableComboBox += '        </td> \r\n ';
    tableComboBox += '        <td id="' + this.objNameButtonDateTimePicker + '"   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 + '"  alt="" src="' + this.imgArrowComboBox + '" />  \r\n';
    tableComboBox += '            <div id="' + this.objDateTimePickerComboDIV + '"  
class="borderComboBoxDateTimePicker"> ';
    tableComboBox += '              ' + this.createTableDateTimePicker();
    tableComboBox += '            </div> \r\n ';
    tableComboBox += '        </td>  \r\n';
    tableComboBox += '    </tr> \r\n ';
    tableComboBox += '</table> \r\n ';

    return tableComboBox;
};

Listagem 7. M�todo para criar ComboBox

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  ><td></td></tr>';
    content += '    <tr>';
    content += '        <td >';
    content += '            <table cellspacing="0" cellpadding="0" border="0" width="90px">';
    content += '                <tr>';
    content += '                    <td  class="borderTextBoxDateTimePicker">';
    content += '                         <label id="month' + this.id + '" class="fontDateTimePicker"> </label>';
    content += '                    </td>';
    content += '                    <td >';
    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 ></td>';
    content += '        <td >';
    content += '            <table cellspacing="0" cellpadding="0" border="0" width="70px">';
    content += '                <tr>';
    content += '                    <td  class="borderTextBoxDateTimePicker">';
    content += '                         <label id="year' + this.id + '" class="fontDateTimePicker"> </label>';
    content += '                    </td>';
    content += '                    <td >';
    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  ><td></td></tr>';
    content += '    <tr>';
    content += '        <td colspan="3">';
    content += '            <div id="' + this.objCalendarDateTimePickerDIV + '" >';
    content += '            ' + this.createCalendarDateTimePicker(true);
    content += '            </div>';
    content += '        </td>';
    content += '    </tr>';
    content += '    <tr  ><td></td></tr>';
    content += '    <tr>';
    content += '        <td colspan="3">';
    content += '            <table cellspacing="0" cellpadding="0" border="0" width="100%">';
    content += '                <tr>';
    content += '                    <td  align="center">';
    content += '                        <table cellspacing="0" cellpadding="0" border="0" width="35px">';
    content += '                            <tr>';
    content += '                                <td  class="borderTextBoxDateTimePicker" align="center">';
    content += '                                    <label id="hour' + this.id + '" class="fontDateTimePicker">00</label>';
    content += '                                </td>';
    content += '                                <td >';
    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  align="center">:</td>';
    content += '                    <td  align="center">';
    content += '                        <table cellspacing="0" cellpadding="0" border="0" width="35px">';
    content += '                            <tr>';
    content += '                                <td  class="borderTextBoxDateTimePicker" align="center">';
    content += '                                    <label id="minute' + this.id + '" class="fontDateTimePicker">00</label>';
    content += '                                </td>';
    content += '                                <td >';
    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  align="center">:</td>';
    content += '                    <td  align="center">';
    content += '                        <table cellspacing="0" cellpadding="0" border="0" width="35px">';
    content += '                            <tr>';
    content += '                                <td  class="borderTextBoxDateTimePicker" align="center">';
    content += '                                    <label id="second' + this.id + '" class="fontDateTimePicker">00</label>';
    content += '                                </td>';
    content += '                                <td >';
    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  ><td></td></tr>';
    content += '    <tr>';
    content += '        <td colspan="3" align="center">';
    content += '            <input class="buttonDateTimePicker" type="button" value="OK"  onclick="' + this.id + '.selectionValueDateTimePicher();"/> ';
    content += '            <input class="buttonDateTimePicker" type="button" value="Fechar"  onclick="' + this.id + '.hideDivCombox();"/>';
    content += '        </td>';
    content += '    </tr>';
    content += '</table>';

    return content;
};

Listagem 8. M�todo para criar a estrutura


//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 + '  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());
}
};

Listagem 9. M�todo para criar o calend�rio


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

Listagem 10. HTML da p�gina

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.

Exemplo: O dia 1 � quarta-feira ent�o eu coloca o valor na posiç�o 3 do vetor, lembrando que o vetor começa com o valor 0.

Figura 1. Voc� pode baixar o c�digo fonte completo deste artigo no topo da p�gina na opç�o "c�digo-fonte"

Criando DateTimePicker no Javascript

Veja neste artigo como criar DateTimePicker no Javascript.

Artigos relacionados