Criando DatePicker no Javascript

Nesse artigo vou mostrar como podemos criar um DatePicker com Javascript.


.borderButtonDatePicker
{
    border-right: #A0C0E7 1px solid; 
    border-top: #A0C0E7 1px solid;  
    border-left: #A0C0E7 1px solid;  
    border-bottom: #A0C0E7 1px solid;  
    background-color:#E2EBF5 ;          
}
        
.borderTextBoxDatePicker
{
    border-top: #A0C0E7 1px solid;  
    border-left: #A0C0E7 1px solid;  
    border-bottom: #A0C0E7 1px solid;  
    background-color:#E2EBF5 ;          
}        
        
.upButtonDatePicker
{                       
    height:10px;
    background: url(cal_plus.png) no-repeat center; 
}
        
.downButtonDatePicker
{           
    height:10px;
    background: url(cal_minus.png) no-repeat center;    
}     
        
.fontDatePicker
{
    font-family:Segoe UI, Tahoma, Sans-Serif;
    font-size:10pt;
    color:#000000;              
}
        
.fontHeaderDatePicker
{
    font-family:Segoe UI, Tahoma, Sans-Serif;
    font-size:10pt;
    font-weight:bold;
    color:#1F3870;              
}   
        
.fontCellDatePicker
{
    font-family:Segoe UI, Tahoma, Sans-Serif;
    font-size:10pt;
    color:#000000;              
}               
        
.buttonDatePicker
{
    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;                      
}        
        
.borderComboBoxDatePicker
{
    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 */    
} 
        
