Descrição

GumgaDate é um selecionador de data e hora, ele permite personaliza-lo com seus padrões de cores.

Instalação

// npm
npm i gumga-date-ng --save

// bower
bower install gumga-date-ng --save

//Injeção do modulo
angular.module('yourApp', ['gumga.date']);

<script src="node_modules/gumga-counter-ng/dist/gumga-date.min.js"></script>
<script src="bower_components/gumga-counter-ng/dist/gumga-date.min.js"></script>
Usando 

<gumga-date
  ng-model="nascimento"
  configuration="config">
</gumga-date>

angular.module('yourApp', ['gumga.date'])
.controller('ctrl', function(GumgaDateServiceProvider){

  //VOCÊ PODE FAZER CONFIGURAÇÕES "DEFAULT",
  //PARA SER APLICADA EM TODOS OS DATE,
  //QUE NÃO TIVER CONFIGURAÇÃO PROPRIA.
  GumgaDateServiceProvider.setDefaultConfiguration({
    activeMobileMode: true, //SE ESSA OPÇÃO ESTIVER HABILITADA, O CALENDARIO ABRIRÁ COMO ESTILO MODAL NO CELULAR.
    background: '#1abc9c', //DEFINE UMA COR OU IMAGEM DE FUNDO
    primaryColor: '#1abc9c', //DEFINE UMA COR PRIMARIA.
    fontColor: '#fff', //DEFINE A COR DAS FONTES
    format: 'dd/MM/yyyy', //FORMADO DA MASCARA DO DATE.
    minYear: 1700, //ANO MINIMO PERMITIDO
    timeZone: "America/Sao_Paulo", // TIMEZONE QUE SERA USADO
    maxYear: 2050, // ANO MÁXIMO PERMITIDO
    position: 'BOTTOM_LEFT', //POSIÇÃO QUE IRA ABRIR O CALENDARIO
    changeDateOnTab: false, //COLOCA A DATA ATUAL QUANDO PASSAR PELO DATE COM A TECLA TAB
    showCalendar: true, //MOSTRA OU OCULTA O CALENDARIO
    closeOnChange: false, //FECHA O CALENDARIO AO SELECIONAR UMA DATA.
    inputProperties: {
      class: 'form-control gmd' // APLICA CLASSES AO INPUT.
    }
  })


  //VOCÊ PODE ADICONAR UMA DATA COMO FERIADO
  GumgaDateServiceProvider.addHoliday("2017-11-03", 'Feriado de exemplo');


  //VOCÊ PODE FAZER CONFIGURAÇÕES ESPECIFICAS PARA UM DATE.
  //TODOS OS ATRIBUTOS QUE SÃO USADO NA CONFIGURAÇÃO DEFAULT, PODEM SER USADOS ABAIXO.
  $scope.config = {
    format: 'dd/MM/yyyy HH:mm',
    showCalendar: true,
    closeOnChange: false,
    inputProperties: {
      class: 'form-control gmd'
    },
    change: function(data){
       console.log(data); //FUNCAO EXECUTADA QUANDO HÁ MUDANÇA NA DATA.
    }
  }

})
Atributos
Parâmetro Tipo Requerido Descrição
configuration Object Não Com configuração você personalizar o date individualmente, quando esse atributo não é preenchido o componente vai procurar a configuração default, que pode ser informada pelo GumgaDateServiceProvider. Clique na aba JavaScript e veja um exemplo do uso.
icon String Não Utilize esse atributo para adicionar um ícone a esquerda da input do gumga date, informe o nome de um ícone com do Material Icons | Gumga Layout Necessário
label String Não Usado para adicionar um rotulo em cima da input do gumga date. | Gumga Layout Necessário