Date Formatting in Kendo Grid and Handling Timezone

 In Kendo Grid, the dates are formatted to 'Mon Feb 01 2021 02:03:04 GMT+0530 (India Standard Time)'. To convert to a specific format or specific time zone we can try below options. 

"kendo.parseDate(data.CreatedDate)" -- to keep the date data type same and convert to the local browser's timezone

"kendo.parseDate(data.CreatedDate, 'MM-dd-yyyy')" -- to keep the data data type and format the data type to the local browser's timezone

"kendo.toString(kendo.parseDate(data.CreatedDate), 'MM/dd/yyyy hh:mm:ss tt" -- to format the date to string format with whatever timezone it has received from the server. This converts hours into 12 hour format. when you replace hh with HH it will give 24 hour format. 

For converting to specific timezone, we can try the below..

"CreatedDate.toLocaleString("en-US", {timeZone: "America/New_York"})" -- Works only in Chrome and Forefox. For IE, it throws an error. 

"CreatedDate.toLocaleString("en-US", {timeZone: "IST"})" -- Indian Time

"CreatedDate.toLocaleString("en-US", {timeZone: "PST"})" -- Pacific Time

"CreatedDate.toLocaleString("en-US", {timeZone: "UTC"})"


In case nothing gets worked out, you need to depend on third party/external library named "moment.js". 

It comes up with couple of different flavors. For simple cases like parsing and formatting, you can use moment js only. For time zone conversions, you can use moment time. 

These 2 files work for older versions of browsers also. 

function toPSTDate(dateVal, fmt) {

    if (dateVal == null)

        return "";

    return moment(dateVal).tz("America/Los_Angeles").format(fmt);

}

For modern browsers, you can just use one library called luxon js that has both parsing and time zone conversions. You can get more details at "https://momentjs.com/". 

luxon.DateTime.fromJSDate(dateVal).setZone("America/Los_Angeles").toFormat('MM/dd/yyyy hh:mm:ss a')

Comments

Post a Comment

Popular posts from this blog

Base 64 encoding and decoding

Encoding and decoding of BASE64 format strings for Apache Tomcat web server.  java -cp /usr/tcServer-6.0/tomcat-6.0.33.B.RELEASE/lib/tcServer.jar:/usr/tcServer-6.0/tomcat-6.0.33.B.RELEASE/bin/tomcat-juli.jar:/usr/tcServer-6.0/tomcat-6.0.33.B.RELEASE/lib/tomcat-coyote.jar com.springsource.tcserver.security.PropertyDecoder -encode / -decode base64 <password>
Read more

LINQ Queries with GROUP BY, INNER JOIN, COUNT and SUM: Examples

Examples of different LINQ queries in C#: GROUP BY, INNER JOIN, COUNT and SUM Setup the LINQPad against the Northwind database. 1. LINQ query with GROUP BY, JOIN and SUM.     Find the quantities required for each product to fulfill all the orders.     Here the tables we have to use are Products and Order Details. Both of these tables can be joined on    ProductID key and grouped by Product Name to make sure that the Quantity is calculated against a named product instead of ID.     The SQL query for the above requirement is :        s elect A.ProductName,sum(B.Quantity)         from Products P join "Order Details" OD         on A.ProductID=B.ProductID         group by A.ProductName     The equivalent LINQ query for the above is:                 from p in Products         join od in OrderDetails         on p.ProductID equals od.ProductID         group od by p.ProductName into g         select new { ProductName=g.Key, Quanti=g.Sum(a => a.Quantity)}      2. LIN
Read more

How to write Custom delete Confirmation Modal for Kendo Grid in MVC:

How to write Custom delete Confirmation Modal for Kendo Grid in MVC: For the above task, we need to add custom command for delete operation.For the Click, the argument is the javascript function name. .Columns(columns =>columns.Command(command => { command.Custom("Delete").Click("deleteRow"));  Later, you need to tell the kendo Grid that you want to suppress the default behavior for the Delete Action. .Editable(editable => editable.DisplayDeleteConfirmation(false)) Need to remove the destroy property for the datasource mapping to grid. Like .Destroy for the DataSource has to be removed. We are handling this server side work through script logic. Now, write the modal window markup for the Delete pop-up. <div id="modalWindow">     <h2>Are you sure to Delete?</h2>     <span class="k-label">Reason For Deletion</span> <input id="txtReasonForChange" class="k-textbox" />    
Read more