JavaScript Date object inconsistency

I've been struggling with getting this system to function properly. Here's the issue I'm facing.

The dates I receive from the REST API come in various formats 

(mm-dd-yyyy-timezone, mm-dd-yyy hh:mm:ss, yyyy-mm-dd-timezone, yyyy-mm-dd hh:mm:ss)
but I need to format them in the yyyy-mm-dd style. To achieve this, I've used substring to extract the first 10 characters and obtain the Datestring while disregarding time and timezone information.

Throughout this process, an interesting observation has arisen.

new Date("08-11-1987") provides Tue Aug 11 1987 00:00:00 GMT-0700 (Pacific Daylight Time)

However,

new Date("1987-08-11") gives me Mon Aug 10 1987 17:00:00 GMT-0700 (Pacific Daylight Time)

I am puzzled by this one-day discrepancy when creating the Date object.

javascriptangularjsdatedatetimeformat

Answer №1

If AngularJS is a tool you're utilizing in your project, you can use the $filter feature to customize the date format according to your preferences. Here's how you can achieve that:

$scope.datestring = $filter("date")(data.date, 'yyyy-MM-dd');

For more detailed information on using the $filter(date) function, check out this resource.

EDIT:

Let's clarify - if you have a date like 10-12-2015 and want it displayed as 2015-10-12, are you using a JavaScript datepicker plugin for selecting dates? When I input a date using a date picker, it appears as follows: 

Mon Oct 12 2015 00:00:00 GMT+0200 (W. Europe Daylight Time)

Your variable holding this date value is named data.date. To transform this date into the desired format of yyyy/MM/dd, you can apply the following filtering method:

$scope.datestring = $filter("date")(data.date, 'yyyy/MM/dd');

This will output 2015/10/12 without any unexpected characters or digits being displayed.

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

repeating the content within a dynamic popover using AngularJS and UI-Bootstrap

