Datepicker com AngularJS

     O Datepicker é um calendário que pode ser popup ou inline que pode ser bastante customizado, porém pode dar um trabalhinho para ficar como queremos. Vou deixar o código de um simples que eu fiz e uma dica: O que você não conseguir customizar através do objeto no JavaScript, tente fazer passando como propriedade na TAG html do input. Apesar de ter uma propriedade que recebe um objeto de configurações, pelo menos até a data que eu testei, não são todas as propriedades do objeto que ele reconhece para configurar o datepicker, por exemplo: se deve ser popup ou inline, o formato da data, esconder os botões que vem por padrão na parte inferior, etc... tendo que estas serem configuradas no input.

    

      Baixe o CSS e o JavaScript do link: https://angular-ui.github.io/bootstrap

<p class="input-group">

     <label class="fg-label" for="txtInicio">Início</label>

     <input type="text" name="dataIni" class="form-control" ng-model="controller .parametros.dataInicio" show-button-bar="false" uib-datepicker-popup="dd/MM/yyyy" is-open="controller.openDatIni" datepicker-options="controller .options" alt-input-formats="!d/!M/yyyy" maxlength="10" onkeyup="formatDate(this);">

     </input>

     <span class="input-group-btn">

         <button type="button" class="btn btn-default" ng-click="controller .opened('dataIni')" uib-tooltip="Abrir Calendário" style="margin-top: 25px;">

             <i class="glyphicon glyphicon-calendar"></i>

         </button>

     </span>

</p>

      No Controller o que fiz foi configurar uma variável para saber se o datepicker está aberto ou fechado e o objeto passado como parâmetro no input.

. . .

_self = this;

_self.parametros = {};

_self.openDatIni = false;

/**

* método que verifica se o datepicker está aberto.

*/

_self.opened = function(datepicker) {

    if (datepicker == 'dataIni') {

        _self.openDatIni = true;

    }

};

/**

* propriedades passadas para os datepicker's

*/

_self.options = {

    showWeeks : false,

    showButtonBar : false,

    autoclose : true,

    language : "pt-BR",

};

. . .

Também fiz uma função para a mascara da data:

. . .

 

/**

* Máscara para data, sem validar, apenas formata.

*

* @param component

*/

function formatDate(component) {

     var v = component.value;

     if (v.match(/^\d{2}$/) !== null) {

         component.value = v + '/';

     } else if (v.match(/^\d{2}\/\d{2}$/) !== null) {

         component.value = v + '/';

     }

};

. . .
     Dessa forma, o datepicker está pronto para ser usado... mas existe uma série de configurações adicionais que vale a pena dar uma estudada como trabalhar com feriados, etc... 

    

        Até a próxima...