Transform the date format from Google Forms to TypeScript

I am currently facing an issue with a Google Form connected to a Google Spreadsheet. The date format in the spreadsheet appears as follows when a response is received:

20/02/2023 18:58:59

I am seeking guidance on how to convert this date format using Typescript.

During the website development process, I was able to temporarily solve it by performing the following steps:

datestr = '20/02/2023 18:58:59'
datestr = Date(datestr)
d = new Date(datestr)

However, I encountered numerous errors during production build. One of them being that the Date(d) function cannot be called because Date() does not accept arguments. Additionally, using new Date(datestr) directly simply returns Invalid date.

Could someone provide suggestions on how to address this issue? It would be ideal to utilize built-in types to avoid manual date manipulation.

typescriptdate

Answer №1

If you ever need to convert a date string into a JavaScript Date object, you can make use of the following function:

const strToDate = (dtStr) => {
    if (!dtStr) return null;
    const dateParts = dtStr.split('/');
    const timeParts = dateParts[2].split(' ')[1].split(':');
    dateParts[2] = dateParts[2].split(' ')[0];
    return new Date(
        +dateParts[2],
        dateParts[1] - 1,
        +dateParts[0],
        timeParts[0],
        timeParts[1],
        timeParts[2]
    );
};
const dtStr = '20/02/2023 18:58:59';
const date = strToDate(dtStr)

Answer №2

1. To utilize the DatePipe from the angular common module, you need to import it first. For example: import { DatePipe } from '@angular/common';

2. Next, create a constructor for the DatePipe as shown below:

constructor(
   
        public datepipe: DatePipe
    ) {}

3. Finally, you can format your date by calling the transform method like this:

let formattedDate = this.datepipe.transform(yourdate.toISOString(), 'yyyy-MM-dd');

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 are the methods to alter validation for a Formfield based on the input from other Formfields?

My aim is to create a Form where input fields are required only if one or more of them are filled out. If none of the fields have been filled, then no field should be mandatory. I came across a suggestion on a website that recommended using "valueChanges" ...

javascriptangulartypescriptangular-reactive-formsangular-forms

Leverage the state from a Context within a Class-based component

I have a Codepen showcasing my current issue. I want to utilize the class component so that I can invoke the forward function from parentComponents via ref. However, I am struggling with how to manipulate the context where the application's current st ...

reactjstypescript

Having trouble getting Jest to manually mock in Nestjs?

When setting up a mock service like this: // /catalogue/__mock__/catalogue.service.ts export const CatalogueService = jest.fn().mockImplementation(() => { return { filterRulesFor: jest.fn().mockImplementation((role: Roles): Rule[] => rules.filt ...

typescriptunit-testingjestjsmockingnestjs

Fixing ngModel and click functionality issues in dynamic HTML content within Angular 4

I am struggling to insert HTML content into a specific id by using Angular. Although the HTML displays, the functionality of ngModel and click event is not working. How do I resolve this issue? app.component.html <div id="myid"> </div> app. ...

angulartypescript

The push action in NavController is not displaying Google Maps as expected

Trying to display a map upon clicking a button is proving challenging for me. It appears that the function NavController.push() does not work as expected, while NavController.setRoot() does. Despite not encountering any errors, I am unable to identify the ...

htmlgoogle-mapstypescriptionic2

Attempting to execute a synchronous delete operation in Angular 6 upon the browser closing event, specifically the beforeunload or unload event

Is there a way to update a flag in the database using a service call (Delete method) when the user closes the browser? I have tried detecting browser close actions using the onbeforeunload and onunload events, but asynchronous calls do not consistently wor ...

javascriptangulartypescriptsynchronousbrowser-close

What is the best method for excluding attributes from a nested model in sequelize?

In my project, there are 2 models called User and Role, and they have a many-to-many relationship. To manage this connection, I introduced a third model named UserRole. The issue arises when the UserRole is also retrieved in the query below: async getUser ...

typescriptdatabasesequelize.js

Interface key error caused by the TypeScript template literal

