CODEWITHSUNDEEP
angularjsangular-ui-bootstrap
Richard C
Richard C

Reputation: 171

Angular Js DatePicker not showing anything in the input but when you click the calendar popup is correct

Using Angular 1.5.2, UI-Bootstrap 1.2.5, Bootstrap css 3.3.6

So my json data comes in with the date as a string (I can't help or change that).

"start": "2014-06-12"

I use moment to convert to a date. //part of a larger object returned from an ajax call

$scope.item=data[0];
$scope.item.startM=moment($scope.item.start);
$scope.item.endM=moment($scope.item.end);

In the {{item}} I see visually on screen "start":"2014-06-12" "startM":"2014-06-12T04:00:00.000Z"

In the console I can display the startM:o _d:Thu Jun 12 2014 00:00:00 GMT-0400 (Eastern Daylight Time) _f:"YYYY-MM-DD" _i:"2014-06-12" _isAMomentObject:true _isUTC:false _isValid:true _locale:A

The input field is blank????

When I click on the calendar to see the date it's selected the correct date and will display properly in the input field if I select it. 

<input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="item.end" is-open="popup2.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" alt-input-formats="altInputFormats" /><span class="input-group-btn"><button type="button" class="btn btn-default" ng-click="open2()"><i class="glyphicon glyphicon-calendar"></i></button>     </span>

$scope.dateOptions = {
formatYear: 'yy',
maxDate: new Date(2020, 5, 22),
minDate: new Date(),
startingDay: 1

};

$scope.formats = ['yyyy-MM-dd','dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];

$scope.format = $scope.formats[0];

I know I'm not providing much detail but I'm struggling to understand why the calendar knows the correct date but the input box doesn't...

Upvotes: 1

Views: 1318

Answers (2)

Charles Boyung
Charles Boyung

Reputation: 2481

The problem is that the uib-datepicker-popup appears to require a date generated by uibDateParser. You need to do something like this instead of using moment.js:

$scope.item.start = uibDateParser.parse($scope.item.start, "yyyy-MM-dd")

I can't tell you why it shows correctly in the popup but not in the text box, but it is what it is at this point I'm sure.

Upvotes: 0

Lex
Lex

Reputation: 7204

You have minDate: new Date(). That is today, but then you are attempting to set the date to June 12, 2014 which is less than the minimum date you have specified. That's probably why it's blank.

Upvotes: 1

Related Questions