Changing The Format Of An Input Date With Angularjs Not Working As Expected

Well, I want to show an input date field but with the format changed. I mean, the default format is: yyyy-MM-dd (2015-11-20), but I want it: (11-20-2015). There's a jsfiddle I foun

Solution 1:

This is because .text() will not apply to an <input /> element. You'll need .val() instead.

You can do a very basic check to cover both cases. Observe the following (untested)...

element[0].value !== undefined ? element.val(/*...*/) : element.text(/*...*/)

Furthermore per discussion, keep in mind the total lack of cross browser support for type="date". Perhaps finding an off the shelf datepicker could be in your best interest here - likely resolving your format restriction difficulties as well.

Solution 2:

Well, I have solved my issue in 2 ways:

1) With MomentJs

attrs.$set('myCurrentDate', momentFilter(date, format));

and then

.filter('moment', function() {
    returnfunction(date, formated) {
        moment.locale('es');
        var momented = moment(date).format(formated);
        return momented;
    };
});

See the Plunker

---

2) With Javascript native Date object

attrs.$set('myCurrentDate', dateFilter(date, format));

See the Plunker

---

But in both cases, with the help of css:

input:before {
    position: absolute;
    top: 3px; left: 3px;
    content: attr(my-current-date);
    display: inline-block;
    color: black;
}

PS: Note the difference between the definition of the variable $scope.format in both cases.

---

EDIT:

But if we don't want complications, we can use the excellent datepicker from AngularUI. It has a lot of features.

And this take me to a 3rd way for solving my issue: See the Plunker