Error in FireFox caused by interpolation

The dates retrieved from the database have this format: 2013-11-21 17:43:20

This piece of code functions flawlessly in Chrome but encounters issues in FireFox:

<ul class="job-lookup-results" ng-show="data" style="padding:0 10px;">
    <li class="job-lookup-result" ng-repeat="result in data" style="margin:5px 0; font-size:80%;"><a href="/admin/jobs/edit/{{result.Job.id}}" class="job-lookup-result-link">{{result.Job.name}}</a> ({{result.Job.id}}), {{result.Company.name}}, {{result.Job.created | dateToISO | date:'shortDate'}}</li>
    <li class="job-lookup-result" ng-hide="data.length > 0">No matches found.</li>
</ul>

An error message indicates:

[15:17:40.890] "Error: [$interpolate:interr] http://errors.angularjs.org/1.2.5/$interpolate/interr?p0=%20(%7B%7Bresult.Job.id%7D%7D)%2C%20%7B%7Bresult.Company.name%7D%7D%2C%20%7B%7Bresult.Job.created%20%7C%20dateToISO%20%7C%20date%3A'shortDate'%7D%7D&p1=RangeError%3A%20invalid%20date
...

Though I am unsure of the error, here is my custom filter code:

app.filter('dateToISO', function() {
  return function(input) {
    input = new Date(input).toISOString();
    return input;
  };
});

Update: Upon removing the | dateToISO |, the code works fine, suggesting a connection to the custom filter.

Answer №1

It seems FireFox is struggling with the date format while Chrome is handling it fine, so you may need to manually adjust the format. Using a filter is still recommended.

Syntax:

<div>{{Object.created | fixBadDate | date:'shortDate'}}</div>

Script:

app.filter('fixBadDate', function() {
  return function(badTime) {
    var goodTime = badTime.replace(/(.+) (.+)/, "$1T$2Z");
    return goodTime;
  };
});

Check out the live demo here (click).

Answer №2

result.Job.created is in the standard MySQL datetime format (e.g. "2013-12-25 13:12:01"), but Firefox cannot create a date object directly from this format.

Therefore, to convert the input datetime string into a Date object, you must split the string and use its individual parts with the syntax

new Date(year, month [, day, hour, minute, second, millisecond]);
:

app.filter('mysqlToISO', function() {
  return function(input) {
    var p = input.split(/[- :]/);
    /* new Date(year, month [, day, hour, minute, second, millisecond]); */
    return new Date(p[0], p[1]-1, p[2], p[3], p[4], p[5]);
  };
});

app.controller('ctrl', function($scope){
    $scope.date = "2013-12-25 13:12:01";
});
<body ng-controller="ctrl">
  {{date | mysqlToISO | date:'shortDate'}}
</body>

Alternatively, you can also choose to utilize the popular momentjs library for this task.

Answer №3

The most reliable format that I found to work across all browsers was:

var date = new Date(input); // In this example, input would be '2013-12-25T13:12:01'

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

What is the process for assigning a class to every button on a webpage?

For a recent project, I utilized input[type="button"] to add a style to all of the buttons. Although it functions properly on most browsers, Internet Explorer 6 does not recognize the styling. Is there a workaround for this issue? Perhaps creating a speci ...

A method for automatically refreshing a webpage once it switches between specific resolutions

On my page www.redpeppermedia.in/tc24_beta/, it functions well at a resolution of over 980px. However, when the resolution is brought down to 768px, the CSS and media queries alter the layout. But upon refreshing the page at 768px, everything corrects itse ...

Using Laravel with VueJS: Executing VueJS Function from Blade Template

I've been searching for solutions and references to resolve my issues. I'm struggling with calling a Vue method (e.g., createItem() {...}) that is located inside a VueJs component using an external button. Here is my "app.js" file: // ..\r ...

Vue.js does not seem to be properly assigning attributes that are declared within the data object array

Trying to get a hang of vue.js and looking to create dynamic product cards using it: This is the snippet from my HTML file: <div id="app"> <card v-for="products in product" :productname="product.productname"></card> </div> Here&a ...

Does Angular 6 have a feature that is equivalent to angularJs form.firstname.$active?