Version 4.4.3 of Typescript Demo Playground Example -- interface IDocument { [added_: `added_${string}`]: number[] | undefined; } const id = 'id'; const document: IDocument = { [`added_${id}`]: [1970] } My Attempts: I made sure that id in ...

javascriptnode.jstypescript

Mastering the proper implementation of OneToMany and ManyToOne relationships in MongoDB involves understanding and utilizing the

I am currently working on setting up a oneToMany, ManyToOne relation method and here is my progress so far (pseudocode provided below). I am using Typegoose which is essentially Mongoose with types. If you are unfamiliar with it, that's okay because t ...

mongodbtypescriptmongoose

Using Rust WebAssembly in Next.js

Seeking assistance with integrating a rust-generated wasm module into my NextJS project. This is how I am attempting to import the wasm: import init, { tokenize } from "@/wasm/lazyjson"; const Test = dynamic({ loader: async () => { ...

typescriptwebpacknext.jsbabeljswasm-bindgen

Varied Data Transfer Objects used for requests and responses

Currently, I am dealing with MongoDB and subdocuments. MongoDB automatically adds extra fields that cannot be specified in a POST request; they can only be retrieved using a GET request. To put it simply: different data transfer objects (dtos). I am utili ...

typescriptswaggernestjsopenapidto

What could be causing my code to fail in retrieving lists from the SharePoint site?

I've been attempting to retrieve lists from a SharePoint site using the provided code, however, the list isn't appearing in the response. Could someone please offer assistance with this issue? I have tried various other solutions, but the problem ...

typescriptsharepointsharepoint-2010sharepoint-2013sharepoint-online

Issue with Type-Error when accessing theme using StyledComponents and TypeScript in Material-UI(React)

I attempted to access the theme within one of my styled components like this: const ToolbarPlaceholder = styled('div')((theme: any) => ({ minHeight: theme.mixins.toolbar.minHeight, })); This information was found in the documentation: htt ...

javascriptreactjstypescriptmaterial-ui

Transforming TypeScript declaration files into Kotlin syntax

Has there been any progress on converting d.ts files to Kotlin? I came across a post mentioning that Kotlin developers were working on a converter, but I am unsure about the current status. I also found this project, which seems to be using an outdated c ...

typescriptkotlin

Combining Typescript Declarations for Express Request Object with Passport.js User/Session Integration

In my express/nodejs app, I am encountering issues with properties on the request.user object even after implementing Declaration Merging for authentication using passportjs middleware. To address this, I created a file at /types/index.d.ts in the project ...

typescriptexpresstypespassport.jstypescript-typings

Unable to compile TypeScript files using gulp while targeting ES5

After starting my first Angular2 app, I encountered an issue where I couldn't use gulp to compile for es5. Below is the dependencies file: "dependencies": { "@angular/common": "2.0.0", "@angular/compiler": "2.0.0", "@angular/compiler-cli ...

angulartypescriptnpmgulpgulp-typescript

Navigating through keys within a mapped Type in Typescript

Are there alternative methods for iterating through object keys, transforming values, and ensuring the resulting type maintains the same keys as the input? const env = { KEY_1: "VALUE_1", KEY_2: "ANOTHER_VALUE_2" }; function mapV ...

typescript

An error occurs when attempting to use object mapping and the rest operator in a return statement due to

I've encountered a type mismatch error in my TypeScript project using Prisma while attempting to return an object with mapped properties in the getPool method. Let's take a look at the code snippet causing the issue: public async getPool({ id, v ...

typescript

Displaying data on the user interface in Angular by populating it with information from the form inputs

I am working on a project where I need to display data on the screen based on user input received via radio buttons, and apply specific conditions. Additionally, I require assistance in retrieving the id of an object when the name attribute is chosen from ...

javascripthtmljsonangulartypescript

Diverse Selection of Font Awesome Icons

In my React project with TypeScript, I have a header component that accepts an Icon name as prop and then renders it. I am trying to figure out the best way to ensure that the icon prop type matches one of the existing FontAwesome Icons. import { FontAwe ...

reactjstypescriptfont-awesome