The extjs datecolumn is displaying dates with a one-day discrepancy

My Ext.grid has a datecolumn, but I'm experiencing an issue where the dates displayed are off by one day. The problem seems to be related to timezones, as when data is added to the store it shows up differently later on.

For example, 2013-03-31 becomes

Sat Mar 30 2013 17:00:00 GMT-0700 (US Mountain Standard Time)
.

I'm unsure how to resolve this timezone discrepancy in my code. When adding data to the grid's store using the following snippet:

for (var i = 0; i < dateboxes.length; i++) 
{
    dateboxGrid.store.add(dateboxes[i]);
}
console.log(dateboxGrid.getStore()) // logs "Sat Mar 30 2013 17:00:00 GMT-0700 (US Mountain Standard Time)"

Is there a way to properly format dateboxes[i].Value before inserting it into the store to ensure the correct date appears in the column?

Update:
After some modifications, I now call .toISOString() on the date before saving it to the database. This adjustment results in the date being stored correctly with GMT +0700, displaying accurately when loaded from the database.

However, I'm concerned that this method may cause issues for users in different timezones.

In essence, all I need is a straightforward Date value without any time components, as they hold no relevance in my application.

Answer №1

Throughout my work on this project, I encountered a common struggle - either I had to tackle one issue or face another.

(1) Utilizing datecolumn alongside an editor of datefield, and configuring the field in the store's model as type: 'date', resulted in storing values in the database as dates (including time). However, upon retrieving these dates, the Timezone factor would interfere and modify the loaded date.

or

(2) Opting not to use datecolumn and specifying the store's model as type: 'date' caused issues where dates were not displaying correctly within cells. Despite being stored as simple strings, they did not appear accurately within the grid.

In response, I chose option (1), with a pre-database transmission data manipulation step:

    for (var i = 0; i < dateboxes.length; i++) {
        if (dateboxes[i].Value != null) {
            var date = new Date(dateboxes[i].Value);
            dateboxes[i].Value = String(date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate());
        }
    }

