Format date input in view Angular JS

Question

I have a dynamic form that receives data from an array and iterates over it. In case of a date field I want to send in this format into the controller "dd/MM/yyyy" or "dd/MM/yyy hh:mm" tried to use the ng-bind but the controller receives in other format which is "Wed Dec 23 2015 00:00:00 GMT-0100 (Local Standard Time)", that should be the format to send via $http.post in a service.

Here is my field input

Only date:

 <div class="form-field">
                    <label>{{fa.title}}</label>
                    <p class="input-group">
                        <input type="date" class="form-control" 
                               ng-model="sendForm[fa.name]"
                               placeholder="dd/MM/yyyy"
                               ng-bind="sendForm[fa.name] | date:'dd/MM/yyyy'"/>
                    </p>
                </div>

Date and hour:

 <div class="form-field">
                    <label>{{fa.title}}</label>
                    <p class="input-group">
                        <input type="datetime-local" class="form-control" 
                               ng-model="sendForm[fa.name]"
                               placeholder="dd/MM/yyyy hh:mm"
                               ng-bind="sendForm[fa.name] | date:'dd/MM/yyyy hh:mm'"/>
                    </p>
                </div>

controller.js

app.controller("myAppCtrl", ["$scope", "SendForm", "FORMS", function ($scope, SendForm, FORMS) {
   $scope.sendForm = function (form) {
    SendForm.sendInfo(form,
        function onSuccess() {
            $scope.success = true;
        },
        function onError(message) {
            $scope.error = true; 
        },
        function onFinally() {
            $scope.clearForm(form);
        })
}]);

service.js

app.factory("SendForm", ["$http", "CONFIG", "FORMS","$httpParamSerializer", function ($http, CONFIG, FORMS,$httpParamSerializer) {
return {
    sendInfo: function (form, onSuccess, onError, onFinally, message) {
        var data = {
            absolute: CONFIG.absolute
        };

        for (var i = 0, length = FORMS.form_variables.length; i < length; i++) {
            if (angular.isUndefined(form[FORMS.form_variables[i].name])) {
                var key = FORMS.form_variables[i].name;
                var value = "";
                data[key] = value;
            } else {
                var key = FORMS.form_variables[i].name;
                var value = form[FORMS.form_variables[i].name];
                data[key] = value;
            }
        }
        var config = {
            headers: {'Content-Type': 'application/x-www-form-urlencoded'}
        };

        $http.post(CONFIG.urlSendForm, $httpParamSerializer(data), config).success(function () {
            onSuccess();
            onFinally();
    
 }
}]);

Rabi · Accepted Answer · 2015-12-11 11:37:55Z

1

The "date" you are using is just a Angualr filter used in UI to return / display the date in correct format. It doesn't change the actual value (simply returns the formatted value).

If you want to get the date as 'dd/MM/yyyy hh:mm' in you controller, use it like below -

angular.module('myModule')
       .controller('myController', ['$filter',  '$scope', function($filter, $scope) {

       var formattedDate = $filter('date')($scope.sendForm[fa.name], 'dd/MM/yyyy hh:mm');


}]);

answered Dec 11, 2015 at 11:37

Rabi

2,23019 silver badges18 bronze badges

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

1 Comment

changez Over a year ago

Is to be format in my service before sending via a $post. Ive added now to the question the service and controller, can you adapt you answer, because that way doenst work @Rabi

Gonzalo Pincheira Arancibia · Accepted Answer · 2015-12-11 15:33:38Z

0

You need format the date in the controller AND in the service for send this formatted date to server?? which angular version that you used? If you recognize in the service when a value it's a date, you may inject the $filter service in your factory and use it for format the date.

In your Factory

app.factory("SendForm", ["$http", "$filter","CONFIG", "FORMS","$httpParamSerializer", function ($http, $filter,CONFIG, FORMS,$httpParamSerializer) {
return {
    sendInfo: function (form, onSuccess, onError, onFinally, message) {
        var data = {
            absolute: CONFIG.absolute
        };
         var dateHourRegex = /\d{2}\/\d{2}\/\d{4}\s+\d{2}\:\d{2}/,
             onlyDateRegex = /\d{2}\/\d{2}\/\d{4}/;



        for (var i = 0, length = FORMS.form_variables.length; i < length; i++) {
            if (angular.isUndefined(form[FORMS.form_variables[i].name])) {
                var key = FORMS.form_variables[i].name;
                var value = "";
                data[key] = value;
            } else {
                var key = FORMS.form_variables[i].name;
                var value = form[FORMS.form_variables[i].name];
                if(onlyDateRegex.test(value)){
                   value = dateHourRegex.test(value) ? $filter('date')(value, 'dd/MM/yyyy hh:mm') 
                                                     : $filter('date')(value, 'dd/MM/yyyy');
                }
                data[key] = value;
            }
        }
        var config = {
            headers: {'Content-Type': 'application/x-www-form-urlencoded'}
        };

        $http.post(CONFIG.urlSendForm, $httpParamSerializer(data), config).success(function () {
            onSuccess();
            onFinally();

 }
}]);

edited Dec 11, 2015 at 15:33

answered Dec 11, 2015 at 13:02

Gonzalo Pincheira Arancibia

3,6332 gold badges26 silver badges44 bronze badges

2 Comments

Gonzalo Pincheira Arancibia Over a year ago

this way to recognize if a value its a date it's not safe, would be better using regular expressions.

changez Over a year ago

Yes should be send to the server in that format, the version of angular is v1.4.8. Need to see a way to define if a field is a date in the most dynamic way.

Collectives™ on Stack Overflow

Format date input in view Angular JS

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related