Criando DateTimePicker no Javascript

Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Para efetuar o download você precisa estar logado. Clique aqui para efetuar o login
Confirmar voto
0
 (1)  (0)

Veja neste artigo como criar 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.

Listagem 1: Estilo da página.


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

Listagem 2: Enumerador alinhamento da DIV.


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

Para criar o componente vamos criar uma classe no Javascript.

Listagem 3: Construtor da classe.


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

Listagem 4: Eventos.

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

Listagem 5: Métodos Data e Hora.

//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, this.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.

Listagem 6: Inicializar componente.

//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 7: Método para criar ComboBox.

//Cria o combobox do componente.
dateTimePicker.prototype.createComboBoxDateTimePicker = function (valueWidth) {
    var tableComboBox = '';

    tableComboBox += ' \r\n';
    tableComboBox += '     \r\n ';
    tableComboBox += '         \r\n ';
    tableComboBox += '          \r\n';
    tableComboBox += '     \r\n ';
    tableComboBox += '     \r\n ';
    tableComboBox += '          \r\n';
    tableComboBox += '     \r\n ';
    tableComboBox += '
\r\n '; tableComboBox += ' \r\n'; tableComboBox += '   \r\n '; tableComboBox += ' \r\n '; tableComboBox += ' \r\n'; tableComboBox += '
\r\n '; tableComboBox += ' \r\n'; tableComboBox += ' \r\n '; tableComboBox += '
\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.

Listagem 8: Método para criar a estrutura.

//Cria a estrutura do calendário.
dateTimePicker.prototype.createTableDateTimePicker = function () {
    var content = '';

    content += '';
    content += '    ';
    content += '    ';
    content += '        ';
    content += '        ';
    content += '        ';
    content += '    ';
    content += '    ';
    content += '    ';
    content += '        ';
    content += '    ';
    content += '    ';
    content += '    ';
    content += '        ';
    content += '    ';
    content += '    ';
    content += '    ';
    content += '        ';
    content += '    ';
    content += '
'; content += ' '; content += ' '; content += ' '; content += ' '; content += ' '; content += '
'; content += '  '; content += ' '; content += ' '; content += ' '; content += ' '; content += ' '; content += ' '; content += ' '; content += ' '; content += '
'; content += ' '; content += '
'; content += ' '; content += '
'; content += '
'; content += '
'; content += ' '; content += ' '; content += ' '; content += ' '; content += ' '; content += '
'; content += '  '; content += ' '; content += ' '; content += ' '; content += ' '; content += ' '; content += ' '; content += ' '; content += ' '; content += '
'; content += ' '; content += '
'; content += ' '; content += '
'; content += '
'; content += '
'; content += '
'; content += ' ' + this.createCalendarDateTimePicker(true); content += '
'; content += '
'; content += ' '; content += ' '; content += ' '; content += ' '; content += ' '; content += ' '; content += ' '; content += ' '; content += '
'; content += ' '; content += ' '; content += ' '; content += ' '; content += ' '; content += '
'; content += ' '; content += ' '; content += ' '; content += ' '; content += ' '; content += ' '; content += ' '; content += ' '; content += ' '; content += '
'; content += ' '; content += '
'; content += ' '; content += '
'; content += '
'; content += '
:'; content += ' '; content += ' '; content += ' '; content += ' '; content += ' '; content += '
'; content += ' '; content += ' '; content += ' '; content += ' '; content += ' '; content += ' '; content += ' '; content += ' '; content += ' '; content += '
'; content += ' '; content += '
'; content += ' '; content += '
'; content += '
'; content += '
:'; content += ' '; content += ' '; content += ' '; content += ' '; content += ' '; content += '
'; content += ' '; content += ' '; content += ' '; content += ' '; content += ' '; content += ' '; content += ' '; content += ' '; content += ' '; content += '
'; content += ' '; content += '
'; content += ' '; content += '
'; content += '
'; content += '
'; content += '
'; content += '  '; content += ' '; content += '
'; return content; };

Listagem 9: Método para criar o calendário.

//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 = '\r\n';

        for (var i = 0; i < 6; i++) {
            table += '  \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 += '      ';
            }

            table += '  \r\n';
        }

        table += '
' + columns[iCol] + '
\r\n'; if (isReturn == null || isReturn == false) { document.getElementById(this.objCalendarDateTimePickerDIV).innerHTML = table; } else { return table; } } catch (e) { alert(e.ToString()); } };

Listagem 10: HTML da página.



    DateTimePicker
    
    
    


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.

Ex:

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.

Resultado obtido

Figura 1.

Você pode baixar o código fonte completo deste artigo no topo da página na opção "código-fonte".

Até o próximo artigo.

 
Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Receba nossas novidades
Ficou com alguma dúvida?