Angular + Bootstrap + Datepicker = not working

Question

I'm using AngularJs 1.6 with angular-ui-bootstrap 2.5.0 (bootstrap-ui-tpl.min.js)

On loading the page, the model value (dateOfBirth) is not getting pre-populated in the date picker textbox. It seems, many have reported similar issues for different versions of angular/bootstrap but nothing seems to work.

HTML:

  <input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="dateOfBirth" datepicker-options="dateOptions"/>
  <span class="input-group-btn">
    <button type="button" class="btn btn-default" ng-click="openDobDatePicker()"><i class="glyphicon glyphicon-calendar"></i></button>
  </span>

Javascript:

$scope.format = 'dd/MM/yyyy'

$scope.dateOfBirth = '05/12/2004'

$scope.dateOptions = {
  maxDate: new Date(),
  startingDay: 1,
  showWeeks: false
}

Edit: It seems angular provides uibDateParser to parse String to Date object. However, the following fails silently:

$scope.dateOfBirth = $uibDateParser.parse('05/12/2004', 'dd/MM/yyyy')

tanmay · Accepted Answer · 2017-04-21 11:22:35Z

2

It's not getting populated because it's a string and not a valid Date. So, if you change it like,

$scope.dateOfBirth = new Date("05/12/2004");

..it would work! Also, note that new Date(..) will come with local timezone so in case you want to change timezone or anything regarding manipulation of dates, momentjs is a great library to handle those.

EDIT: If your format is dd/MM/yyyy, you can maybe do something like this to convert in valid date:

var parts ='05/12/2004'.split('/');
$scope.dateOfBirth = new Date(parts[2],parts[1]-1,parts[0]));

edited Apr 21, 2017 at 11:22

answered Apr 21, 2017 at 10:49

tanmay

7,9112 gold badges23 silver badges39 bronze badges

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

2 Comments

saravana_pc Over a year ago

I just tried as you suggested. Instead of populating 05/12/2004, it is populating 12/05/2004 in the textbox. Also, is it possible to automatically bind the date in textformat to the datePicker?

tanmay Over a year ago

@saravana_pc not possible to bind textformat as date AFAIK. for the former, updated the answer.

Collectives™ on Stack Overflow

Angular + Bootstrap + Datepicker = not working

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related