xeditable date in form not appearing its value in edit mode

[ehsan-hakimi]

I have used bootstrap 3.3.6 / angular 1.5.8 / ui-bootstrap-tpls 2.1.3 / angular-xeditable - 0.3.0 I am trying to have a editable table (on each row). Everything work fine except date field. It will show date correctly in display mode but by clicking on Edit --> the issue is it will show an empty date picker. Could you please help? Below is the part of code in html page `

<td class="col-md-1">
    <span editable-text="tl.title" e-name="Title" e-form="timeLogForm" onbeforesave="checkTitle($data)">    
    {{tl.title}}</span>
</td>
<td class="col-md-2 xeditable-datepicker">
    <span e-form="timeLogForm" editable-bsdate="tl.logDate" e-ng-model="tl.logDate" e-is-open="opened.$data" e-ng-click="open($event,'$data')" e-datepicker-popup="yyyy/MM/dd" e-datepicker-options="calOptions" e-readonly="true">     
    {{tl.logDate| date : "yyyy/MM/dd": "+1000" }}</span>    </td>    </tr>`

and here is the part of code in controller

        $scope.opened = {};
    $scope.open = function($event, elementOpened) {
        $event.preventDefault();
        $event.stopPropagation();
        $scope.opened[elementOpened] = !$scope.opened[elementOpened];
    };  
    $scope.calOptions = {
        minDate: new Date(),
        showWeeks: false
    };  

tl.logDate which is date field for one of the row has correct value as xeditable will show it correctly in the table in display mode. I think the same issue as #526

[ckosloski]

Do you see any errors in the console? Can you provide the code that populates tl.logDate? Also, what happens if you remove e-datepicker-options? Currently if you want to set minDate and showWeeks it would be with e-min-date and e-show-weeks.

[ehsan-hakimi]

Thanks for your answer Cosloski, 1- No error in console as you can see in screenshot attached. and as you can see in display mode it has value. 2- here is the code that I populate tl. This is a SharePoint app that I am writing with Angular so the service layer is a SharePoint REST call which fetch data and show them in JSON format

        $.when(SharePointJSOMService.getAllTimelogsByREST($scope, TimeLogListName,timesheetID))
          .done(function(jsonObject) {
            console.log('in ctrl when SharePointJSOMService.getAllTimelogsByREST');
            angular.forEach(jsonObject.d.results, function(tl) {
              $scope.timesheet.timelogs.push({
                TLID: tl.Id,
                title: tl.Title,
                logDate: tl.TSLogDate,
                startTime: tl.TSStartTime,
                finishTime: tl.TSFinishTime,
                logBreaks: tl.TSLogBreak,
                subTotalMinutes: tl.TSLogSubtotalMinutes
                //totalHours: convertMinuteToHour(tl.TSTotalMinute)
              });
            });
          //$scope is not updating so force with this command
          if (!$scope.$$phase) {
            $scope.$apply();
          }
          console.log("time logs count is = "+$scope.timesheet.timelogs.length);
          })
          .fail(function(err) {
            console.info(JSON.stringify(err));
          });

3- nothing happen by adding/removing e-datepicker-options. Thanks

[ckosloski]

I am expecting something like this, but I don't see it tl.logDate = new Date(tl.logDate);

[ckosloski]

@ehsan-hakimi Since you are using Sharepoint, would you be able to answer this question #497? I know it's an older question, but since you are using Sharepoint, maybe a comment from you would help other users.

[ehsan-hakimi]

It is there. As you can see in above controller code angular.forEach(jsonObject.d.results, function(tl) { d.result object (which is JSON result from a call to DB) put in tl and 4 line below it, it will populate date field using below statement logDate: tl.TSLogDate, then populated object (including logDate field and other fields) push in timelogs array in scope as below $scope.timesheet.timelogs.push({

Also in html (which I didn't mention its entire code), I will get $scope.timesheet.timelogs and using <tr ng-repeat="tl in timelogs"> I will make a table of rows. I show each row of timelogs as a tl . That is the reason which {{tl.logDate| date : "yyyy/MM/dd": "+1000"}} (mentioned in my first comment code) will show logDate correctly in display mode because tl.logDate has value. But as soon as I press edit in any row which this code will be run <span e-form="timeLogForm" editable-bsdate="tl.logDate" e-ng-model="tl.logDate" > then it will show empty as a value of date (which is the case of issue here)

[ckosloski]

@ehsan-hakimi Is tl.LogDate a JavaScript Date Object like I posted above new Date(tl.logDate)?

The filter which prints the date will format date strings, they don't have to be a JS Date Object.

If you look at the documentation for the uib-datepicker:

The date object. Must be a Javascript Date object. You may use the uibDateParser service to assist in string-to-object conversion.

[ehsan-hakimi]

Thanks a lot Ckosloski, adding new Date(tl.logDate) to the controller while populating data fix my issue. tl.logDate was a C# date field so I was able to work with that but not a JS date field. Sorry for my mistake and appreciate for your time. Best regards,

[ehsan-hakimi]

Please close this.

[ehsan-hakimi]

As a suggestion, I have added this change to my code. You can apply it into the css of the module. In table row in edit mode, it will increase row vertical space. I checked and find out that it is due to this line code in CSS

.editable-wrap {white-space: nowrap;}

indeed if you change it to be

.editable-wrap {white-space: normal;}
.editable-wrap .editable-error{white-space:nowrap;}

then it work better. It won't increase space in edit mode unless there is a validation message that should be appear there. Best regards,

[ckosloski]

The CSS fix is already done and will be in the next release. You need to close this issue.

[ehsan-hakimi]

Thanks so much