O evento dateChange retorna uma data e não uma string, caso queira exibir uma string com a a data local, use o método .toLocaleDateString()
.
angular.module('app').directive('datepicker', function() {
return {
restrict: 'A',
require : 'ngModel',
link: function(scope, element, attrs, ngModelCtrl) {
$(element).datepicker({
dateFormat:'dd-mm-yyyy',
language: 'pt-BR',
pickTime: false,
startDate: '01-11-2013',
endDate: '01-11-2030'
}).on('changeDate', function(e) {
ngModelCtrl.$setViewValue(e.date.toLocaleDateString());
scope.$apply();
});
}
};
});
Note que o toLacaleDateString()
irá imprimir a data usando o formato do cliente, no nosso caso 'dd/MM/yyyy', mas se um cliente norte americano acessar a sua pagina irá ver no formato 'M/d/yyyy', neste caso você pode forçar para exibir em um formato especifico.
var data = new Date();
console.log(data.toLocaleDateString());
console.log(data.toLocaleDateString("pt-BR"));
console.log(data.toLocaleDateString("pt-PT"));
console.log(data.toLocaleDateString("en-US"));
Você tambem pode setar as opções para modificar a forma como a data é exibida:
var data = new Date();
var options = {};
options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }
console.log(data.toLocaleDateString([], options));
options = { timeZone: 'UTC', timeZoneName: 'short' }
console.log(data.toLocaleDateString([], options));
E um exemplo a titulo de curiosidade, alterando o calendaio e o sistema numerico da data:
var sistemas = ["arab", "arabext", "bali", "beng", "deva", "fullwide", "gujr", "guru", "hanidec", "khmr", "knda", "laoo", "latn", "limb", "mlym", "mong", "mymr", "orya", "tamldec", "telu", "thai", "tibt"];
var calendarios = ["buddhist", "chinese", "coptic", "ethioaa", "ethiopic", "gregory", "hebrew", "indian", "islamic", "islamicc", "iso8601", "japanese", "persian", "roc"]
var data = new Date();
var datas = sistemas.map(function (sistema) {
return {
sistema: sistema,
calendarios: calendarios.map(function (calendario) {
var format = "pt-BR-u-nu-" + sistema + "-ca-" + calendario;
try {
return {
calendario: calendario,
format: format,
exemplo: data.toLocaleDateString(format)
}
} catch (e) {
}
})
}
});
var srce = document.getElementById("tmpl");
var tmpl = Handlebars.compile(srce.innerHTML);
document.body.innerHTML = tmpl(datas);
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.1/handlebars.js"></script>
<script id="tmpl" type="text/template" >
<table>
<thead>
<tr>
<th></th>
{{#each this.[0].calendarios}}
<th>{{calendario}}</th>
{{/each}}
</tr>
</thead>
<tbody>
{{#each this}}
<tr>
<th>{{sistema}}</th>
{{#each calendarios}}
<td><a href="#" title="{{format}}">{{exemplo}}<a></td>
{{/each}}
</tr>
{{/each}}
</tbody>
<table>
</script>
para ver o formato utilizado, basta passar o mouse sobre a tabela.
Se você quizer que todos no globo vejam a data no formato dd/MM/yyyy
, use .toLocaleDateString('pt-BR-u-nu-latn-ca-gregory')
.