Angular UI Bootstrap Datepicker: How to use date as a string and in a specific format

Question

What I am trying to to do is when the user selects a specific date, to be able to use that date as a string, put it as data into a JSON object and retrieve data from the database as response.

Selecting the Day I want I am getting this in the console log:

Fri Sep 04 2015 16:15:24 GMT+0300 (GTB Daylight Time)

And in order to use it I want to convert it into this:

20150904

I even used a directive but I suppose this is for a preview only.

.directive('datepickerPopup', function (){
return {
  restrict: 'EAC',
  require: 'ngModel',
  link: function(scope, element, attr, controller) {
    //remove the default formatter from the input directive to prevent conflict
    controller.$formatters.shift();
  }
 }
});

Does anyone have a clue how this is going to be done? Thank you in advance!

Answer 1

Try this-

This is the sample code , you can try with your code -

angular.module('frontendApp')
    .controller('SearchCtrl',function ($scope, $filter) {

        $scope.formattedDate = $filter('date')($scope.date_of_birth, "dd/MM/yyyy");
        console.log('Formatted Date: ' + $scope.formattedDate);

    });

Replace, "$scope.date_of_birth" with your ng-model.

Reference Links

http://plnkr.co/edit/akLekgX7b1rcaMg6B9rI?p=preview

https://sonnguyen.ws/angularjs-datetime-format/

Answer 2

You can use simple JavaScript for that and use it anywhere you feel fit(directive, filter, service etc.). Suppose 'date' contains your date. Here's the code:

    var year = date.getFullYear();
    var month = date.getMonth();
    month = month + 1;
    if(month < 10) {
        month = '0' + month;
    }
    var day = date.getDate();
    if(day < 10) {
        day = '0' + day;
    }
    date = year.toString() + month.toString() + day.toString();
    return date;