Implementing a JavaScript Date object within a Kendo Grid

As a newcomer to web development, I recently came across an issue while testing some basic functionalities. In my database, I have data stored in SQL datetime format in UTC GTC timezone:

Link to Database

To display this data in a Kendo Grid and append "UTC" at the end of each date, I utilized the following code:

View Correct Result

The problem arose when I attempted to convert the UTC datetime to local datetime using JavaScript's built-in Date type:

View Unexpected Result

Interestingly, the first row of the grid was converted to a different timezone compared to the remaining rows.

Below is the code snippet I used to fetch and format the table:

 $scope.mainGridOptions = {
        pageable: true,
        editable: true,
        sortable: true,
        dataSource: {
            pageSize: 5,
            transport: {
                read: function (e) {
                    $http.get('/GetScheduler')
                        .then(function success(response) {
                            e.success(response.data)
                        }, function error(response) {
                            alert('something went wrong')
                            console.log(response);
                        })
                }
            },
            schema: {
                model: {
                    fields: {
                        "id": {
                            editable: false
                        }

                    }
                }
            }
        },
        columns: [{ field: "id", title: "ID", width: "100px" },
                  { field: "Current_Time", title: "Time of Request", template: '#= kendo.toString(kendo.parseDate(Current_Time), "dd/MM/yyyy h:mm")#' },
                  { field: "Selected_Time", title: "Scheduled Time" , template: '#= Selected_Time+" UTC" #'}, 
                  { field: "Description" },
                  { command: "destroy", width: "100px" }]
    };

Answer №1

It seems like the time zone shift you are witnessing is not due to a change in time zones, but rather a one-hour shift caused by the dates.

European Summer Time has been observed from 01:00 UTC (02:00 CET and 03:00 CEST) on the last Sunday of March since 1996, until 01:00 UTC on the last Sunday of October; previously, the rules were inconsistent across the European Union

For more information, visit this link.

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

Leveraging Multiple Angular.js Controllers within a Shared DOM

As someone who is fairly new to Angular.js, I am currently working on integrating it into my Node.js application. While I have successfully created a RESTful API using Angular for a single controller, I am now looking to utilize two or more controllers wi ...

Exploring the Mechanism Behind the Successful String Interpolation of a Variable Imported in my Angular 2 Application

After making some modifications to my Angular 2 application, I encountered a situation where something started functioning properly sooner than I expected. This has left me puzzled about why it's working in its current state. Specifically, I have an a ...

Can one button be clicked to trigger the activation of another button through a click?

Just as the title suggests, I am wondering how to make this happen? Any guidance would be greatly appreciated! $('.notVisible').click (function(){ alert("I'm the invisible button") }); $('.visible').click (function(){ al ...

Create dynamic combo boxes using jQuery

My goal is to display a text field on the page if a user has only one credit card number in the database. However, if the user has multiple credit card numbers stored, I want to display all of them in a combo box. Below is the ajax response that I am rece ...

Attempting to insert a dynamic variable into a jQuery click event selector

I'm facing an issue where I am attempting to use a variable as a selector within a click event for a dynamically generated row in a table. When I manually enter the class name, the row click event works perfectly. However, when I try to use the variab ...

Inserting a line break in real-time within a JSX statement

Currently working on a React application that retrieves song lyrics from an API. The API provides me with a lyrics_body attribute as a string, which I use to showcase the lyrics on the webpage. However, when React renders it, the format is not ideal becau ...

The Access-Control-Allow-Origin error is preventing the Angularjs post request from going through

I am encountering an issue with my index.html file that is sending a post request to localhost:3000/SetUser. The error I keep receiving states XMLHttpRequest cannot load https://localhost:3000/SetUser. No 'Access-Control-Allow-Origin' header is p ...

Removing a portion of an item with the power of RxJS

I possess the subsequent entity: const myObject = { items:[ { name: 'John', age: 35, children: [ { child: 'Eric', age: 10, sex: 'M' }, { ...

Controller Function Utilizing Private Variable in AngularJS

After stumbling upon an Angularjs example online, I found myself perplexed. The code snippet in question is as follows: angular.module("testApp",[]).controller("testCtrl", function($scope){ var data = "Hello"; $scope.getData = function(){ ...

Converting an array of date strings to a single string in JavaScript

Here is the JSON format I received with dynamic data: {"range":["2018-07-23T16:03:26.861Z","2018-07-23T16:03:26.861Z"]} Now, I need to convert this into the following format: range(20180723,20180723) Below is my code snippet : var data:Date[] = {"rang ...

Can the operator pipeline generate interim observables in a manner akin to how filter, map, and reduce generate interim arrays?

I need some clarification regarding the efficiency of operator pipelines in RxJS. Based on my current understanding, each operator within the pipeline receives an observable and generates a new (potentially modified) observable to pass on to the next oper ...

The process of setting up a carousel for tables using jQuery

I can successfully implement jquery for an image carousel, but now I need to find a way to create a sliding table format. Any assistance on this matter would be greatly appreciated. Here is the code I currently have: <ul> <li><a style= ...

The selected jquery script is failing to function as intended

I'm currently implementing jQuery chosen in a select element to enhance user experience, however I'm facing an issue when attempting to copy the chosen div to another div using jQuery $(document).ready(function() { $(".chosen").chosen({}); ...

Receiving the result of a processed aspx page with a slight delay

My ASPX page contains some JavaScript code: <script> setTimeout("document.write('" + place.address + "');",1); </script> The issue arises when trying to retrieve the output from another page using a query string. Instead of gett ...

"Error encountered: Array is undefined when using the map and subscribe functions in Ionic

I have developed a service that is supposed to retrieve data from a JSON file and assign it to an array called 'countries', which will be used throughout the application on multiple pages. However, when I call the method getCountries, the countri ...

Transform a file object into a regular object within React

I regret to inform you that I must post an image in order to better illustrate my issue. Currently, I am using the antd upload component for file uploads. After uploading files individually in multi-upload mode, the resulting image showcases my problem. ...

Creating effective test cases for Angular JS controllers

Our team has recently taken on the task of writing test cases for our application, specifically focusing on controllers. Utilizing Mocha, Chai, and Sinon libraries, we are looking for guidance on how to effectively write these test cases. We have shared a ...

What is the best approach for combining my directive and scope object within the view?

In my controller, I have an array of objects called Well. Each Well object has various properties, including Location, which stores strings like "A1", "B4", "B13", etc. These locations represent positions on a grid where the letter indicates the row and th ...

Synchronization issues arise when attempting to update the localStorage

Whenever I switch to dark mode, the update doesn't reflect in _app unless I have two tabs opened and trigger it in one tab. Then, the other tab gets updated with dark mode toggled, but not the tab where I pressed the toggle. I am using useSettings in ...

Unlocking the Sound: Using a Custom Button to Activate Audio on HTML Video in React

While working on a project, I encountered a small issue: I have a video tag in my code: <video muted autoPlay loop src={video}> I simply want to add a single custom button/control to toggle between muting and unmuting the video. I'm thinking of ...