"Transferring Date and Time values between backend and frontend systems

I've been facing a challenge for days now with DateTime values.

My API backend is built using entity framework and sql server in .netcore.

The main issue occurs when trying to send a datetime from Angular to the C# backend. I have observed that Date() in typescript/javascript automatically incorporates my timezone, which I am not sure how to exclude.

For instance, my date appears as follows: Wed Jul 11 2019 21:00:00 GMT+0300 But once it reaches c#, it transforms into 07/10/2010 (mm-dd-yyyy), subtracting one day due to the timezone difference.

Is there a method to standardize the Date variable to disregard timezone and consistently retain the format DD-MM-YYYY?

I attempted using MomentJS but still cannot resolve it; even the comparisons seem odd due to this problem.

As an example:

const VacationStart = moment(calendarEntity.Vacation.StartTime).utc(false);
const VacationEnd = moment(calendarEntity.Vacation.EndTime).utc(false);
if (VacationStart.isSameOrBefore(ColumnDate,'day') && VacationEnd.isSameOrAfter(ColumnDate,'day')) {
            return '#FF0000';
 }

In the provided instance:

VacationStart is Wed Jul 10 2019 21:00:00 GMT+0300

VacationEnd is Wed Jul 17 2019 00:00:00 GMT+0300

ColumnDate is Thu Aug 15 2019 03:00:00 GMT+0300 (incremental value)

Nevertheless, despite utilizing isSameOrBefore(ColumnDate,'day') to exclusively compare up to days, it does not function as intended. When VacationEnd should be equivalent to ColumnDate, it returns false.

Note: all of this is taking place within a foreach loop where ColumnDate increments by +1 day.

Answer №1

To ensure accurate time representation, use UTC time (Greenwich Mean Time)

Check out this resource for more information on working with UTC in JavaScript Explore how to handle UTC time in .NET here

Here's an example of how you can implement it:

  • new Date(new Date().toUTCString()); -- "Mon Jul 01 2019 17:55:41 GMT-0700 (Pacific Daylight Time)"
  • new Date().toUTCString(); -- "Tue, 02 Jul 2019 00:56:38 GMT"
  • new Date().toString(); -- "Mon Jul 01 2019 17:57:03 GMT-0700 (Pacific Daylight Time)"

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

Issue with an external library in Angular 2

After generating my Angular 2 library using the yeoman generator and adding it to my main Angular project, I encountered errors when running the app in production mode. The specific errors include: WARNING in ./src/$$_gendir/app/services/main/main.compone ...

What is the best way to approach writing a shared value that is utilized across multiple files in Angular?

I am currently implementing Angular for the front end of my project. One challenge I'm facing is managing a single value, such as a 'role id', that needs to be used in multiple .ts files within Angular. Can anyone suggest an efficient way ...

Corrupted ZIP file being downloaded by FileSaver

After sending a request from my React front-end to my Node back-end, the expected zip file download results in a CPGZ file instead of decompressing the zip. Any assistance in resolving this issue would be highly appreciated. Thank you! React Code downloa ...

Angular 10: A Guide to Utilizing RouterModule

I'm working on enhancing one of my components by adding a button that will navigate the page to a different component : <input type="button" value="Shops List" [routerLink]="['shops-list']" class="btn&qu ...

Execute JavaScript code once the XMLHttpRequest has completed execution

I'm facing an issue where the JavaScript code is executing faster than the XMLHttpRequest. I am hesitant to resolve it using: setTimeout(function() {}, 100); Below is a snippet of my code: function change_country(id) { if (window.XMLHttpReques ...

When attempting to execute "nodemon," the command was not detected

When trying to use 'nodemon' in the command line, an error occurs stating that it is not recognized as a cmdlet, function, script file, or operable program. The system suggests checking the spelling of the name and verifying that the path is corr ...

The state variable remains undefined even after integrating useEffect in a React.js component

Hello, I have a component within my React application that looks like this: import React, { useEffect, useState } from "react"; import AsyncSelect from "react-select/async"; import { ColourOption, colourOptions } from "./docs/data"; const App = () => ...

By employing the $watch method, the table disappears from the div element

I've integrated the isteven-multi-select directive for my multi-select dropdown functionality. By providing it with a list of thingsList, it generates a corresponding checkedList as I make selections. Initially, I used a button to confirm the selecti ...

JavaScript Filtering JSON Data Based on Date Range

I am attempting to filter a basic JSON file based on a specified date range, with both a start date and an end date. Below is the function I have created for this task: var startDate = new Date("2013-3-25"); var endDate = new Date("2017-3-2 ...

How do I access the current state in Ngrx Store without the need to subscribe, specifically for use in a route Resolve?

Presently, my Resolve implementation is quite straightforward: export class UserResolve implements Resolve<any>{ constructor(private userService: UserService){} resolve(route: ActivatedRouteSnapshot){ return this.userService.get(route. ...

Null parameter in WebAPI

In my project, I have set up a "Person" ADO.Net Entity Model and generated a Web API controller from it. The Entity model is structured in a nested way, with an array of other objects within it. Due to the fact that these nested objects contain a property ...

Adjust the width of your table content to perfectly fit within the designated width by utilizing the CSS property "table width:

Example of a table <table> <tr> <td>Name</td> <td>John</td> <td>Age</td> <td>25</td> <td>Job Title</td> <td>Software Engineer ...

While performing compilation, Angular's ngFor triggers an error when used with SVG elements

I am attempting to create a recursive function of lines in order to generate a graph, but I am encountering a strange error in the console. It works fine on node.js. Below is the code snippet: <svg height = "200" width = "300"> ...

Dealing with AccessViolationException: Tips and Tricks

While working with a COM object (MODI) in my .NET application, I encountered an issue where the method throws a System.AccessViolationException that is caught by Visual Studio. Despite having a try-catch block with handlers for various exceptions, when t ...

What methods can be used to identify a single variable change in rxjs?

Utilizing rxjs in an angular 6 project has been a game-changer for me. Take, for instance, this single variable: let a = 1; I'm aiming to trigger a function whenever the value of 'a' changes. I believe rxjs can assist me in achieving this ...

react-video-recorder` facing challenges with loading

I recently integrated react-video-recorder into my application. After checking out the demos on Stackblitz and Storybook hosted on Vercel, I was impressed with how well it worked in my browsers. However, when I added it to my codebase, the component would ...

Attempting to position the calendar control at the center in Visual Studio using C#

I'm currently working in Visual Studio using C# and I've encountered an issue with centering a Calendar control within a Panel. While I have successfully centered other elements such as radiobuttons, checkboxes, and textboxes in the panel, the t ...

implementation of bug decrementation with a fadeout

For my current project, I need to implement a feature where individual elements containing a photo and their corresponding title fade out when clicked. However, the issue is that clicking on any picture fades out everything. How can I resolve this so only ...

Ways to confirm that the function handed over as a prop to a Vue component operates asynchronously

How can I determine if a prop Function is asynchronous? Consider the following prop in my component: callbackFunction: { type: Function, default: null, }, Is there a way to validate this and ensure that the provided Function i ...

The attempt to convert the value "NaN" to a number (data type number) at the specified path "markupPercentage" was unsuccessful

When I try to use Excel to update products, I encounter an error related to the presence of NaN. Here is the specific error message: CastError: Cast to Number failed for value "NaN" (type number) at path "markupPercentage" messageFormat: undefine ...