Datepicker with Angularjs

Question

Datepicker with Angularjs

Navigation

#1 by (3 votes)
#2 by (0 votes)

1

Good Night, I'm using a directive for a Datepicker

DIRETIVE

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 get the value of input in my controller it comes that 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

angularjs

asked by anonymous 04.09.2015 / 08:35

2 answers

0

Searching the AngularUI documentation, I noticed that they use the date filter. Would it suit you?

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

Source: link

04.09.2015 / 12:48

Bootstrap Modal Loop While Opening item within Modal Why does Netbeans IDE not automatically delete Build from a web java application that was imported? [closed]

score 3 · Accepted Answer

The dateChange event returns a date, not a string. If you want to display a string with the local date, use the .toLocaleDateString() method.

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 toLacaleDateString() will print the date using the client format, in our case 'dd / MM / yyyy', but if a North American client accesses your page it will look in the format 'M / d / yyyy ', in which 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 options to change how 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 of curiosity, changing the calendaio and the numerical 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><scriptid="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, simply hover over the table. If you want everyone on the globe to see the date in dd/MM/yyyy format, use .toLocaleDateString('pt-BR-u-nu-latn-ca-gregory') .