curiosa curiosa - 1 year ago 110
AngularJS Question

ui-date-format in nggrid cell template

I want a date picker in my cell so i have created a cell template

var myDateTemplate= '<input type="text" ng-model="row.entity.myDate" />';

my col model is

var col = [{
field : 'myDate',
displayName : 'My Date',
enableCellEdit : true,
width : '130',
cellTemplate : myDateTemplate,
editableCellTemplate : myDateTemplate,
resizable : true,
sortable : false

it works fine and when i choose date i get it in mm/dd/yyyy format i want to change it to dd/mm/yyyy format to i added ui date format

var myDateTemplate = '<input ui-date="{ dateFormat: 'dd mm yyyy' }" ui-date-format="dd mm yyyy" ng-model="row.entity.myDate"/>';

when i use ui date format it will throw a error

Error: Syntax Error: Token 'undefined' not a primary expression at column NaN of the expression [{ dateFormat:] starting at [{ dateFormat:]

and it is giving the date like

Mon Dec 23 2013 00:00:00 GMT+0530 (India Standard Time) instead of my preffered format.

Answer Source

I think you're close, just escape the quotes around your date format to make the proper string:

var myDateTemplate = '<input ui-date="{ dateFormat: \'dd mm yyyy\' }" ui-date-format="dd mm yyyy" ng-model="row.entity.myDate"/>';

I'm not using the exact same cellTemplate you are (presumably your input field will work correctly once you escape the quotes). This is working for me:

columnDefs: [{
                displayName:'Start Time', 
                cellFilter: 'date:\'MM/dd/yyyy HH:MM:ss\'' 
            }, {
                field:'duration', displayName:'Duration'
            }, {
                field:'distance', displayName:'Distance'
            }, {
                field:'typedesc', displayName:'Type'
            }, {
                field:'Drivers', displayName:'Drivers'
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download