ui-date-format in nggrid cell template

curiosa picture curiosa · Jul 26, 2013 · Viewed 13.7k times · Source

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

pherris picture pherris · Jan 4, 2014

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: [{
                field:'StartTime', 
                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'
            }]