: "Preserve the Month and Year in TypeScript"

I need assistance in extracting the month and year from a given date using Typescript.

For instance:

If I have lun. 1 juil. 2024, my desired output should be juil 2024.

Any help would be greatly appreciated!

Answer №1

To convert a date string to a formatted month and year, you can create a mapping of months and use the Date() function along with toLocaleDateString():

const monthsMap: { [key: string]: string } = {
  "juil.": "Jul", // add your month mappings here
};

function formatDate(dt: string): string {
  const D = dt.split(" ");
  const day = D[1];
  const month = monthsMap[D[2]];
  const year = D[3];
  const date = new Date(`${month} ${day} ${year}`);
  const options: Intl.DateTimeFormatOptions = {
    month: "short",
    year: "numeric",
  };
  const formattedDate = date.toLocaleDateString("fr-FR", options);
  const [m, y] = formattedDate.split(" ");
  return `${m.replace(".", "")} ${y}`;
}

console.log(formatDate("lun. 1 juil. 2024"));


Output:

juil 2024

Alternatively, you can also use a regex pattern to extract and format the date string:

function extractDate(dt: string): string {
  const match = dt.match(/(\w+)\.?\s+(\d{4})/);
  return match ? `${match[1]} ${match[2]}` : "";
}

console.log(extractDate("lun. 1 juil. 2024"));

Output:

juil 2024

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

Updating the styles of React Native components using stylesheets

I've created a unique React component with the following structure: import { StyleSheet } from 'react-native'; import { Input, Item } from 'native-base'; import Icon from 'react-native-vector-icons/FontAwesome'; import { ...

Angular definitely typed does not convert into JavaScript

After installing TypeScript on my VS2013, I obtained the Angular 1.5 Definitely Typed from the NuGet package manager. Although angular.d.ts and its components do not generate angular.js file, when I create another TypeScript file like file1.ts, the file1. ...

"Prevent further button clicks by disabling it after the initial click with ActionRowBuilder in Discord.Js

Encountering a puzzling issue where I am unable to disable a button after it has been clicked. The option to disable the button does not seem to appear. When attempting to deactivate the button, I utilize the following function: const row = new ActionRowBu ...

unspecified result returned for function parameter with no assigned value

There are two functions at play here. The first function returns a result stored in a variable, which is then passed as a parameter to the second function to call a service. The issue is that when these functions are invoked within ngOnInit, the second fun ...

Tips for retrieving only the changes or updates from DynamoDB streams

Currently, I am faced with a scenario where I must comprehend the distinction between NEW_IMAGE and OLD_IMAGE on dynamoDB streams. As per the information available at: https://aws.amazon.com/blogs/database/dynamodb-streams-use-cases-and-design-patterns/ ...

Removing rows from a dataframe in R according to a specific column's value

Sample_ID<-c("a1","a2","a3","a4","a5","a6") Heart_attack<-c("1", "0", "1", "1", "0", "2") DF<-data.frame(Sample_ID,Heart_attack ...

Is it possible to dynamically assign class properties from an array in JavaScript/TypeScript?

Greetings for the assistance in advance. Currently, I am working with TypeScript, but I believe any JS solution will suffice. I aim to create something akin to the following: class ExcelData { 'Id 1': items[0].id, 'Quantity 1': item ...

What is the proper way to compare enum values using the greater than operator?

Here is an example enum: enum Status { inactive = -1, active = 0, pending = 1, processing = 2, completed = 3, } I am trying to compare values using the greater than operator in a condition. However, the current comparison always results in false ...

What is the correct version compatibility matrix for Expo, NPM, Node, React Native, and TypeScript?

Currently, I am in the process of setting up React Native with TypeScript. Here are the steps I followed: npx react-native init MyApp --template react-native-template-typescript I made sure to install TypeScript as well: npm install -g typescript ' ...

Using Vuelidate with Vue 3, vue-class-component, and TypeScript combination

Is there anyone who has successfully implemented Vuelidate with Vue 3 using the Composition API? Although Vuelidate is still in alpha for Vue 3, I believe that if it works with the Composition API, there must be a way to make it work with classes as well. ...

"Utilizing the same generic in two interface properties in Typescript necessitates the use of the

I have created an interface as follows: interface I<T>{ foo: T arr: T[] } After defining the interface, I have implemented an identity function using it: const fn = <T>({foo, arr}: I<T>) => ({foo, arr}) When calling this function l ...

The CORS policy has blocked access to 'http://localhost:8080/BeginSignup' from 'http://localhost:4200'

I'm having trouble with a CORS policy error when sending a fetch POST request to my Golang AppEngine API. Although I don't understand why this error is occurring. Below is the code I'm using: Below is the Angular code calling the API: priva ...

Isolating objects within a JSON array based on a single key

I am developing a system using Angular 6, and I need to create over 100 input fields. Since these inputs are used in multiple forms, I want to create a dynamic form. However, I'm trying to figure out the best way to connect the input configurations to ...

Combining and forming a distinctive case-sensitive array in JavaScript

Explaining a complex scenario, I have one object or array and one array. My goal is to compare selectedmodel values with mappedmodels. If the value (case insensitive) matches any key in the object, I need to fetch all associated values and push them into t ...

Error: Import statement is invalid outside of a module in next.js

Every time I attempt to run the register.tsx page in my next.js project, I encounter the error message shown below. My Next.Js project utilizes TypeScript. import React, { useState } from 'react'; ^^^^^^ SyntaxError: Cannot use import st ...

Establish a public-facing link for a React component

After developing a React component that functions as a chatbot window, I am now looking for a way to make the opening button accessible across various websites and applications. My initial thought was to associate a URL with the button so that it can be ea ...

Having difficulty storing duplicate requests that are crucial for various services/components

Currently, I am tackling a project that involves displaying multiple sets of data to the user. Each set requires several requests to be made to the backend. Specifically, for the UserDetails dataset, I must query the getUser and getSigns endpoints. However ...

Issue "unable to use property "useEffect", dispatcher is undefined" arises exclusively when working with a local npm package

I am currently in the process of creating my very own private npm package to streamline some components and functions that I frequently use across various React TypeScript projects. However, when I try to install the package locally using its local path, ...

Using TypeORM: Implementing a @JoinTable with three columns

Seeking assistance with TypeORM and the @JoinTable and @RelationId Decorators. Any help answering my question, providing a hint, or ideally solving my issue would be greatly appreciated. I am utilizing NestJS with TypeORM to create a private API for shari ...

How can I ensure that all the text is always in lowercase in my Angular project?

Is there a way to ensure that when a user enters text into an input field to search for a chip, the text is always converted to lowercase before being processed? Currently, it seems possible for a user to create multiple chips with variations in capitaliza ...