Text color of a date formated value

[William Morgenweck]

When I try to change the text color of a date formatted field I end up with a blank

PeriodEndTemplate: function(field, data, column) {
     var CurrentDate = new Date();
     var GivenDate = new Date(data["PeriodEndDate"]);
         if(GivenDate < CurrentDate) {
          return '<font color="red"><b>' + data["PeriodEndDate"] + '</b></font>'
         } else{
           return data["PeriodEndDate"]
         }
     },

I know that my return value is 

<font color="red"><b>2017-08-31T00:00:00</b></font>

My Grid item is

    <e-column field="PeriodEndDate" headerText="Period End" width="120" :format='formatOptions' type='date' :valueAccessor="PeriodEndTemplate" :disableHtmlEncode="false"></e-column>

If I remove 

 :format='formatOptions' type='date' I get a red value like  2017-08-31T00:00:00.

Is there a way to get  2017-08-31 with a red text and still sort like a date in the grid?  

I changed my code to :-- It this the best way to do it?

 PeriodEndTemplate: function(field, data, column) {

     var CurrentDate = new Date();

     var GivenDate = new Date(data["PeriodEndDate"]);

         if(GivenDate < CurrentDate) {

           let myDate = data["PeriodEndDate"].split('T')[0]

           let ret = '<font color="red"><b>' + myDate + '</b></font>'
             return ret

         } else{

            let myDate = data["PeriodEndDate"].split('T')[0]

           return myDate

         }
     },

Thanks

[Manivel Sellamuthu]

Hi William, 

Greetings from Syncfusion support. 

From the query we can understand that you have defined the date column’s values in string format in the Grid’s data source. We would like to let you know that the date column values present in the Grid’s data source need to be in Date object format as the date column operations(like, filtering, sorting, etc.) are done on the basis of date objects in the source-level. We would like to let you know that values changed using valueAccessor will not affect the grid dataSource and it is for display purpose only. This is the Grid’s default behavior. So, if the date value is provided as string then please provide the date values in Date object format to resolve the problem. 

Please let us know if you need further assistance. 

Regards, 

Manivel