AngularJS Xeditable plugin bstime weird behaviour
Asked Answered
O

0

1

I love Xeditable plugin and using in my Angular Project. When I integrated bsdate and bstime with table, it works very well when my timeoffs json contain hardcode values like below,

$scope.timeoffs=[{"id":1,"name":"Christmas","recurrence":4,"bgdate":new Date(2015, 11, 24, 00, 00),"eddate":new Date(2015, 11, 25, 23, 59),"weekDayStart":0,"weekDayEnd":0},
{"id":2,"name":"New Year","recurrence":4,"bgdate":new Date(2015, 00, 01, 00, 00), "eddate":new Date(2015, 00, 01, 23, 59),"weekDayStart":0,"weekDayEnd":0}];

Table

<form editable-form name="form.holidayForm" id="form.holidayForm" onaftersave="checkTimeOffAfterSave()">
                <table id="tableDataOfTimeOffs" class="scroll table table-bordered table-hover table-condensed" width="100%" fixed-header1 rows="userSetup.rowsForTableRender4" style="border: 1">
                    <thead id="tableHeaderOfTimeOff" style="width: 100%;">
                        <tr style="font-weight: bold">
                             <th style="min-width: 75px"><label><b>{{ 'load.static.usersetup.HOLIDAY' | translate }}</b></label></th>
                             <th style="min-width: 70px"><label><b>{{ 'load.static.usersetup.RECURRENCE' | translate }}</b></label></th>
                             <th style="min-width: 70px"><label><b>{{ 'load.static.usersetup.BEGINWEEK' | translate }}</b></label></th>
                             <th style="min-width: 80px"><label><b>{{ 'load.static.usersetup.BEGINDATE' | translate }}</b></label></th>
                             <th style="min-width: 85px"><label><b>{{ 'load.static.usersetup.BEGINTIME' | translate }}</b></label></th>
                             <th style="min-width: 70px"><label><b>{{ 'load.static.usersetup.ENDWEEK' | translate }}</b></label></th>
                             <th style="min-width: 80px"><label><b>{{ 'load.static.usersetup.ENDDATE' | translate }}</b></label></th>
                             <th style="min-width: 85px"><label><b>{{ 'load.static.usersetup.ENDTIME' | translate }}</b></label></th>
                             <th style="width: 10px;" ng-show="!usrreadonly"><span ng-show="form.tableform.$visible">{{ 'load.static.usersetup.ACTION' | translate }}</span></th>
                        </tr>
                    </thead>
                    <tbody id="tableBodyOfTimeOff">
                         <tr ng-repeat="user in timeoffs | filter:filterUser" ng-show="timeoffs.length"  style="height: 35px;" id="timeOffRow{{$index}}">

                            <td title="{{ 'load.static.usersetup.TIMEOFF_HNM_TITLE' | translate }}" style="min-width: 75px">
                              <span editable-textfixedwith="user.name" e-form="form.holidayForm" onbeforesave="checkDuplicateTimeOff($data, user.id)" ng-readonly="usrreadonly">
                                {{ user.name || ''  }}
                              </span>
                            </td>
                            <td title="{{ 'load.static.usersetup.TIMEOFF_RECC_TITLE' | translate }}" style="min-width: 70px">
                              <span editable-select="user.recurrence" e-form="form.holidayForm" onshow="loadRecurrences()" e-ng-change="recurrenceSelect($index)" e-ng-options="g.id as g.text for g in recurrences" ng-readonly="usrreadonly" e-id="recurrence{{$index}}">
                                {{ showRecurrences(user) }}
                              </span>
                            </td>
                            <td title="{{ 'load.static.usersetup.TIMEOFF_DAYS_TITLE' | translate }}" style="min-width: 70px">
                              <span editable-selectfixedwith="user.weekDayStart" e-form="form.holidayForm" onshow="loadWeekDays()" e-ng-options="g.id as g.text for g in weekDays" ng-readonly="usrreadonly" e-id="weekDayStart{{$index}}" 
                              onbeforesave="checkWeekDaysFilled($data, $index)">
                                {{ showWeekDaysStart(user) }}
                              </span>
                            </td>
                            <td title="{{ 'load.static.usersetup.TIMEOFF_BDATE_TITLE' | translate }}" style="min-width: 80px">                            
                                <span editable-bsdate="user.bgdate" e-show-meridian="false" e-datepicker-popup="dd/MM/yyyy"  data-viewformat="dd/MM/yyyy" e-ng-disabled="bgdate{{$index}}" e-id="bgdate{{$index}}" onbeforesave="checkBGDateFilled($data, user.id)" >
                                    {{ (user.bgdate | date:"dd/MM/yyyy") || '' }}
                                </span> 
                            </td>
                            <td title="{{ 'load.static.usersetup.TIMEOFF_BTIME_TITLE' | translate }}" style="min-width: 85px">
                                <span editable-bstime="user.bgdate" e-show-meridian="false" e-minute-step="1" ng-readonly="usrreadonly" onbeforesave="checkBGDateFilled($data, user.id)" >
                                {{ (user.bgdate | date:"HH:mm") || '' }}
                               </span>
                            </td>
                            <td title="{{ 'load.static.usersetup.TIMEOFF_DAYS_TITLE' | translate }}" style="min-width: 70px">
                              <span editable-selectfixedwith="user.weekDayEnd" e-form="form.holidayForm" onshow="loadWeekDays()" e-ng-options="g.id as g.text for g in weekDays" ng-readonly="usrreadonly" e-id="weekDayEnd{{$index}}"
                              onbeforesave="checkWeekDaysFilled($data, $index)">
                                {{ showWeekDaysEnd(user) }}
                              </span>
                            </td>

                            <td title="{{ 'load.static.usersetup.TIMEOFF_EDATE_TITLE' | translate }}" style="min-width: 80px">
                              <span editable-bsdate="user.eddate" e-datepicker-popup="dd/MM/yyyy" ng-readonly="usrreadonly" e-id="eddate{{$index}}" e-ng-disabled="eddate{{$index}}" onbeforesave="checkBGDateFilled($data, user.id)">
                                {{ (user.eddate | date:"dd/MM/yyyy") || '' }}
                             </span>
                            </td>
                            <td title="{{ 'load.static.usersetup.TIMEOFF_ETIME_TITLE' | translate }}" style="min-width: 85px">
                               <span editable-bstime="user.eddate" e-show-meridian="false" e-minute-step="10" ng-readonly="usrreadonly" onbeforesave="checkBGDateFilled($data, user.id)">
                                {{ (user.eddate | date:"HH:mm") || '' }}
                               </span>
                            </td>
                            <td title="{{ 'load.static.table.TAB_DEL' | translate }}" ng-show="!usrreadonly" style="min-width: 37px">
                                <button type="button" ng-show="form.holidayForm.$visible" ng-click="deleteTimeOff($index)" class="deletebutton" ng-disabled="usrreadonly"></button>
                            </td>
                        </tr>
                    </tbody>
                </table>

        <div class="btn-form" ng-show="!usrreadonly">
          <button type="button" id="s4Add"  ng-click="addTimeOffs();form.holidayForm.$show();"  >{{ 'load.static.usersetup.ADD_TIMEOFF_ROW_BUTTON' | translate }}</button>
        </div>
        </form>

Now, when I dynamically ads a value to it like below, then it renders date component very well but time portion always show current time instead of time present in date object.

  $scope.timeoffs.push({
               id: $scope.timeoffs.length+1,
               name: timeoffName,
               recurrence: $scope.recurrences[recurrenceSelection].id,
               bgdate: d1,
               eddate: new Date(end_year, end_month, end_date, end_hours, end_minutes),
               weekDayStart:filtered[0].weekDayStart,
               weekDayEnd:filtered[0].weekDayEnd
            });

I tried removing all the elements from json and start putting one by one again but no success. Actually internally JSON is changed and it is correct as well because when I print the same date it is correct but while display only it shows incorrect time (shows current time) like below last entry. enter image description here.

Overawe answered 19/3, 2015 at 15:1 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.