This process essentially converts the Date object into a String representation. Consequently, the data is now stored in the database as a basic string format, devoid of any timezone complexities while displaying in the grid. Additionally, the adjustment `(date.getMonth() +1)' accounts for the zero-based month index.

Reflecting on this solution, there appears to be an inconsistency that requires further investigation. Something else must have been altered along the way. Nevertheless, the current system functions adequately.

I invite others to contribute insights and provide a more comprehensive explanation of the situation by leaving the question open for discussion.

Answer №2

It seems like the issue here is not related to timestamps. Upon inspecting the encodeDate function in the source code, it appears that ExtJS increments the month but not the day. Perhaps this was their way of addressing a bug. To work around this, I took a different approach by overriding the encodeDate method in my JavaScript:

var custom_date = new Date();

Ext.util.JSON.encodeDate = function(custom_date) {
    pad = function(n) {
        return n < 10 ? "0" + n : n;
    }
    return '"' + custom_date.getFullYear() + "-" +
    pad(custom_date.getMonth()+1) + "-" +
    pad(custom_date.getDate()+1) + '"';
};

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What could be the reason behind the failure of this :after element?

I am facing an issue with the preloader on my webpage where the animation is not displaying as expected. The animation should appear on top of a dark black background before the page fully loads, but it seems to be missing. The CSS for the animation works ...

Adding an iframe with inline script to my Next.js website: A step-by-step guide

For my Next.js project, I have this iframe that needs to be integrated: <iframe class="plot" aria-label="Map" id="datawrapper-chart-${id}" src="https://datawrapper.dwcdn.net/${id}/1/" style="width: ...

Searching for a deeply nested JSON property with lodash

I am dealing with a JSON API response that has the following structure: [ { title: "top1", sections: [ { section_title: "section1", content: [ { content_title: "title1", content_id: "id1" ...

Having trouble displaying the image on the screen with Material UI and React while using Higher Order Components (HOC) for

I'm facing an issue with displaying an image on my Material UI Card. Despite checking the directory and ensuring it's correct, the image still doesn't show up. Additionally, I need assistance in modularizing my code to avoid repetition. I at ...

Unable to retrieve value 'includes' from null object

Currently, I am utilizing Vue.js along with JavaScript. In my code, there is an array of objects named products, each containing a special property called smallest_unit_barcode. My goal is to filter out only those products that have a barcode similar to a ...

Reversing data in Vue3

I've been struggling to create a custom dropdown for my application. I need to implement a function that adds a class called is-active to a div element. So, what I have done is created a simple div with an onclick function as shown below: <div :cla ...

Tips on how to properly display the date in v-Calendar

I'm struggling to format the date output from the v-calendar. Currently, it appears like: Fri Jul 31 2020 00:00:00 GMT+0200 (utc summertime) However, I would like it to display as 2020-07-28. I have searched through the documentation but couldn' ...

Discovering XMLHttpRequest Issues within a Chrome Application

Is there a way to identify XMLHttpRequest errors specifically in Chrome App? For instance, I need to be able to recognize when net::ERR_NAME_NOT_RESOLVED occurs in order to display an error message to the user. While XMLHttpRequest.onerror is activated, ...

Is it possible to fulfill a promise within an if statement?

I'm fairly new to using promises in JavaScript, and I am currently facing an issue where a function needs to execute before running some additional code in another function. The problem arises when the promised function includes an if statement that l ...

Creating dynamic ng-model for input type [text] in AngularJS

Here is the current situation I'm dealing with in my code: <form name="task_form" ng-app="myApp" ng-submit="tasksubmit()"> <ul class="items-list"> <li ng-repeat="task in taskslist ...

Using jQuery to toggle visibility based on scroll position

Recently, I received a web template equipped with a jQuery library called sticky, which essentially makes the navigation "stick" to the top of the page as you scroll. Now, my goal is to integrate a logo into the navigation once it reaches its final positio ...

Choose autocomplete feature from an external source within the context of AngularJS

I am currently working on an autocomplete textbox and I stumbled upon this script that I found through my search efforts. .controller('autoCompleteCTRL', function($scope, $rootScope){ $rootScope.searchItems = [ "ActionScript", ...

The setInterval() function is not executing the IF Else statement correctly

I'm having an issue with accessing if else conditions. Currently, both the if block and else block are being called at the same time. I need help in making the if else block work properly. Here is a snippet of my code: const UserCard=(props)=>{ c ...

How can I determine the appropriate time to hide the loading screen after the model has been loaded with gltfLoader and before the scene is rendered?

I am currently working on a project using threejs version 106, where I have integrated both the webGLRenderer and CSS2DRenderer. My main challenge lies in loading a glb model and displaying a loading progress bar utilizing the onProgress callback of the l ...

determine the quantity of each day of the week within a specified date range

I am in need of a method to calculate the number of days for each day of the week between two given dates. Here is an example: 2013-01-01 to 2013-01-15 Mo:2 Tu:3 We:2 Th:2 Fr:2 Sa:2 Su:2 I found this code somewhere in the past and it was working fine. H ...

Oops! Looks like there's a type error in module "*.mdx" - it seems that it doesn't have the exported member "metadata". Maybe try using "import metadata from "*.mdx"" instead?

I am attempting to extract metadata from an mdx file. I have followed the guidelines outlined in NextJS Markdown Frontmatter, but encountered build errors. It is important to note that I am unable to utilize fs. Code Section Page.tsx File import Conte ...

Chrome Devtool reported an error, but the majority of them are in a null file

Currently grappling with an irksome problem in Vue.js. No matter how hard I try, I just can't seem to pinpoint the error. Even when setting a debugger, all it shows is an empty file. Please take a look at the image provided. Any assistance on identify ...

Having trouble loading the React app when using the @mui/styles package

After downloading a package from the MUI website, I encountered an error when trying to import "@mui/styles" which is resulting in browser errors. The package was downloaded from this source: https://mui.com/system/styles/basics/ Upon running my React app ...

Concealing Vimeo's controls and substituting them with a play/pause toggle button

I'm currently working on implementing the techniques demonstrated in this tutorial (), but unfortunately the code in the fiddle I put together doesn't appear to be functioning correctly. I'm at a loss as to what might be causing this issue. ...

Numerous occurrences of Autodesk Forge Viewer

I am facing a challenge in implementing multiple instances of the Autodesk Forge Viewer (v6.2) on my webpage, each hidden within tabs. The goal is to show and hide the viewer with a loaded model as the user switches between tabs. Although I have managed ...