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