Changing the format of an input date with AngularJs not working as expected

Question

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 found with momentjs (without angular) and works exactly as I want.

Working with AngularJs, I have done too with a directive, but with a span field (and works). But if I do with an input date, it doesn't works.

This is the html:

<body ng-app="docsTimeDirective">
  <div ng-controller="Controller">
  Current date is: <span my-current-time="format"></span><hr/>
  <input type="date" ng-model="myDate.value" my-current-time="format">
</div>
</body>

And the Js:

(function(angular) {
  'use strict';
angular.module('docsTimeDirective', [])
  .controller('Controller', ['$scope', function($scope) {
    $scope.format = 'MM/dd/yyyy';
    $scope.myDate = {
      value: new Date()
    };
  }])
  .directive('myCurrentTime', ['$interval', 'dateFilter', function($interval, dateFilter) {

    function link(scope, element, attrs) {
      var format,
          timeoutId;

      function updateTime() {
        element.text(dateFilter(new Date(), format));
        console.log(dateFilter(new Date(), format));
      }

      scope.$watch(attrs.myCurrentTime, function(value) {
        format = value;
        updateTime();
      });

      element.on('$destroy', function() {
        $interval.cancel(timeoutId);
      });

      // start the UI update process; save the timeoutId for canceling
      timeoutId = $interval(function() {
        updateTime(); // update DOM
      }, 1000);
    }

    return {
      link: link
    };
  }]);
})(window.angular);

Here is the Plunker. Some ideas?

scniro · Accepted Answer · 2015-11-20 18:23:10Z

2

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.

edited Nov 20, 2015 at 18:23

answered Nov 20, 2015 at 17:46

scniro

17k8 gold badges67 silver badges108 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

robe007 Over a year ago

Ok, I tried it with element.val(dateFilter(new Date(), format)); and throws: The specified value "11/20/2015" does not conform to the required format, "yyyy-MM-dd"

scniro Over a year ago

with an input type="date" - it does need to be in this format. Have you confirmed the returned value of your date that dateFilter returns? Here is a fiddle that shows a date input working in its simplest form

robe007 Over a year ago

Have you see the plunkr? In the span field returns the date as I want.

scniro Over a year ago

Also that first fiddle you provided - moment is doing some custom work there. If you inspect that datepicker you'll see the appropriate value as such value="2015-11-20". You'll be looking into some custom AngularJS work to get that <input> to look different

scniro Over a year ago

@robe007 give this fiddle a look for formatting

|

robe007 · Accepted Answer · 2015-11-20 23:05:44Z

Well, I have solved my issue in 2 ways:

1) With MomentJs

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

and then

.filter('moment', function () {
    return function (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

Collectives™ on Stack Overflow

Changing the format of an input date with AngularJs not working as expected

2 Answers 2

8 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related