Convert numeric month to its 3-letter abbreviation

Receiving the date time value from the server and storing it in a variable named a1:

let a1 = (new Date(estimatedServerTimeMs));

console.log of a1 

Sun Apr 05 2020 11:36:56 GMT+0530 (India Standard Time)

The date is converted to a simpler format such as 5-3-2020, but the desired format is 05-APR-2020

Here is the code snippet:

 let a1 = (new Date(estimatedServerTimeMs));
      console.log(a1);
      let show_year_month_date =  a1.getDate()+'-'+ a1.getMonth() +'-'+ a1.getFullYear();
      console.log(show_year_month_date);

Desired Changes:

  1. Make sure the day portion displays with 2 digits.
  2. Convert the numeric month to a 3-character representation.
javascriptangulartypescript

Answer №1

Here is a different approach

const currentDate = (new Date(estimatedServerTimeMs));

const dateFormat = new Intl.DateTimeFormat('en', { year: 'numeric', month: 'short', day: '2-digit' });
const [{ value: month },,{ value: day },,{ value: year }] = dateFormat.formatToParts(currentDate);

let formattedDate = day + '-' + month.toUpperCase() + '-' + year;

console.log(formattedDate);

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

"Implementing a seamless transition effect on two slideshows using jQuery's fadeslideshow

I currently have a homepage featuring a fadeslideshow with 5 slides. The fadeslideshow plugin being used can be found at http://plugins.jquery.com/project/fadeslideshow. On the homepage, there is also a menu bar with various menu items. When a user clicks ...

javascriptjqueryhtmlcss

Learn how to retrieve data from a parent component in Angular 8 by leveraging the window.opener property in a child window

On my Angular application, I have 2 separate pages - page1 and page2. Page1 has a button that, when clicked, opens page2. Since they are different components, I need to use window.opener to access data from page1 in page2 by calling window.opener.page1Func ...

angularwindow.openwindow.opener

How can I retrieve an empty object from the database using Angular 5?

Hey there! I'm facing a little issue that I need help solving. I asked a question before when things weren't clear, but now they are (you can find the previous question here). I'll share my code and explain what I want to achieve shortly. H ...

javascriptfirebasefirebase-realtime-databaseangularfire2angular5

How can I activate a jQuery function only when it is within the viewport?

I have installed a jQuery Counter on my website, but I am experiencing an issue where the counter starts or finishes before reaching the section where the HTML code is embedded. Any assistance with this problem would be greatly appreciated! <script& ...

javascripthtmljquerycsstriggers

Issue with VueJS: Cannot modify a component property within a watcher function

I am currently developing a Vue 2 Webpack application that utilizes Vuex. My aim is to update the local state of a component by observing a computed property which retrieves data from the Vuex store. Here's an excerpt from the <script></scrip ...

javascriptvue.jsvuejs2

Customize YouTube iframe styles in Angular 4+ with TypeScript

Has anyone been successful in overriding the style of an embedded YouTube iframe using Angular 4+ with TypeScript? I've attempted to override a CSS class of the embed iframe, but have not had any luck. Here is the URL to YouTube's stylesheet: ...

javascriptcssangulartypescriptangular5

Using jQuery to access OSM data through Overpass API: A step-by-step guide

My current approach to fetch map data from OSM involves the following code: $.ajax({ url: 'https://www.overpass-api.de/api/interpreter?' + '[out:json][timeout:60];' + 'area["boundary"~"administrative" ...

javascriptjqueryajaxopenstreetmapoverpass-api

Trouble activating header checkbox on initial click

Hello everyone, I have a question about two views: 1- Index 2- Edit In my grid, the header has a single checkbox. When I try to click the checkbox to select all rows, it doesn't work properly. The first time I click to uncheck and then check it agai ...

javascriptjqueryasp.netcheckbox

The REST API seems to be functioning correctly when accessed through Postman, but there are issues when attempting to call

When I include @PreAuthorize("hasRole('ROLE_SUPER_ADMIN')") in my controller and make a call from Angular, it doesn't work. However, it works fine when called from Postman. @GetMapping("/getAllOrgniz") @PreAuthorize("hasRole('ROLE_SUPE ...

angularspring-bootspring-security

Generate a variety of files using GraphicsMagick

I'm trying to enhance my function that deals with uploaded images. Currently, it captures the image, converts it, and saves only one version of it on the server. However, I would like to modify it to achieve the following goals: Goals: Save multipl ...

javascriptnode.jsexpressgraphicsmagick

React Native displaying identical path

Is there a way to dynamically change routes in React Native when a button is pressed? Inside my SplashContainer component, I have the following method: handleToSignUp = () => { console.log("Running handleToSignUp") this.props.navigator.push({ ...

javascriptreactjsreact-native

having difficulties connecting the paginator with MatTable

I'm struggling to implement pagination for my mat-table in Angular 6. I've referenced some examples from the following link, but unfortunately, it's not functioning as expected: https://material.angular.io/components/table/examples While t ...

angularpaginationangular-materialmat-table

Having trouble with submitting a form through Ajax on Rails 4

Having models for advertisement and messages with forms that both utilize Ajax (remote => true) for submission. The message form submits perfectly, remains on the same page, and handles the response efficiently. However, the advertisement form fails to ...

javascriptjqueryruby-on-railsajaxforms

Assessing Directives by Injecting the Hosting Component

In my directive, I am retrieving the component instance using the inject keyword like so: export class MyDirective implements AfterViewInit { private component: MyBaseComponent = inject(MyBaseComponent); ... } MyBaseComponent serves as an abstract com ...

angularjestjs

Testing in Angular using the getByRole query functionality is successful only when the hidden: true option is utilized

Currently experimenting with a new library, I'm facing difficulties accessing elements based on their ARIA role. My setup includes angular 10.0.6, jest 26.2.1, along with jest-preset-angular 8.2.1 and @testing-library/angular 10.0.1. Following instru ...

angularjestjsangular-testing-library

Show temporary information on the user's side in a table

To better explain the issue, please refer to the accompanying image. I am working with a Master/Detail form, specifically a Bill of Materials, which involves storing data in two separate database tables. The top portion of the form (Product, Quantity) is ...

phpjavascriptjqueryajaxcodeigniter

Updating React state by changing the value of a specific key

I've been diving into React lately and I'm facing an issue with updating state values for a specific key. Below is my current state: this.state = { connections : { facebook : "http://facebook.com", flickr : null, ...

javascriptreactjsecmascript-6react-redux

Utilizing the spread operator in Typescript to combine multiple Maps into a fresh Map leads to an instance of a clear Object

Check out the code below: let m1 = new Map<string, PolicyDocument>([ [ "key1", new PolicyDocument({ statements: [ new PolicyStatement({ actions: [&q ...

typescript

There seems to be a mismatch in compatibility between the register() function in react-hook-form and the native input types

Currently, I'm in the midst of a React project that utilizes TypeScript along with react-hook-form. At one point in my code, I am making use of the provided function register(), which should be implemented as follows according to the official document ...

javascriptreactjstypescriptreact-hook-form

Develop a Java RESTful server with an Angular 5 client that utilizes POST and PUT syntax for communication

Currently, I am in the process of learning the HTTP REST/CRUD protocol in an attempt to establish communication between a Java RESTful servlet and an Angular5 client. I have successfully implemented the GET and DELETE functionalities, however, I am encount ...

javaangularrestcrud