Is there a way in Angular 6 to find the active or focused form element so I can toggle the class on the label associated with that input field? <input type="text" money name="amount" id="amount" class="form-control" ng-model="amount" /> <label fo ...

Obtaining the AngularJS controller variable within a PHP clause in Laravel 5

Is there a way to retrieve an AngularJS controller variable in a PHP clause? I attempted using <?php $user = User::find({{ message.from_id }})?> but it did not produce the desired result. message.blade.php <div ng-repeat="message in current.mes ...

Having trouble displaying the selection menu when using Angular Strap?

//test.js const dropdownMenu = document.querySelector('.dropdown-menu'); dropdownMenu.addEventListener('click', (event) => { alert(`You clicked on ${event.target.textContent}`); }); // index.html <div class="dropdown"> ...

Utilizing the jQuery UI Date Picker in an AJAX Request

I have a PHP script that generates HTML along with javascript (specifically the DatePicker from jQuery UI). The PHP script is invoked from a main page using jQuery/AJAX. Although all my HTML is displayed correctly, I encounter a console error that reads: ...

"Trouble with React JS redirection feature failing to redirect as intended

Could someone please help me troubleshoot why the redirect function is not working in my code? There are no error messages showing up, but it seems like the Redirect call from the react-router-dom library is causing a problem. The console log displays &apo ...

What is the best way to stop Quasar dropdown list from moving along with the page scroll?

I am facing an issue with my code while using Quasar (Vue 3.0). The code snippet in question is: <q-select filled v-model="model" :options="options" label="Filled" /> When the drop-down menu is open and I scroll the pag ...

Struggling to transfer the information from the form onto a text file, but all I'm getting is

I've been attempting to save the text file data submitted from this form, but I'm encountering issues. Instead of correct output, all I get is a sequence of blank spaces and other strange results. <?php $data = $_POST['url_submit']; ...

What are the drawbacks of relying on a dependent dependency in software development?

In a recent discussion on Stack Overflow, it was suggested that the best practice is to install packages from sub-dependencies for future use in the app, rather than directly from the dependencies node_modules folder. However, my scenario is a bit unique. ...

Developing a structure with a condensed form of a category

Is it possible to create a Prisma schema for mongoDb that includes a condensed version of another object? For context, imagine the following sample data: const basicUser = { id: "62091d9ae17cad32fbe0eda5", displayName: "John Smith", }; const post ...

Create an innovative mobile application (utilizing Cordova) that incorporates a cutting-edge Polymer component to enable

Currently, I am in the process of developing a mobile application with Cordova. The application utilizes polymer 2.0 components to facilitate the creation of master/child records in the database. One of the challenges I am facing is integrating file upl ...

Check if a Firestore document exists and display a button in Angular based on the boolean result

Seeking desired outcome: How to display a button in an Angular view based on the boolean value returned by an Angular Service that checks for the existence of a Firestore document. Current Scenario The Service successfully verifies the presence of t ...

Why Does My HTML5 Canvas Rectangle Drawing Keep Vanishing?

How are you doing today? I recently discovered a new technique on this website that allowed me to draw a rectangle on an HTML5 canvas with the click of a button. However, I encountered an issue where the previous rectangle would disappear every time I tri ...

Utilizing AJAX to input information into the database with Magento

I'm just starting to learn about ajax and I may be approaching this problem incorrectly. Essentially, I have a javascript variable that needs to be added to the database. Here is what I have so far... onInit: function() { window.fcWidget.on(&apos ...

Tips for specifying the data type of a setter in JavaScript, VSCode, and TypeScript?

Let me provide a straightforward example to illustrate the problem: class Person { _name = ''; _age = 0; get name() { return this._name; } /** * @type {string} */ set name(name) { this._name = na ...

Guide to populating jQuery DataTables with JSON data

I am currently implementing jquery datatable in my application. You can find the plugin link here My goal is to populate the datatable with JSON data, but I have encountered a problem. Here is the code snippet that I am working with: HTML: <table id= ...

Why is the responseText of an AJAX request empty on Chrome?

Why does this simple AJAX request work in IE but not Chrome? Check out the code below: var x = new XMLHttpRequest(); x.open("GET","style.php",true); x.send(); alert(x.responseText); The last line triggers an empty 'alert' window. Here's ...