Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 696
curiosa Avatar asked Jul 26 '13 09:07

curiosa


People also ask

How do you use a value formatter in Ag grid?

The answer is that value formatter's are for text formatting and cell renderer's are for when you want to include HTML markup and potentially functionality to the cell. So for example, if you want to put punctuation into a value, use a value formatter, but if you want to put buttons or HTML links use a cell renderer.

How do you render the HTML inside a row in Ag grid?

HTML in Cells This time, to achieve it we use a cell renderer. By default ag-grid will create the cell values using simple text, cell renderers allow us to add more complex HTML inside the cells.


1 Answers

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'
            }]
like image 121
pherris Avatar answered Oct 20 '22 09:10

pherris