javascript - angular : how can i bind select containing date with angular bootstrap calendar? -

i fill dropdown list array containing objects date attribute. list binded on date variable. angular boostrap calendar binded on variable.

<select id="installfulldate"     name="installfulldate"      class="form-control"     ng-options="installationslot.displaydate installationslot.displaydate installationslot in installationslots"     ng-model="user.installation.date"     required> </select> <img class="calendar-datepicker"     src="images/calendar.png"     datepicker-popup="mm/dd/yyyy"     ng-model="user.installation.date"     is-open="opened"     datepicker-options="dateoptions"     date-disabled="disableddate(date, mode)"     min-date="mindate"     max-date="maxdate"     ng-required="true"     close-text="x"     ng-click="open($event)"> <span class="field-description">mm/dd/yyyy</span> 

the binding works when select element in select, element selected in angular boostrap calendar.

when select element in calendar, date not selected in dropdown list.

i think angular can't find matching object in dropdown based on date. angular bootstrap calendar can bind on string ?

i'm guessing installationslots array items displaydate string. binding work need work around couple of issues.

• the date picker control includes time if initial date includes time (thus clicking nov 30 give date+time nov 30)
  • you can work around calling sethours(0, 0, 0, 0) on date before using init date picker
• two date objects same date not equal: (new date(2014, 0, 1) == new date(2014, 0, 1)) returns false

based on issues, using date object doesn't going work.

one solution use string comparisons, how keep string in sync user.installation.date property?

if setup new property using getter/setter uses same formatting displaydate property can use string matching select list, binding custom property (which under covers uses real date), , leave date picker bound real date, e.g.:

html

<datepicker ng-model="user.installation.date"></datepicker> <select ng-model="formatteddate" ng-model-options="{ gettersetter: true }"   ng-options="slot.displaydate slot.displaydate slot in installationslots"> </select> 

note: ng-model-options="{ gettersetter: true }" important!

javascript

$scope.formatteddate = function(value) {   if (angular.isdefined(value)) {     // set     $scope.user.installation.date = new date(date.parse(value));   }   return $scope.user.installation.date.tolocaledatestring(); }; 

note: i've used tolocaledatestring() convenience here, need make sure formatting same displaydate. moment js library doing date manipulation , formatting.

the return statement above become this:

// default empty string var result = ''; // moment use todays date if passed null or undefined value, don't want if (angular.isdefined($scope.user.installation.date)) {     // format output "november 30th 2014"     result = moment($scope.user.installation.date).format('mmmm yyyy'); } return result; 

simply adjust format() statement suit needs.