How to format the date of an input [date] in the format dd / mm / yyyy '?

Question

How to format the date of an input [date] in the format dd / mm / yyyy '?

Navigation

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

6

I have a page, built with AngularJS, which has a input [type = date] .

Basically, what I want is to take that date and format (ie, display to the user) using the format 'dd/MM/yyyy' (for example: 28/05/2015 ).

What is the problem?

Today, are not all browsers that support input[type=date] . Those who support (such as Chrome and Opera) format the date input in 'dd/MM/yyyy' format, according to the browser settings.

In browsers that do not support (like Firefox and Safari), Angular uses the format yyyy-MM-dd to format the date of input . This format, which although legible, may not please the users of the application, who are accustomed to the Brazilian format.

What is the solution?

In short, I could not find any way to fix this.

Angular has no directive to set the input format. So I tried to implement a directive that would do this job for me, following some SO-EN posts:

The result of this was the following directive:

module.directive("input", ["$filter", function($filter) {
    return {
        require: "ngModel",
        restrict: "E",
        link: function(scope, element, attrs, ngModelController) {
            if (element.attr("type") != "date") {
                return;
            }

            if (verificaSeNavegadorNaoSuportaInputDate()) {
                ngModelController.$parsers.push(function(dataEmString) {
                    return converteStringParaData(dataEmString);
                });

                ngModelController.$formatters.push(function(data) {
                    return formataDataParaString(data);
                });
            }
        }
    };
}]);

With this directive, I can even format the date set in the model, but I can not turn user input on a Date object . More precisely,% w / w% of% of the NgModelController fails, since, supposedly, the value of $validator is not a date.

To try to illustrate: using the directive above, the value of date is equal to input .

Does anyone have any idea how I can implement / fix this policy?

javascript angularjs

asked by anonymous 29.05.2015 / 04:48

2 answers

In a data class can you have properties other than those generated automatically? Is PHP considered open source?

score 1 · Answer 1

//Com js pode fazer da seguinte forma
// O input type=date vem no seguinte formato yyyy-mm-dd

// Para setar o valor caso esteja no formato dd/mm/yyyy

document.querySelector('[type=date]').value = '08/06/2017'.split('/').reverse().join('-');

// Para transformar de '2017-06-08' (formato devolvido no //document.querySelector('[type=date]').value) para //'08/06/2017'. Pode fazer isso: 

var brDate = '2017-06-08'.split('-').reverse().join('/');
var inputDate = '08/06/2017'.split('/').reverse().join('-');

console.log("br date: " + brDate);
console.log("input date: " + inputDate);

<input type="date" />

score 0 · Answer 2

Your idea of creating a directive can work if you use filters. I saw that you added the $ filter service in your code, but you did not use it.

Take a look at the code below:

module.directive("input", ["$filter", function($filter) {
    return {
      require: 'ngModel',
      link: function(scope, element, attrs, ngModelController) {
        if (element.attr("type") != "date") {
            return;
        }
        ngModelController.$parsers.push(function(data) {
          //View -> Model
          return data;
       });
       ngModelController.$formatters.push(function(data) {
          //Model -> View
          return $filter('date')(data, "DD-MM-YYYY");
        });
      }
    }
  };
}]);

I think you just needed to use the $ filter service in your directive as I did in the code above.

I hope you have helped.