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!

random · Accepted Answer · 2015-09-04 16:08:31Z

4

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/

edited Sep 4, 2015 at 16:08

answered Sep 4, 2015 at 14:17

random

7,9093 gold badges21 silver badges25 bronze badges

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

7 Comments

Margarita Over a year ago

Hellon Aparna, is this in angular?

random Over a year ago

Actualy, i was also facing the same problem. Since, we were using the laravel framwork, the inputted date taken is in laravel format. In the above code, the input is taken from the request

Margarita Over a year ago

Ok cause -> symbol confused me

random Over a year ago

What is the backend and framework, that you are using?

Margarita Over a year ago

I am using Java Jersey

|

Tarun Dugar · Accepted Answer · 2015-09-04 14:16:21Z

0

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;

answered Sep 4, 2015 at 14:16

Tarun Dugar

8,9938 gold badges50 silver badges81 bronze badges

6 Comments

Margarita Over a year ago

Hello Tarun, $scope.dt contains the selected day

Tarun Dugar Over a year ago

It is not just a day it is a date. Just replace 'date' with '$scope.dt' in my code.

Margarita Over a year ago

Tarun I can't get this to work, I assigned $scope.dt to a variable for example dateFormated and replaced it in your code into a directive but it's giving me a syntax error

Tarun Dugar Over a year ago

Please create a plunker. Can't help you in this way.

Margarita Over a year ago

oh indeed! It was working in my project though, give me a moment please

|

Collectives™ on Stack Overflow

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

2 Answers 2

7 Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related