AngularJS date formatting fails to properly format dates

{{ map.thedate }}

The result is 2014-06-29 16:43:48

Even after using the following code, it still displays the same date as above.

{{ map.thedate | date:'medium' }}

Answer №1

Your provided date is not formatted in ISO standard. You can easily rectify this by applying a filter to convert your input into a proper date format and then use the date filter accordingly.

app.filter("toProperDate", function () {
    return function (input) {
        return new Date(input);
    }
});

Next, include this in your HTML markup:

{{map.providedDate | toProperDate | date:'medium'}}

Answer №2

Transform your date with this code snippet:

for (var i=0; i<map.length; i++) {
    var unixTime = (new Date(map[i].thedate)).getTime();         
    map[i].thedate= unixTime;        
}        

If you're working with AngularJS, it's important to convert your dates to a format that it can accept easily. This simple solution allows you to iterate over your data and make the necessary conversions.

Another approach is to handle this conversion on the server-side by iterating through the data and converting each date to a Unix timestamp.

Referencing the documentation, here is a description of the accepted date formats:

The date should be in one of these formats: Date object, milliseconds (string or number), or various ISO 8601 datetime string formats (e.g. yyyy-MM-ddTHH:mm:ss.sssZ). If no timezone is specified, the time will be assumed to be in the local timezone.

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

IE encountered an invalid character

While working on a JavaScript function, I encountered an issue with a string variable. Specifically, when running the page in IE with this script, I receive an error message indicating an invalid character at the following line: let displayString = `${s ...

DataTables: Personalized Response Management

Recently I delved into AngularJS and DataTables and had a query regarding customizing the response expected by DataTables. The typical format DataTables expects looks like this: { "draw": 1, "recordsTotal": 57, "recordsFiltered": 5, "data" ...

The Grid within the Container is presented vertically rather than horizontally

I followed the coding style exactly as shown in a recent tutorial on YouTube, where the cards were displayed in a row. However, when I implemented it, they are appearing strangely in a column. Why is this happening? The default should be inline. Even afte ...

Express Power Tool - Error: app.set function is undefined

My journey with creating an API using Node/Express began with a solo endeavor to learn the basics in a 'naive' manner. The initial setup worked smoothly, prompting me to experiment with express-generator. Upon completion of the setup process, th ...

In JavaScript, I'm facing an issue where I can't seem to use ' ' for line breaks for some reason. It's not functioning as expected, and I'm

It seems that I have been struggling with writing a new line in my code using "\n". Despite multiple attempts, the desired outcome has not been achieved. Below is my source code along with a screenshot of the result: var ary3 = new Array('seve ...

Error message: Please provide an expression with const in React JS component

Can you assist me with this issue? I am trying to determine if the user is registered. If they are registered, I want to display the home URL, and if they are not registered, I want to display the registration URL. To do this, I am checking the saved dat ...

JavaScript ACTING UP -> CROSS-ORIGIN RESOURCE ACCESS ERROR

After extensive research and troubleshooting, it dawned on me that the issue was not with JavaScript itself. Instead, I was facing a cross origin resource exception, which occurred because the ajax request was unable to access my server script due to lac ...

Show the input from one HTML form on a different HTML form

Seeking guidance on utilizing local storage in HTML5. How can I extract information from one form and present it on another HTML form page? Picture this: two forms at play here. Upon populating form 1 and hitting the submit button, the content should be v ...

Update the index of each list object and then add them to the Angular controller

Currently, I am working on integrating Spring with AngularJS. In my setup, I have a Spring controller returning a List object to the Angular controller. When I print the List in the Spring controller console, it appears as follows: [org.com.pro.dto.MyDTO ...

send additional form elements to the AJAX suggestion box script

** shifted to this location: Numerous similar AJAX suggestion boxes without IDs I enlisted the help of a developer to create a jQuery AJAX suggestion box script some time ago, and it has been working flawlessly. Now, I am striving to understand it better ...

Identifying Changes with jQuery Event Listeners

I am trying to run some javascript code that is in the "onchange" attribute of an HTML element. For example: <input id="el" type="text" onchange="alert('test');" value="" /> Instead of using the onchange attribute, I want to trigger the e ...

The issue arises when the AngularJS function is unable to properly update due to a

When I create a dropdown menu using ng-repeat, my function fails if the JSON data is in string format, but works fine with integers. HERE IS AN EXAMPLE As you can observe, the chart uploads successfully with the year selected from the dropdown as an inte ...

implementing conditional logic in angularjs expressions

<p>{{isExisted}}</p> Looking to show either "Active" or "Inactive", but the isExisted variable only returns true or false. Need help with setting up a conditional if else statement to change it to the desired value. ...

Enrollment of Vue components

After importing the component into the JavaScript file, I added it to the index.vue file as follows: import fmsSubUnitDetails from '../subunitDetails'; export default{ components: { fmsSubUnitDetails }, } Despite this, I am still encount ...

What is the quickest method to perform a comprehensive comparison of arrays and combine distinct objects?

I am currently working with NextJS and Zustand and I have a state in Zustand that consists of an array of objects: [{a:1, b:2}, {a:2, b:3}] Additionally, there is another incoming array of objects that contains some of the existing objects as well as new ...

Is there a way to integrate Javascript code with a React component?

I need to find a way to include this block of code in just one specific React component. Any suggestions? <!-- Create a button that your customers click to complete their purchase. Customize the styling to suit your branding. --> <button sty ...

Adjusting the Pace of a CSS Marquee

My CSS marquee effect is working perfectly, but I am having trouble with the speed. The issue arises when the text length varies - shorter text takes longer to scroll while longer text scrolls quickly. This inconsistency is due to the animation duration an ...

Tips for successfully retrieving a span value in VUE

I am working with forms <input type="text" v-model="email"> <span>Extracted Value</span> Can someone help me figure out how to pass the value from the span element? data () { return { email: '/*Here goes the extracted valu ...

Is Riot.js the best choice for server-side rendering and routing?

Currently, I am using Node along with Riot.js and the Grapnel routing library. I have successfully set up routing on the client side, but I am facing difficulty in making it work on the server side. The functioning of my client router is straightforward. ...

What is the best way to break out of a function halfway through?

What are your thoughts on using nested if statements? $scope.addToCart = function () { if (flagA) { if (flagB) { if (flagC) { alert('nononono!'); return; } } } e ...