Various time values within one field

<form>
 <p-calendar [(ngModel)]="report.incidentTime" [showTime]="true" [ngModelOptions]="{standalone: true}" [maxDate]="maxDateValue"
                                (ngModelChange)="validateTime($event)"></p-calendar>

  <button type="button" class="btn btn-primary ripple" (click)="saveReport()" >Save</button>

</form>

Utilizing primeNg calendar for showcasing the calendar.

saveReport() {
        console.log("Executing save function");
        this.validateFields();

        let temp = this.report;
        console.log("Time : "+this.report.incidentTime);
        console.log("Object :  "+JSON.stringify(this.report));

}

where incidentTime: Date;, is a data type of Date.

Time: Mon Oct 02 2017 09:34:39 GMT+0400 (Arabian Standard Time)
Object :  {"incidentTime":"2017-10-02T05:34:39.000Z","reportingType":"I"}

Two outputs are showing different times. Why is this happening? How can I ensure that the time displayed in the Object matches the selected time without being 4 hours behind?

Answer №1

Although the date remains consistent, the p-calender component alters it to UTC from GMT+4.

If you want to customize this functionality, use the utc attribute.

For more information, check out the documentation here.

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

How to refresh a page manually in Angular 2

How can I have a page in Angular reload only once when a user visits it? This is my attempt: In the homepage component, I added the following code: export class HomepageComponent implements OnInit { constructor() { } ngOnInit() { location.relo ...

Tips for showcasing saved images in Spring Boot with Angular 4

I am currently utilizing Spring Boot in combination with Angular 4. The issue I am facing involves uploading an image to the project location. However, upon attempting to view the uploaded image, it does not display correctly and instead throws an error. H ...

Struggling to choose an option from the autocomplete feature with protractor

<select name="Name" class="metaselect ignore" style="display: none;" xpath="1"> <option value="00000000-0000-0000-0000-000000000000" selected="selected">-- New --</option> <option value="bd434f35-90db-e911-aa59-a96c125b4266">Ad ...

Guide on expanding the capabilities of IterableIterator in TypeScript

I am currently working on extending the functionality of Iterable by adding a where method, similar to C#'s Enumerable.where(). While it is straightforward to extend the Array prototype, I am encountering difficulties in figuring out how to extend an ...

Extracting an array from an HTTP response in Angular/Typescript using the map operator or retrieving a specific element

Q1: How can I extract an array of objects from a http response using map in Angular? Q2: Is there a way to retrieve a specific object from a http response by utilizing map in Angular? Below are the example URL, sample data, CurrencyAPIResponse, and Curre ...

Back from where it came, the return function appears unable to escape the confines of the code

Currently, I am working on solving some leetcode problems and stumbled upon an interesting issue in my code for the problem at . However, I am having trouble understanding how it actually functions. The problem with this code lies in the fact that the ret ...

Experiencing a problem in React JS when trying to render a component?

I encountered an error message while trying to render a component from an object. Type 'FC<Boxprops> | ExoticComponent<{ children?: ReactNode; }>' is not compatible with type 'FC<Boxprops>'. Type 'ExoticComponen ...

Angular 2 is having trouble with object dot notation in Typescript and is expecting a semicolon

Hello, I am currently transitioning a project from Angular 1 to TypeScript and Angular 2. One issue I'm facing is getting some property definitions into the Angular 2 component. Below are the property definitions causing trouble: import { Component ...

Issue encountered with Typescript and Request-Promise: Attempting to call a type that does not have a call signature available

I have a server endpoint where I want to handle the result of an asynchronous request or a promise rejection by using Promise.reject('error message'). However, when I include Promise.reject in the function instead of just returning the async requ ...

What method can we use to verify if an object falls within a specified date range when filtering?

Looking to determine if the current filter object falls within a specific date range and return a boolean value based on that condition. However, the code provided always returns the data. Can anyone spot the error in the implementation or suggest a better ...

Utilizing Angular 2 for Integration of Google Calendar API

I recently attempted to integrate the Google Calendar API with Angular 2 in order to display upcoming events on a web application I am developing. Following the Google Calendar JavaScript quick-start tutorial, I successfully managed to set up the API, inse ...

Angular 4+ directive allowing interaction with the NgModel of a component

I'm looking to update styles based on the state of NgModel.control. To keep it DRY, I was thinking that a directive for reading the NgModel component state could be the solution. Is this actually feasible? I haven't been able to find any guidanc ...

Receiving an error while passing properties to a React component: "Property 'firstName' is not found on type 'Readonly<{}>'."

As a beginner in React, I need some patience I'm attempting to create a simple component where users can input their first and last names, update the values, and see them displayed after clicking a button. However, I keep encountering TypeScript comp ...

React-admin: Reference Input is only showing IDs instead of displaying my fields

I am currently working with a Reference input in react admin, but I am facing an issue where it displays the ids of the resource instead of the field I specified (status) and I am unsure why this is happening. Here is a snippet of my code: const Candidatur ...

Using Mongoose $addToSet to add items to an array only if they are unique

Currently, my code is set up to add new flagDtos using $addToSet without consideration for the uniqueness of item.name. However, I want to change this behavior so that: If item.name is unique, add the new flagDtos object. Otherwise, update the existing fl ...

Encountering an issue with managing promises in Observables for Angular HTTP Interceptor

Currently, I am encountering the following situation: I have developed an authentication service using Angular/Fire with Firebase authentication. The authentication service is expected to return the ID token through the idToken observable from Angular/Fir ...

Is there a way to create a Typescript function that can automatically return either a scalar or array value without requiring the caller to manually cast the output

Challenge Looking for a solution to the following problem: save<T>(x: T | T[]) { if (x instanceof Array) { // save array to database } else { // save entity to database } return x } // client code let obj: SomeType = { // values here ...

Is there a way to omit type arguments in TypeScript when they are not needed?

Here is a function I am currently working with: function progress<T>(data: JsonApiQueryData<T>): number { const { links, meta } = data.getMeta(); if (!links.next) { return 1; } const url = new URL(links.next); return parseInt(url ...

What other features can be integrated into the end method of the Node/Express Response object?

Our team is currently working on modifying the response.end method within our Express middleware to include additional functionality just before sending a response back to the client. Below is our implementation: return (req: Request, res: Response, next: ...

Setting up CORS for Azure Active Directory

My goal is to programmatically obtain an access token from Azure Active Directory in an Angular 6 application using the method below. let body1 = new FormData() body1.append("resource", environment.config.clientId) body1.append("grant_type", " ...