.buttonComboBoxDatePicker
{
    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. Criando estilo do componenteListagem 1. Criando estilo do componente


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

Listagem 2. Criando um enum para indicar se a lista do componente vai aparecer embaixo ou em cima

Para criar o componente vamos criar uma classe no Javascript, abaixo vou explicar cada m�todo da nossa classe.


//Id = Nome do objeto
//alignPopup = Indicando se o popup aparece em cima ou embaixo.
function datePicker(id, alignPopup) {
    this.id = id;
    this.alignPopup = alignPopup;
    this.objMonth;
    this.objYear;

    this.currentDate;

    this.currentDay;

    this.lastObjDay;
    this.currentNameDay;

    this.corSelection;

    this.objDatePickerComboDIV = this.id + 'DatePickerComboDIV';
    this.objValueDatePicker = this.id + 'ValueDatePicker';
    this.objCalendarDatePickerDIV = this.id + 'CalendarDatePickerDIV';

    this.objNameLabelDatePicker = this.id + 'NameLabelDatePicker';
    this.objNameButtonDatePicker = this.id + 'NameButtonDatePicker';

    this.imgArrowComboBox = 'SetaCombo.png';

    this.onClick;
    this.onSelectionIndex;
}

Listagem 3. Construtor da classe


datePicker.prototype.selectionComboBox = function () {
    var label = document.getElementById(this.objNameLabelDatePicker);
    var button = document.getElementById(this.objNameButtonDatePicker);

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

datePicker.prototype.deSelectionComboBox = function () {
    var label = document.getElementById(this.objNameLabelDatePicker);
    var button = document.getElementById(this.objNameButtonDatePicker);

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

Listagem 4. M�todos chamados quando os eventos onmouseover e onmouseout do combobox


datePicker.prototype.selectionItem = function (elemento) {
    try {
        this.corSelection = elemento.style.backgroundColor;
        elemento.style.backgroundColor = "#FFE6A0";
    }
    catch (e) {
        alert(e.ToString());
    }
};

datePicker.prototype.deSelectionItem = function (elemento) {
    try {
        elemento.style.backgroundColor = this.corSelection;
    }
    catch (e) {
        alert(e.ToString());
    }
};

Listagem 5. M�todos chamados quando os eventos onmouseover e onmouseout do bot�es para selecionar meses, anos


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

dateTimePicker.prototype.formatNumberDateTime = function (value) {
    if (value.toString().length == 1) {
        return "0" + value;
    }
    else {
        return value;
    }
};

Listagem 6. M�todos para retornar os nomes dos meses e formatar


datePicker.prototype.showDivCombox = function () {
    try {
        var obj = document.getElementById(this.objDatePickerComboDIV);

        if (obj.style.display != 'block') {
            if (this.onClick != null) {
                this.onClick();
            }

            obj.style.display = 'block';

            if (this.alignPopup == AlignDatePicker.ToUp) {
                var objImg = document.getElementById('upImgPosition' + 
                this.objNameButtonDatePicker);

                obj.style.top = (objImg.offsetTop - parseInt(obj.style.height) - 2) + 'px';
            }
            else {
                var objImg = document.getElementById('downImgPosition' + 
                this.objNameButtonDatePicker);

                obj.style.top = (objImg.offsetTop + 2) + 'px';
            }
        }
        else {
            this.hideDivCombox();
        }
    }
    catch (e) {
        alert(e.ToString());
    }
};

datePicker.prototype.hideDivCombox = function () {
    try {
        document.getElementById(this.objDatePickerComboDIV).style.display = 'none';
    }
    catch (e) {
        alert(e.ToString());
    }
};

Listagem 7. M�todos para mostrar e esconde o popup


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

Listagem 8. M�todo chamado quando o cliente da um clique no bot�o ok, data e hora s�o colocadas no label

 
datePicker.prototype.selectionDayDatePicker = 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;

        this.selectionValueDateTimePicher();
        this.hideDivCombox();
    }
    catch (e) {
        alert(e.ToString());
    }
};

Listagem 9. M�todo para selecionar o dia


datePicker.prototype.getDate = function () {
    return new Date(this.currentDate.getFullYear(), 
    this.currentDate.getMonth(), this.currentDay);
};

Listagem 10. M�todos para retornar a data selecionada


datePicker.prototype.setNewDate = function (newDate) {
    this.currentDate = newDate;

    this.currentDay = this.currentDate.getDate();

    this.createCalendarDatePicker();

    this.setValueTextBox();
};

Listagem 11. M�todos colocar uma nova data


datePicker.prototype.setValueTextBox = function () {
    document.getElementById(this.objValueDatePicker).innerHTML = 
    this.formatNumberDateTime(this.currentDay) 
+ '/' + this.formatNumberDateTime(this.currentDate.getMonth() + 1) + '/' + 
this.currentDate.getFullYear();
}

Listagem 12. M�todo para colocar a data na label


datePicker.prototype.onLoadDatePicker = function (valueDate, objRecipient, valueWidth) {
    try {
        this.currentDate = valueDate;

        this.currentDay = this.currentDate.getDate();

        objRecipient.innerHTML = this.createComboBoxDatePicker(valueWidth);

        this.objMonth = document.getElementById('month' + this.id);
        this.objYear = document.getElementById('year' + this.id);

        this.updateDateDatePicker();

        this.setValueTextBox();
    }
    catch (e) {
        alert(e.ToString());
    }
};

Listagem 13. M�todo para inicializar o componente


datePicker.prototype.onClickUpMonthDatePicker = function () {
    this.currentDate.setMonth(this.currentDate.getMonth() - 1);
    this.updateDateDatePicker();

    this.createCalendarDatePicker();
};

datePicker.prototype.onClickDownMonthDatePicker = function () {
    this.currentDate.setMonth(this.currentDate.getMonth() + 1);
    this.updateDateDatePicker();

    this.createCalendarDatePicker();
};

datePicker.prototype.onClickUpYearDatePicker = function () {
    this.currentDate.setYear(this.currentDate.getFullYear() - 1);
    this.updateDateDatePicker();

    this.createCalendarDatePicker();
};

datePicker.prototype.onClickDownYearDatePicker = function () {
    this.currentDate.setYear(this.currentDate.getFullYear() + 1);
    this.updateDateDatePicker();

    this.createCalendarDatePicker();
};

datePicker.prototype.updateDateDatePicker = function () {
    try {
        this.objMonth.innerHTML = this.getMes(this.currentDate.getMonth());
        this.objYear.innerHTML = this.currentDate.getFullYear();
    }
    catch (e) {
        alert(e.ToString());
    }
};

Listagem 14. M�todos para alterar m�s, ano


//Cria o combobox.
datePicker.prototype.createComboBoxDatePicker = 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.objNameLabelDatePicker + '" style="width:' + valueWidth + 'px;" 
class="borderButtonDatePicker" onmouseover="' + this.id + '.selectionComboBox();" onmouseout="' 
+ this.id + '.deSelectionComboBox();"> \r\n ';
    tableComboBox += '            <img id="upImgPosition' + this.objNameButtonDatePicker + '" 
style="position:absolute;visibility:hidden;" alt="" src="' + this.imgArrowComboBox + '" />  \r\n';
    tableComboBox += '             <label id="' + this.objValueDatePicker + '" class="fontDatePicker" style="width:100%"> </label> \r\n ';
    tableComboBox += '        </td> \r\n ';
    tableComboBox += '        <td id="' + this.objNameButtonDatePicker + '"  style="width:10px;"
 align="center" class="buttonComboBoxDatePicker" onclick="' + this.id + '.showDivCombox();" onmouseover="' + 
this.id + '.selectionComboBox();" onmouseout="' + this.id + '.deSelectionComboBox();" > \r\n ';
    tableComboBox += '            <img id="img' + this.objNameButtonDatePicker + '" 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.objNameButtonDatePicker + '" 
style="position:absolute;visibility:hidden;" alt="" src="' + this.imgArrowComboBox + '" />  \r\n';
    tableComboBox += '            <div id="' + this.objDatePickerComboDIV + '" 
style="position:absolute;width:200px;height:145px;display:none;overflow:hidden;top:0;" class="borderComboBoxDatePicker"> ';
    tableComboBox += '              ' + this.createTableDatePicker();
    tableComboBox += '            </div> \r\n ';
    tableComboBox += '        </td>  \r\n';
    tableComboBox += '    </tr> \r\n ';
    tableComboBox += '</table> \r\n ';

    return tableComboBox;
};

