CODEWITHSUNDEEP
javascriptjqueryangularjsdatepickerng-grid
Anup
Anup

Reputation: 9748

AngularJS - ng-grid - Date Column issue

UPDATED DEMO

I am using Angular ui-grid http://ui-grid.info/. There is one column Date of Birth which needs DatePicker when in edit mode.

When i click on the column it shows me Date Picker but the selected date value doesn't get selected in Date picker. Also also Date Picker doesn't get removed after edition is complete.

columnDefs: [
      { field: 'name' },
      {
        field: 'dob',
        cellFilter: 'date',
        enableCellEdit: true,
        editableCellTemplate: '<input type="date" />'
      }

Thanks

Upvotes: 0

Views: 3680

Answers (3)

Souji
Souji

Reputation: 86

Try placing <input type="date" /> into a directive. And use the directive inside the grid.

I remember this has worked for me. NG-grid tends to swallow certain events and selecting a date might not work if done without a directive.

Upvotes: 1

hjl
hjl

Reputation: 2802

try ui-grid which is a next generation ng-grid refactored by the same guys. it's well designed and loosely coupled by plugins:

html:

<html ng-app="myApp">
    <head lang="en">
        <meta charset="utf-8">
        <title>Custom Plunker</title>  
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.11/angular.js"></script>
        <script src="http://ui-grid.info/release/ui-grid-unstable.js"></script>
        <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid-unstable.css" type="text/css">
        <link rel="stylesheet" type="text/css" href="style.css" />
        <script type="text/javascript" src="main.js"></script>
    </head>
    <body ng-controller="MyCtrl">
        <div ui-grid="gridOptions" ui-grid-edit class="grid"></div>
    </body>
</html>

js:

var app = angular.module('myApp', ['ui.grid', 'ui.grid.edit']);

app.controller('MyCtrl', ['$scope', function($scope) {
  $scope.myData = [{name: "Moroni", dob: '1985-01-01'},
                 {name: "Tiancum", dob: '1956-11-21'},
                 {name: "Jacob", dob: '1980-03-08'},
                 {name: "Nephi", dob: '1974-08-08'},
                 {name: "Enos", dob: '1991-07-17'}];

  $scope.gridOptions = {
    data: 'myData',
    // rowTemplate: '<div ng-style="{ \'cursor\': row.cursor }" ng-repeat="col in renderedColumns" ng-class="col.colIndex()" class="ngCell {{col.cellClass}}" style="overflow: visible"><div class="ngVerticalBar" ng-style="{height: rowHeight}" ng-class="{ ngVerticalBarVisible: !$last }">&nbsp;</div><div ng-cell></div></div>',
    columnDefs: [
      {
        name: 'dob',
        displayName: 'DOB',
        cellFilter: 'date',
        type: 'date'

      },
      { name: 'name' , displayName: 'Name'}
    ]
  }
}]);

Upvotes: 1

hjl
hjl

Reputation: 2802

you need editableCellTemplate options in your columnDef to set the template depending on what datepicker plugin you are using. takinig ui-bootstrap as example (it's not viable until you prepare the scope variables)

columnDefs: [
    { field: 'name' },
    {
        field: 'dob',
        cellFilter: 'date',
        enableCellEdit: true,
        editableCellTemplate: '<input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="opened" min-date="minDate" max-date="\'2015-06-22\'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />'
    },
    ...
]

Upvotes: 3

Related Questions