angular-xeditable ui.bootstrap.datepicker Parse Error

Question

I am not sure what I am doing wrong here, I am trying to add a angular-xeditable datepicker to an editable-form but I am getting the following error when the form is displayed

Error: [$parse:syntax] http://errors.angularjs.org/1.3.15/$parse/syntax?p0=Jun&p1=is%20an%20unexpected%20token&p2=5&p3=Mon%20Jun%2008%202015%2013%3A37%3A02%20GMT-0400%20(EDT)&p4=Jun%2008%202015%2013%3A37%3A02%20GMT-0400%20(EDT)
    at Error (native)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js?ver=1.3.15:6:417
    at ib.throwError (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js?ver=1.3.15:191:165)
    at ib.parse (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js?ver=1.3.15:189:457)
    at $get (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js?ver=1.3.15:110:285)
    at https://workland.ca/wp-content/themes/upc/bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js?ver=1.0:8:23047
    at Object.r [as forEach] (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js?ver=1.3.15:7:302)
    at link (https://workland.ca/wp-content/themes/upc/bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js?ver=1.0:8:22940)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js?ver=1.3.15:70:141
    at $ (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js?ver=1.3.15:70:197) <input type="text" class="form-control ng-pristine ng-untouched ng-valid ng-isolate-scope" ng-model="$data" datepicker-popup="dd-MMMM-yyyy" datepicker-mode="day" show-weeks="true" starting-day="0" init-date="Mon Jun 08 2015 13:37:02 GMT-0400 (EDT)" min-mode="day" max-mode="year" format-day="dd" format-month="MMMM" format-year="yyyy" format-day-header="EEE" format-day-title="MMMM yyyy" format-month-title="yyyy" year-range="20" show-button-bar="true" current-text="Today" clear-text="Clear" close-text="Done" close-on-date-selection="true" date-picker-append-to-body="false">

Form html.

<form                                   
   onbeforesave="onsave({$data:$data})"
   editable-form 
   name="forms.{{formName}}"
   >
   <!-- more form controles... -->
   <div 
      editable-bsdate="item.dateobtained" 
      e-datepicker-popup='yyyy-MM-dd'
      e-name="dateobtained"
      onbeforesave="" 
      e-required>
   </div>
</form>

Answer 1

I just had this come up and thought I'd pass along where I got to with it. I'm using xeditable 0.1.9 and ui-bootstrap 0.14.3. The error comes from a date object and I tracked it down to the init-date attribute for the datepicker. If you don't specify an init-date, then xeditable puts in "new Date()" and that's where the date object comes from that causes the error. I've tried setting the attribute to something else using e-init-date, but I couldn't find anything that works. I ended up going into the code and commenting out line #113 so xeditable doesn't do anything for init-date, it just lets ui-bootstrap deal with it through its defaults. It looks like the datepicker sets as default of "new Date()" as well so I don't know why they aren't the same. But if I comment out that line, then everything works and there is no more parse error.

I found some other oddities as well. The format set with e-datepicker-popup is pretty much ignored by the datepicker. What I did was use e-datepicker-popup as usual and then repeat the format as e-datepicker-popup-x-editable. Something like this:

e-datepicker-popup='yyyy-MM-dd' e-datepicker-popup-x-editable='yyyy-MM-dd'

That made it so the date was always displayed the way I wanted it, whether it was in edit mode or not and whether the popup calendar was visible or not. Otherwise the format changed depending on the state of the control.