//Cria a estrutura.
datePicker.prototype.createTableDatePicker = 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="borderTextBoxDatePicker">';
    content += '                         <label id="month' + this.id + '" class="fontDatePicker"> </label>';
    content += '                    </td>';
    content += '                    <td style="width:15px;">';
    content += '                        <table cellspacing="0" cellpadding="0" border="0" width="100%" class="borderButtonDatePicker">';
    content += '                            <tr>';
    content += '                                <td class="upButtonDatePicker" onclick="' + 
this.id + '.onClickUpMonthDatePicker();" onmouseover="' + this.id + '.selectionItem(this);" onmouseout="' + this.id + 
'.deSelectionItem(this);">';
    content += '                        ';
    content += '                                </td>';
    content += '                            </tr>';
    content += '                            <tr>';
    content += '                                <td class="downButtonDatePicker" onclick="' + 
this.id + '.onClickDownMonthDatePicker();" 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="borderTextBoxDatePicker">';
    content += '                         <label id="year' + this.id + '" class="fontDatePicker"> </label>';
    content += '                    </td>';
    content += '                    <td style="width:15px;">';
    content += '                        <table cellspacing="0" cellpadding="0" border="0" width="100%" class="borderButtonDatePicker">';
    content += '                            <tr>';
    content += '                                <td class="upButtonDatePicker" onclick="' + this.id 
+ '.onClickUpYearDatePicker();" onmouseover="' + this.id + '.selectionItem(this);" onmouseout="' + this.id + 
'.deSelectionItem(this);">';
    content += '                        ';
    content += '                                </td>';
    content += '                            </tr>';
    content += '                            <tr>';
    content += '                                <td class="downButtonDatePicker" onclick="' + this.id 
+ '.onClickDownYearDatePicker();" 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.objCalendarDatePickerDIV + '" style="width:180px;">';
    content += '            ' + this.createCalendarDatePicker(true);
    content += '            </div>';
    content += '        </td>';
    content += '    </tr>';
    content += '    <tr style="height:7px;" ><td></td></tr>';
    content += '</table>';

    return content;
};

//Cria o calendario.
datePicker.prototype.createCalendarDatePicker = 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="borderButtonDatePicker">\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 + 'currentObjDatDatePicker';
                }

                if (i > 0 && columns[iCol] != ' ') {
                    cursorCol = 'cursor:pointer;';
                    onClickCol = 'onclick="' + this.id + '.selectionDayDatePicker(this);"';
                }

                table += '      <td id="' + this.currentNameDay + '" ' + onClickCol + ' ' + bgColorCol 
+ ' style="' + cursorCol + styleCol + '" align="center" class="' + (i == 0 ? 'fontHeaderDatePicker' : 
'fontCellDatePicker') + '">' + columns[iCol] + '</td>';
            }

            table += '  </tr>\r\n';
        }

        table += '</table>\r\n';

        if (isReturn == null || isReturn == false) {
            document.getElementById(this.objCalendarDatePickerDIV).innerHTML = table;
        }
        else {
            return table;
        }
    }
    catch (e) {
        alert(e.ToString());
    }
};