I am attempting to display a list of items in a popover within an ng-repeat loop using AngularJS and the ui-bootstrap package (http://angular-ui.github.io/bootstrap/). HTML <div ng-repeat='session in sessions'> <p popover="{{sessi ...

angularjspopoverangular-ui-bootstrapangularjs-ng-repeat

Continuously flowing chain of replies from a series of queries using RxJS

I am exploring the world of RxJS and seeking guidance from experienced individuals. My goal is to establish a synchronized flow of responses, along with their corresponding requests, from a stream of payload data. The desired approach involves sending ea ...

javascriptreactive-programmingrxjs

Removing the empty option in a select element with ng-model

There's a situation I'm dealing with that involves a select dropdown along with a refresh button and a plus button. The issue arises when clicking the refresh button sets the model to null, while clicking the plus button displays the dropdown wit ...

javascriptangularjs

Struggling to modify a nested object in the state

import React, { Component } from 'react'; import ColorBox from './ColorBox' import './ColorBoxes.css' class ColorBoxes extends Component { state = { colors: {} } clickedColor = (color) => { le ...

javascriptreactjsobjectstatespread-syntax

Modify the href attribute of an anchor tag that does not have a specified class or

I am currently using an event plugin that automatically links all schedule text to the main event page through anchor tags, like this: <td><a href="http://apavtcongresso.staging.wpengine.com/event/congresso-apavt-2018/">Chegada dos primeiros c ...

javascriptjqueryhtmlcss

We encountered an issue while trying to bootstrap react with the './node_modules/bootstrap/dist/js/bootstrap.min.js' module. The error was a result of the module not being able

Error : I encountered a problem when trying to add a navbar using Bootstrap. Without importing the jQuery part, the navbar works but the collapsing feature does not work. However, when I add the jQuery part, I receive the following error: ./node_modules ...

javascriptreactjstwitter-bootstrapbootstrap-4javascript-framework

Tips for recognizing a faulty CSS line in a WordPress site

Recently, I encountered an issue on my website, yildirimakademi, when using woocommerce to add a product to the shopping cart. While the shopping cart logo appears correctly on the right side of the navbar, I noticed that the image becomes distorted when ...

javascriptcssajaxwordpress

Saving events with a Full Calendar is a seamless process that

I am encountering a problem while trying to save the end time and enable dragging across multiple days on my fullcalendar. I have configured it to save data using jQuery.post to my database, but I am struggling to populate the end value and allow it to be ...

javascriptjqueryfullcalendar

Using React hooks to control the throttle of useLayoutEffect

I am working on a code snippet that uses useLayoutEffect to attach an event listener for window resize events. I want to enhance it by adding a throttle of 1000ms, so that handleCanvasResize is only called once per second. Can anyone advise on the appropr ...

javascriptreactjs

Unsuccessful attempt at testing RequireJS in a straightforward manner

As a beginner in RequireJS, I am currently experimenting to gain some experience. My goal is to make require load basic Angular first and then manually bring in Angular UI Bootstrap. However, I am encountering an issue where UI Bootstrap complains that ang ...

javascriptjqueryangularjsrequirejsangular-ui-bootstrap

Unsubscribe from the Event Listener in Node.js

In light of this inquiry (linked here), can the Listener be eliminated from within the callback function? To illustrate: let callback = function(stream) { if(condition) performAction(); else server.removeListener('connection', cal ...

javascriptnode.jsdom-events

Issue with integrating petfinder API with a ReactJS application

I'm encountering an issue with the interaction between the petfinder API and ReactJS. The functionality works smoothly until I attempt to access the "pets" object/array. import React, { Component } from 'react'; import { getPets } from &apos ...

javascriptapireactjs

ms-card malfunctioning due to data issues

I'm facing difficulties in transferring the data to the template. Although I can access the data in HTML using vm.maquinas and maquina, I am unable to pass it to the TEMPLATE through ng-model. Information about ms-cards was not abundant. Module ang ...

javascripthtmlangularjsframeworksangular-material

How can the ApolloClient authorization header be refreshed following a successful login process?

Essentially, within our index.js file, we establish the ApolloProvider authorization for conducting queries and mutations. import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import ApolloC ...

javascriptreactjssessionlocal-storagegraphql

When Angular UI Bootstrap Carousel and Tabs overlap on a single page

Currently, I am utilizing Angular UI Bootstrap for a project involving AngularJS. Within this project, I have implemented both a Carousel and Tabs on the same page. A challenge that I am facing is that the Tabs are switching along with the Carousel slides ...

angularjscarouselangular-ui-bootstrapangular-ui-bootstrap-tab

Exploring the scope of the modalInstance received from ui-bootstrap's $modal.open() function

When preparing for a test, I am interested in creating a modal instance and then accessing its scope. Here is an example of what I would like to do: var modalInstance = $modal.open({ ... }) var scope = modalInstance.getScope() However, the modalInstance ...

angularjsmodal-dialogangular-ui-bootstrap

Utilizing one-way data binding with Angular 2 in HTML is similar to the approach used in Angular 1, employing the

Is there a method in Angular 2 to achieve one-way data binding similar to what we did in Angular 1? <!DOCTYPE html> <html lang="en-US"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> &l ...

javascriptangularjsangular2-templatetwo-way-binding

Angular's form validation is failing to meet expectations

I am struggling to comprehend why my form validation is not working as expected. Even though I have set the 'novalidate' attribute to disable HTML5 validation and marked all fields as required, including email validation for the mail input, the f ...

angularjsformsvalidation

Implementing dynamic element selection with jQuery: combining onClick and onChange events

I am looking to update the appearance of the arrow on a select option. By default, it is styled as caret-down. When a user clicks in the input area, I want to change the style to caret-up. If the select option has been changed or no action has been taken, ...

javascripthtmljquerycss

Desiring the ability to retrieve a JSON response from a Laravel controller for use in my javascript code

I am trying to figure out the best way to fetch data from my Laravel controller and show it using JavaScript on a webpage. How should I approach this? Here is the code snippet of my controller and ajax call: var jq = jQuery.noConflict(); var id = jq(" ...

javascriptjsonajaxlaravel