Issue with Moment.js amDateFormat consistently displaying date as 1970

Check out this link for more information

I've integrated Moment.js and Angular-moment into my application.

Oddly enough, all my epoch timestamps are being converted to the same date in 1970.

<td class="timespan">{{tag.added_epoch | amDateFormat:'dddd, MMMM Do YYYY'}}</td>

The value of tag.added_epoch is added_epoch: 1432252800

But when I manually convert it online, I get the correct date:

Any thoughts on why 1432252800 is being transformed into Saturday, January 17th 1970? Let's figure this out together!

javascriptangularjstimestampmomentjsangular-moment

Answer №1

Let me quickly outline the issue and resolution.

Moment.js provides two methods for creating a date from a Unix timestamp: moment(1432252800) and moment.unix(1432252800).

Both functions start at the same time (Jan 1, 1970, 12AM UTC), but moment() interprets the number as milliseconds (around 17 days) while moment.unix() uses seconds.

angular-moment includes the amFromUnix filter, which can be found in the source code.

You can implement it as shown below:

<time am-time-ago="myDate|amFromUnix">
{{myDate|amFromUnix|amCalendar}}

Answer №2

Here is an example of creating your own filter:

 newApp.filter("convertDate", function(){
   return function(date, format){
     return moment(date).format(format);
   }
 })

You can then use this filter in your HTML like so:

<p class="formatted-date">{{date | convertDate:'dddd, MMMM Do YYYY'}}</p>

Check out the Plunker demo for more information.

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

Setting environment variables using the node command is successful on Linux and macOS platforms, however, it may not function properly

When I clone a project using git, I encounter issues running npm run build on Windows. The command works fine on Mac and Linux: "build": "API=https://dev-api.myexample.com/v1.0 babel-node build.js", An error message is displayed: 'API' is no ...

javascriptnode.jsnpm

ERROR: An issue occurred while attempting to resolve key-value pairs

Within my function, I am attempting to return a set of key-value pairs upon promise completion, but encountering difficulties. const getCartSummary = async(order) => { return new Promise(async(request, resolve) => { try { cons ...

javascriptnode.jsexpress

Should we consider using extra url query parameters as a legitimate method to avoid caching or enforce the updating of css/js files?

Is it acceptable to include extra URL query parameters in order to avoid caching or enforce the updating of CSS/JS files? /style.css?v=1 Or would it be preferable to rename the file/directory instead? /style.1.css I've heard that this could potent ...

javascripthtmlcsscachingserver

Is there a way to determine if a browser's network activity is inactive?

Within an angularJS application, a noticeable delay can be experienced between the user and the server (potentially due to limited bandwidth), resulting in a wait time of approximately 2-500ms when loading a new page. I am considering implementing a metho ...

javascriptangularjsajaxweb-applications

Learn how to successfully place a draggable object into a sortable container while ensuring that the dropped item is a personalized helper element rather than the original object

The jQuery draggable/sortable demo showcases the process of dropping a clone of the draggable item (both draggable and sortable elements share the same structure). However, I am interested in dropping a different DOM structure. For example, when dragging a ...

javascriptjqueryjquery-ui-draggablejquery-ui-sortablejquery-ui-droppable

Different choices for data attributes in React

Recently, I downloaded a new app that requires multiple API calls. The first API call retrieves 20 Objects, each with its own unique ID. The second API call is made based on the IDs from the first call. To display this data in my component: <div> ...

javascripthtmlreactjs

What could be causing the malfunction of my Superfish menu in Firefox?

I am currently experimenting with the Superfish jQuery plugin to improve a drop-down menu on my website. Unfortunately, in Firefox browser (v. 21.0), the drop-down menu does not open when hovering over it as expected. However, it works fine in Chrome and O ...

javascripthtmlcsssasssuperfish

Tips for adjusting the font size of a Chip using Material-UI

I am using a widget called Chip const styles = { root:{ }, chip:{ margin: "2px", padding: "2px" } } const SmartTagChip = (props) =>{ const classes = useStyles(); return( <Chip style={{color:"white&q ...

javascriptcssmaterial-ui

How can components be utilized with v-edit-dialog?

Hey there, I've been exploring the v-edit-dialog component offered by Vuetify and had a query about its implementation. Currently, I'm structuring my v-data-table in a way where I'm importing a component with props into a template slot. The ...

javascriptvue.jsvuetify.js

Position items at the center of the grid in material UI

I am having difficulty centering the grid items of material UI. I have tried using the justifyItems and alignItems props as mentioned in the documentation, but I'm still unable to achieve the desired result. Can anyone provide some guidance? Below is ...

javascripthtmlcssreactjsmaterial-ui

What is the best way to set the date defaultValue to be empty?

I've developed a basic radio button to display an additional input field when the user chooses yes. I also created a function that will clear the fields if the user selects no. schema.ts: const formSchemaData = z.object({ doesHaveDryRun: z.enum( ...

javascriptreactjsnext.jsreact-hook-formzod

Saving Data in an Angular Material Table: A How-to Guide

I have a basic angular material table and I am looking for a way to save the data displayed in each row when a button is clicked. Is it possible to save each row of data as an object and push it to an array? If so, how can I achieve this? <div class=& ...

javascripthtmlangulartypescriptangular-material

Mongoose - facing issues with $and operator, looking for a way to locate an array containing both items

I'm currently developing a chat-based application that involves private messaging between individuals. Essentially, a Chat model in my application consists of the following schema: let schema = new Schema({ members: [{ type: ObjectId, ref: models.u ...

javascriptnode.jsmongodbexpress

Changing a d3 event from JavaScript to Typescript in an Angular2 environment

I am a beginner in Typescript and Angular 2. My goal is to create an Angular2 component that incorporates a d3js tool click here. However, I am facing challenges when it comes to converting it to Typescript. For instance, I am unsure if this code rewrite ...

javascriptangulard3.jstypescript

Node error connecting to Mongo database

Having trouble connecting my node server to MongoDB, here is the code snippet I am using: var http = require("http"); var url = require("url"); var Router = require('node-simple-router'); var router = Router(); var qs = require('querystring ...

javascriptnode.jsmongodbmongoose

How to Send a JavaScript Array to a JSP Endpoint

I'm in the process of creating a web application that interacts with another website through a JS API. I would like to incorporate an array of JSON objects obtained from this API into my Java Application. Is there any way to submit this array, perhap ...

javascriptarraysjsonjsp

Conceal one object when the other is revealed?

Is there a way to hide the element with the class .close-button while showing another element with the ID #loading-animation? Can jQuery conditionals help achieve this? For example: if ($('#loading-animation').is(':visible')) { $ ...

javascriptjquerycss

Tips for retrieving the distance from the top of a specific div element and transferring it to another div

How can I add margin-top based on the tab that is clicked? Specifically, when TAB 4 is selected, I want the content to remain in the same position from the top. ...

javascriptjquerycss

Ways to incorporate JavaScript code within Reactjs

I am currently working with Reactjs and using Nextjs. I am facing a challenge regarding integrating "index.html" with "index.js". At the bottom of "index.html", there is some JavaScript code that I need to transfer to another file. Can you advise me on w ...

javascriptnode.jsreactjsnext.js

Retrieve highlighted text along with its corresponding tag in ReactJS

my <span class="highlight">highlighted</span> word The text above is showing an example including HTML tags. However, when using window.getSelection(), only the text "my highlighted word" is returned without the surrounding <span& ...

javascripthtmlreactjstypescriptreact-native