AngularJS filter date is returning a value of NaN-NaN-NaN

I'm facing an issue where the filter I developed is functioning properly on Chrome but not on Firefox. I am puzzled as to why this might be happening.

  myApp.filter('dateCustom', [ '$filter', function ($filter) {
    return function (input) {

      // input => 2014-05-13 15:04:48 

      if(angular.isDefined(input)){
        var d = new Date(input);
        var time = d.getTime();
        return $filter('date')(time,'dd/MM/yyyy');
      }
    }
  }]);

HTML :

<span> {{ project.date_created_at | dateCustom }} </span> 

Chrome

Firefox

Answer №1

To display a date in Firefox, the format needs to have slashes instead of dashes initially.

var date = new Date(input.replace(/-/g, '/'));

Answer №2

When it comes to converting a string to a date, the process can differ from browser to browser. If you find yourself encountering NaN when working with dates, it is likely due to the date conversion issues.

In my experience, the most reliable solution I have come across is utilizing MomentJS, a fantastic tool for formatting dates. Upon using MomentJS, I noticed that it worked seamlessly across all browsers. Simply use:

moment($scope.date).format("DD/MM/YYYY");

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

Building a node.is script to validate email addresses

This code snippet is for validating email addresses. I have successfully implemented example 5, where the email length must be over 5 characters to avoid errors and prompt users to re-enter their email address. However, I am unsure how to handle examples ...

Issue with displaying and hiding list elements using jQuery

I am attempting to create an accordion feature using <li> elements with classes .level1, .level2, .level3, and so on. The problem I am encountering is that when I click on a .level2 element, the items hide correctly until the next .level2 element wit ...

Apache2 is displaying a 403 Forbidden Error

Working on setting up Apache2 on my Ubuntu system has been a successful endeavor. However, I am encountering a challenge in configuring a server for my AngularJS project's HTML pages. Currently, the directory is as follows: <Directory /var/www/htm ...

The presence of a Bootstrap addon is resulting in horizontal scrolling on mobile devices within the webpage

I am encountering a peculiar issue with an input-group in my cshtml file which features a Bootstrap addon. The problem arises on mobile devices, where upon focusing on the input field, the page scrolls horizontally to the right, revealing the right margin ...

Is there a way to enable popovers globally and also utilize the container: 'body' option simultaneously?

My Bootstrap 5 popovers seem to be missing the arrow and I suspect it's because of interference from the parent element. The documentation provides a solution by using the container: 'body' option on a single item. How can I apply this to al ...

What is the best way to use CSS to ensure that dynamic, data-driven characters can be properly displayed within a div

I'm in the process of updating a data-centric website that relies on information from an automated database engine. In the HTML, there's a fixed-size button containing text pulled from the database. I'm looking to incorporate some CSS styles ...

methods for removing json comments using javascript

Looking to remove JSON comments using JavaScript? I believe a regular expression would be the most efficient method. { "field": { // comments "n": 1 /* multi-line ... comments */ }, ...

The String returned by out.print() cannot be compared

I am currently utilizing JSP as a server-side script alongside HTML and JQuery for the client end functionality. My AJAX requests to the JSP file are working smoothly with no issues. However, I have encountered a problem when attempting to compare the stri ...

Tips for Preventing Unnecessary Ajax Requests

What I require When a click event is triggered, a service call should be made only once. Use case Dropdown1 Dropdown2 Dropdown3 1. There are three dropdowns on the HTML page. 2. When Dropdown1 is called - an AJAX call is made only onc ...

The Bootstrap toast fails to appear on the screen

I am currently working on a website project using HTML with bootstrap and javascript. I have been attempting to include a toast feature by implementing the code provided on the bootstrap website: <div class="toast" role="alert" aria-live="assertive" ...

Is there a way to create a new prettyphoto window by clicking on a link within the original prettyphoto window?

I have an HTML table that is dynamically constructed on the server side using AJAX. The table is displayed using prettyphoto, everything works fine up to this point. However, the last column of the table contains a link that should open an image using pret ...

The issue arises when attempting to apply a filter to an array, as the variable returns as

After successfully using local state, I encountered an issue with Redux where the component returned undefined. How can I effectively compare two arrays and filter out users who are already in the current users array? import { FETCH_USERS_TO_ADD } from & ...

Is there a way in JavaScript to activate a web element by clicking on its center?

I have a webpage and I'm looking to simulate clicks using the console. I attempted to do so with the code snippet document.getElementById("myButtonId").click(), but it seems that the element only responds to clicks at its center location. Is there ano ...

Utilizing Docker to deploy both a RestAPI and Front-End application on a single port for

After setting up a new droplet on DigitalOcean and installing Docker, I have created two containers. One container houses my NodeJS app, serving a RestAPI on port 8080. The second container runs Nginx to expose static html files (utilizing AngularJS) on po ...

Clicking on a column or x-axis category in Highcharts will automatically include the job number in the page URL

Check out the code I've put together: http://jsfiddle.net/a9QwS/ I'm looking to add functionality where clicking on a column or x-axis label will append its data to the URL. For example, in PHP, I can do something like this: echo " <td sty ...

One way to retrieve API responses in node js is by utilizing callback functions

I am currently exploring callback functions and utilizing the request module in node js to retrieve information. As Javascript is asynchronous, I am struggling with how to properly return my response. Below are snippets of my code. In my app.js file: var ...

Combine an array of objects into a regular object

Imagine having an array structure as shown below: const student = [ { firstName: 'Partho', Lastname: 'Das' }, { firstName: 'Bapon', Lastname: 'Sarkar' } ]; const profile = [ { education: 'SWE', profe ...

Delay the axios get request in the useEffect

Working with React JS, I have implemented a useEffect hook to request data from a database via an Express server when the page renders. However, if the server is down, the app will continue to make thousands of requests until it crashes. Is there a way to ...

Automated scrolling within a div when an li element overflows

Looking to implement automatic scrolling in a div. I have a list of elements within a fixed height div, and now I want the div to scroll automatically when I press the down key after highlighting the 3rd li element (i.e Compt0005). Can anyone help me solve ...

What is the best way to utilize the angular yeoman generator to generate custom files within a Laravel project while specifying the file paths?

Struggling to define the path while using the yeoman angular generator... Running yo angular:service ServiceName results in creating test and scripts directories. All I really want is to set a specific path for the generator to save my service file. If ...