Listagem 15. M�todos para criar o Combo e o calend�rio


<html>
<head>
    <title>DateTimePicker</title>
    <link rel="stylesheet" href="MainStyleSheet.css" 
    type="text/css" />
    <script language="javascript" type="text/javascript" 
    src="DatePickerJScript.js"></script>
    <script language="javascript" type="text/javascript">
    var oDatePicker;

    function onLoadDatePicker() {
        oDatePicker = new datePicker('oDatePicker', 
        AlignDatePicker.ToDown);

        oDatePicker.onLoadDatePicker(new Date(), 
        document.getElementById('recipientDatePicker'), 130);
    }
    </script>
</head>
<body onload="onLoadDatePicker();">
<table cellpadding="0" cellspacing="0" border="0" width="150px">
    <tr>
        <td id="recipientDatePicker">
            
        </td>
    </tr>
</table>
</body>
</html>

Listagem 16. Vamos criar agora o HTML

Combobox HTML — **Figura 4** At� o pr�ximo artigo

Tecnologias:

Confira outros conte�dos:

CSS Border

HTML Icons: utilizando �cones em...

HTML hr: como utilizar a tag hr para...

Assista grátis a nossa aula inaugural

Perguntas frequentes

Quem somos?

Por que a programação se tornou a profissão mais promissora da atualidade?

Como faço para começar a estudar?

Em quanto tempo de estudo vou me tornar um programador?

Sim, você pode se tornar um programador e não precisa ter diploma de curso superior!

O que eu irei aprender estudando pela DevMedia?

Principais diferenciais da DevMedia

Qual o investimento financeiro que preciso fazer para me tornar um programador?

Como funciona a forma de pagamento da DevMedia?

Por Edson Em 2012

Nossos casos de sucesso

Leonardo Carlos

Eu sabia pouqu�ssimas coisas de programa��o antes de come�ar a estudar com voc�s, fui me especializando em v�rias �reas e ferramentas que tinham na plataforma, e com essa bagagem consegui um est�gio logo no in�cio do meu primeiro per�odo na faculdade.

Lucas Rodrigues

Estudo aqui na Dev desde o meio do ano passado! Nesse per�odo a Dev me ajudou a crescer muito aqui no trampo.
Fui o primeiro desenvolvedor contratado pela minha empresa. Hoje eu lidero um time de desenvolvimento!
Minha meta � continuar estudando e praticando para ser um Full-Stack Dev!

Her�clito J�nior

Economizei 3 meses para assinar a plataforma e sendo sincero valeu muito a pena, pois a plataforma � bem intuitiva e muuuuito did�tica a metodologia de ensino. Sinto que estou EVOLUINDO a cada dia. Muito obrigado!

Julio Cablen

Nossa! Plataforma maravilhosa. To amando o curso de desenvolvimento front-end, tinha coisas que eu ainda n�o tinha visto. A did�tica � do jeito que qualquer pessoa consegue aprender. S�rio, to apaixonado, adorando demais.

Joelberth Sena

Adquiri o curso de voc�s e logo percebi que s�o os melhores do Brasil. � um passo a passo incr�vel. S� n�o aprende quem n�o quer. Foi o melhor investimento da minha vida!

Felipe Nunes

Foi um dos melhores investimentos que j� fiz na vida e tenho aprendido bastante com a plataforma. Voc�s est�o fazendo parte da minha jornada nesse mundo da programa��o, irei assinar meu contrato como programador gra�as a plataforma.

Wanderson Oliveira

Comprei a assinatura tem uma semana, aprendi mais do que 4 meses estudando outros cursos. Exerc�cios pr�ticos que n�o tem como n�o aprender, est�o de parab�ns!

Jos� Lucas

Obrigado DevMedia, nunca presenciei uma plataforma de ensino t�o presente na vida acad�mica de seus alunos, parab�ns!

Eduardo Dorneles

Aprendi React na plataforma da DevMedia h� cerca de 1 ano e meio... Hoje estou h� 1 ano empregado trabalhando 100% com React!

Adauto Junior

J� fiz alguns cursos na �rea e nenhum � t�o bom quanto o de voc�s. Estou aprendendo muito, muito obrigado por existirem. Est�o de parab�ns... Espero um dia conseguir um emprego na �rea.

Ver todos os casos de sucesso