Datepicker with Angularjs

Question

Good evening, I’m using a directive for a Datepicker

DIRECTIVE

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);
        scope.$apply();
      });
    }
  };
});

but when I will take the value of input in my controller he comes this way

Tue Sep 01 2015 00:00:00 GMT-0300 (Hora oficial do Brasil)

and I want it to come normal 01/09/2015 for example

Answer 1

The dateChange event returns a date and not a string, if you want to display a string with the local date, use the method .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 that the toLacaleDateString() will print the date using the client format, in our case 'dd/MM/yyyy', but if an American client accesses your page will see in the format’M/d/yyyy', in this case you can force to display in a specific format.

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

You can also set the options to modify the way the date is displayed:

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

And an example as a matter of curiosity, changing the calendar and the numeric system of the date:

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>

To see the format used, just hover over the table. If you want everyone on the globe to see the date in the format dd/MM/yyyy, use .toLocaleDateString('pt-BR-u-nu-latn-ca-gregory').

Answer 2

Searching the Angularui documentation, I noticed that they use the date filter. It would suit you?

<datetimepicker data-ng-model="data.date"></datetimepicker>
<p>Selected Date: {{ data.date | date:'yyyy-MM-dd HH:mm' }}</p>

Source: https://github.com/dalelotts/angular-bootstrap-datetimepicker