Getting AngularUI Bootstrap datepicker to recognize YYYYMMDD format?

Question

We have legacy birth date data in the format of YYYYMMDD (20151022). Angular and the ui-bootstrap datepicker obviously don't like this format. Also, our new UI requirements are to display the format as MMM, d YYYY (Oct, 22 2015). I'm not seeing a way to enforce a non-standard date format (for data, not for display) in the documentation. Is this not supported or am I just overlooking it?

davidkonrad · Accepted Answer · 2015-10-24 16:41:41Z

1

I assume your datepicker is bound to a variable - ng-model="date". Then simply $watch this variable and do the nessecary formatting when a string is assigned to it :

$scope.date = ''; 

$scope.$watch('date', function(newValue, oldValue) {
    if (typeof newValue == 'string') {
      var tempDate = new Date(
          newValue.substr(4,2)+'-'+
          newValue.substr(6,2)+'-'+
          newValue.substr(0,4)
       );
       $scope.date = !isNaN(tempDate.getTime()) ? tempDate : new Date();
    }
})

This will return a valid date object if you have assigned a string to date on the format yyyymmdd; if something has gone wrong date will be set to today.

$scope.date = '20151022'; //set the datepicker to 10-22-2015
$scope.date = new Date('01-01-1900') //etc works as usual

In order to use a display format on the form Oct, 22 2015 you are almost right, it should just be lowercase y's :

uib-datepicker-popup="MMM, d yyyy"

the above in a plnkr -> http://plnkr.co/edit/ne60bBaTuca7wajTHP9w?p=preview

edited Oct 24, 2015 at 16:41

answered Oct 24, 2015 at 16:27

davidkonrad

85.7k17 gold badges211 silver badges273 bronze badges

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

1 Comment

Brian Over a year ago

Thanks @davidkonrad. This helps to get me closer, however I need to send the data back to the server in the legacy YYYYMMDD format.

Collectives™ on Stack Overflow

Getting AngularUI Bootstrap datepicker to recognize YYYYMMDD format?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related