The JavaScript function for converting a date to a local string in the format of DD MMM YYYY is causing an error message in the browser console stating that it is not a valid function

I am encountering an issue with formatting a date string. The date is currently in the format 2021-03-31T00:00:00, and I need it to be displayed as 31 Mar 2021.

In my TypeScript code, I attempted to use the following function:

const formattedDate = i.SuspensionEndDate.toLocaleDateString('en-GB', { day: 'numeric', month: 'short', year: 'numeric' });

However, upon running the code in the browser, I received the following error in the console:

jQuery.Deferred exception: date.toLocaleDateString is not a function TypeError: date.toLocaleDateString is not a function

A similar error occurred when trying to extract only the day element using getDate():

const formattedDate = i.SuspensionEndDate.getDate();

jQuery.Deferred exception: date.getDate is not a function TypeError: date.getDate is not a function

This error is unfamiliar to me, as I have successfully performed similar tasks with JavaScript before. However, this is my first time encountering it while working on a .ts TypeScript file.

javascripttypescript

Answer №1

Make sure to convert the i.SuspensionEndDate variable into a Date object before formatting it.

const formattedDate = new Date(i.SuspensionEndDate).toLocaleDateString('en-GB', { day: 'numeric', month: 'short', year: 'numeric' });

Check out this example:

const currentDate = "2022-05-20T00:00:00";

const convertedDate = new Date(currentDate).toLocaleDateString('en-US', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' });

console.log(convertedDate);

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

Toggle the visibility of the search Div using Angular UI

When using angular UI buttons, users can select search criteria by choosing between Patient, ID, or Date. If Patient or ID is selected, the searchByText div will be shown. If Date is selected, the searchByText will be hidden and the SearchBydateRange wil ...

javascriptjqueryhtmlcssangularjs

Whenever I attempt to implement NavigationContainer in react native, an error always pops up

Hey there! I'm currently diving into the world of React Native and decided to start with a small project. However, I've encountered a persistent error when trying to use the NavigationContainer. Here's the error message I keep getting: error ...

javascriptreactjsreact-native

Exploring Appsetting Configuration in AppModule of Angular 8

I'm looking to update my configuration in the appsettings file by replacing a hardcoded string with a reference to the appsetting. Currently, I have this hardcoded value in appmodule.ts: AgmCoreModule.forRoot({ apiKey: 'testtesttest', li ...

jsonangulartypescriptmoduleconfiguration

Navigating the scope set by a specific string

Is there a more efficient method than iterating through child objects to access the value at a specific location in the $scope, identified by the attribute "Calendar.Scheduling.field.Appointment.ApptDateTime_Date"? I was hoping for a solution similar to an ...

javascriptangularjs

Is it acceptable to manipulate the prevState parameter of the setState function as mutable?

It is commonly known that directly modifying this.state is not recommended, and instead setState should be used. Following this logic, I assumed that prevState should also be treated as immutable, and setState should always involve creating a new object i ...

javascriptreactjstypescript

Challenges with JavaScript objects while using d3.js

I have been working on rendering a map using d3 within an HTML page that is running on a django web framework. One of the examples I came across from d3's sample archives can be found at this link: http://bl.ocks.org/NPashaP/a74faf20b492ad377312 Upon ...

javascriptd3.js

The jQuery .hasClass() function does not work properly with SVG elements

I am working with a group of SVG elements that are assigned the classes node and link. My goal is to determine whether an element contains either the node or link class when hovering over any of the SVG components. However, I am encountering an issue where ...

javascriptjqueryhtmlcsssvg

Implementing AngularJS directives with jQuery

Utilizing Jquery Selectric to enhance the select box in my AngularJS app led me to create a directive for rendering the element. Below you'll find the directive code along with how it's implemented. The Directive: angular.module('shoeReva ...

javascriptjqueryangularjsjquery-selectric

Unlock the potential of displaying similar object values side by side in JavaScript, React, and ES6 - here's how!

Currently, I am dealing with an object called segregatedData which is being passed as props. Among its several properties, we are interested in segregatedData.type1. This particular property is essentially an array of strings similar to this: ['water& ...

javascriptarraysreactjssortingforeach

Utilizing AngularJS and Node.js to update MongoDB

Looking for a solution to update my MongoDB using Node.js and AngularJS within the front-end of my application. The code I currently have is causing an error stating `TypeError: Cannot read property 'put' of undefined. Here is my AngularJS contr ...

javascriptangularjsnode.jsmongodb

When accessing req.param on the server side in a Node.js application, it returns undefined

I am currently utilizing nodejs and angularjs for my project. In the client-side javascript file, I made a GET request to the nodejs server with necessary data in parameters. itinerary.js $http({ method : "GET", url : '/createItinerary&apo ...

javascriptangularjsnode.jsexpress

Insert the user's choice as a MenuItem within the Select component

I currently have a default list of options for the user. However, I want to allow users to add their own category dynamically. This will trigger a dialog box to appear. How can I modify my code so that the value property starts from number 4? Take a look ...

javascriptreactjsmaterial-ui

Error: The context does not have a definition for React

import './App.css'; import ComponentC from './components/ComponentC'; export const UserContext = React.createContext() function App() { return ( <div className="App"> <UserContext.Provider value={& ...

javascriptreactjsreact-nativecomponentsuse-context

Changing the sliding underline effect in a jQuery navigation bar

Recently, I implemented a sliding underline element in my navigation bar. The idea is that when a link is hovered over, the underline smoothly transitions to that element. You can take a look at the codepen example here: https://codepen.io/lucasengnz/pen/e ...

javascriptjqueryhtmlcss

Enhance your UI experience with a beautifully styled button using Material-

I was using a Material UI button with a purple background. <Button component={Link} to={link} style={{ background: '#6c74cc', borderRadius: 3, border: 0, color: 'white', heig ...

javascriptcssreactjstypescriptstyled-components

Steps for organizing a particular key in a map

I need assistance sorting my map based on the "time" value, but so far, I haven't been successful in finding a solution after searching online extensively. If anyone has any insights or recommendations, please share them with me. This is how my Map ...

javascriptangularjssortinghashmap

The jQuery toggle functionality seems to be malfunctioning

I have created a form that should toggle (hide and show) with the click of a button, but for some reason it's not working. Can someone please take a look at my code below and let me know what I'm doing wrong? $(document).ready(function () { ...

javascriptjqueryhtmlcss

Using the MoveToElement and click functions in Protractor with Node.js for automated browser

Trying to click on a checkbox in our application. I have successfully implemented it in Selenium Java using the code below, but struggling to do the same in Protractor Node.js. Any assistance would be appreciated. Selenium- Java : Actions actions ...

javascriptnode.jsselenium-webdriverprotractor

Can you please provide instructions on how to expand the view in the title bar for a JavaScript/CSS/HTML UPW project?

Struggling to integrate the title bar in a UWP project using JavaScript/CSS/HTML and having trouble accessing the necessary APIs. Came across a custom helper class written in c++ in UWP samples on Github, but unable to reference it in my javascript code. H ...

javascriptcssuwp

Is there a way to trigger a function after a tooltip or popover is generated using Twitter Bootstrap?

Is there a way to manipulate a tooltip or popover with twitter bootstrap after it has been created? It seems like there isn't a built-in method for this. $('#selector').popover({ placement: 'bottom' }); For instance, what if I ...

javascriptjquerytwitter-bootstrap