`Error encountered when attempting to convert date with Angular JS filter`

Utilizing angular js filter in the controller for date formatting. A user selects a date from a uib-datepicker-popup. The goal is to format this date using ISO 8601 (yyyy-mm-dd) date format. Upon logging the user-selected date, the output is as follows: 

Sat Aug 20 2016 00:00:00 GMT+0300 (EAT)

After applying the angular $filter as shown below

$filter('date')(new Date(vm.my_date), 'yyyy-mm-dd');

The resulting date appears as

2016-00-20

Check out the code in the controller below

        // Logs Sat Aug 20 2016 00:00:00 GMT+0300 (EAT)
        console.log(vm.my_date);

        var converted = $filter('date')(new Date(vm.my_date), 'yyyy-mm-dd');

        // Logs 2016-00-20
        console.log(converted);

What could be the issue here?

javascriptangularjsdateangularjs-filter

Answer №1

The recommended format for the filter is 'yyyy-MM-dd'. For more information, please refer to the Angular filter documentation.

Answer №2

When you input the mm in your filter, the filter interprets it as minutes.
To make the filter recognize the m as months, it needs to be in UPPERCASE as MM.
Modifying the filter from:

var converted = $filter('date')(new Date(vm.my_date), 'yyyy-mm-dd');

to

var converted = $filter('date')(new Date(vm.my_date), 'yyyy-MM-dd');

should resolve the problem.

Answer №3

Have you considered leveraging the ui.bootstrap.dateparser? It eliminates the necessity of developing a custom filter as there is an existing one integrated into ui.bootstrap.datepicker. Explore Angular Directives for Bootstrap

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

Creating floating images in AngularJS is a simple process that can add visual interest

As someone new to the world of AngularJS, I have been amazed by the stunning image animations on certain websites. I am eager to incorporate similar features into my own site. If anyone can offer guidance on how to achieve this, I would greatly appreciate ...

htmlangularjsimagecssjsp

Determine if a specific string is present in any of the values within an array by utilizing

A scenario: I have a cookie that has been split into an array: var treats = document.cookie.split(';'); [dogs=bla, cats=sdfgh, cabbages=kjhgfdfg] If I aim to locate the index of 'cats=sdfgh', I can utilize treats.indexOf('cats= ...

javascriptarrayscookies

What are the steps to increase or decrease the quantity of a product?

Is there a way to adjust the quantity of products in the shopping cart? I would like to be able to increase and decrease the quantity, while also displaying the current value in a span tag. <a href="javascript:" id="minus2" onclick="decrementValue()" ...

javascriptphpajax

Extracting the id of an element using jQuery

The desired outcome is for the code to print the id of the selected div, but it's not working as expected. I've reviewed it multiple times but couldn't pinpoint the error. Any assistance would be greatly appreciated. Here is the HTML: < ...

javascriptjqueryhtml

What is the process for obtaining a compilation of warnings from the next.js terminal?

While running my project on VScode, I noticed a series of warnings appearing in the terminal. One specific warning that caught my attention is: The `bg-variant` mixin has been deprecated as of v4.4.0. It will be removed entirely in v5. on line 8 ...

javascriptreactjserror-handlingnext.jsconsole.log

Updating a Texture Image in Three.js

I'm currently working on a minecraft texture editor using three.js, with a similar interface to this. My goal is to implement basic click-and-paint functionality, but I'm facing challenges in achieving this. I have textures for each face of every ...

javascriptthree.jstextures

Creating a WordPress post popup using Ajax with SimpleModal and jQuery

I tried to follow the instructions provided in this tutorial but unfortunately, I couldn't get it to work. This is the process I followed: 1 / Including in the header <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ...

javascriptphpjqueryajaxwordpress

Display all y-axis values in the tooltip using HighCharts

I utilized a chart example from http://www.highcharts.com/demo/column-stacked When you hover the mouse over a column, it displays the value of the y axis being hovered and the total value. I am interested in having the tooltip show the values of all 3 y ...

javascriptjqueryhighcharts

Require help with personalizing a jQuery horizontal menu

I recently downloaded this amazing menu for my first website project By clicking the download source link, you can access the code Now, I need your kind help with two issues: Issue 1: The menu seems to be getting hidden under other elements on the page ...

javascriptjqueryhtmlcssnavbar

Tips on displaying a confirmation message upon a user clicking a checkbox

I am encountering an issue with displaying a confirmation message when a checkbox is clicked. The confirmation box pops up but does not carry out any action, like showing the text within the textbox after the user clicks OK. Any guidance on this matter wou ...

javascriptc#asp.netcheckbox

When PHP is connected to the database, Ajax remains inactive and does not perform any tasks

I am currently working on setting up a simple connection between JavaScript and my database using ajax and PHP. The goal is for JavaScript to receive a name from an HTML form, make changes to it, send it to PHP to check if the name already exists in the da ...

javascriptphphtmljqueryajax

Tips for transforming list items into an array of strings

let typeList="[Product,Task,Invoice,Media,Store]"; I need to transform the string above into an array like this:- let typeList=["Product","Task","Invoice","Media","Store"]; Any help with this is greatly appreciated. ...

javascript

Vue.js: The href attribute in a link is different from the data

Having <a> href tag below, clicking will redirect to www.duckduckgo.com, with the value of page.publicWebsite being displayed as well. {{page.publicWebsite}} shows www.duckduckgo.com. Is everything functioning correctly? https://i.stack.imgur.com/ ...

javascriptvue.jshref

Removing an object from an array if it does not exist in another array: A step-by-step

Looking to remove an object from an array if it's not present in another array. After doing some research, I came across a similar question on this link, but with a different array source. Below is the example from the link: var check = [1, 2, 3]; ...

javascriptarrays

The shade of grey on the curve appears instead of the usual red on the iPad. Any ideas on how to fix

I am having trouble creating a curve like the one shown below on my iPad. The color appears to be gray and does not work properly. Is this a bug with ChartJS or is there a solution to fix this issue? This problem occurs when the type value is set to "lin ...

javascriptcssipadchart.jsvisualization

Yii employs the use of quickdlgs to efficiently generate fresh entries within the CGrid view

Within my web application, I am attempting to implement an iframe button using quickdlgs to create new records. However, upon clicking the iframe button, instead of being directed to the 'create' webpage, I am presented with an empty iframe. Here ...

javascriptphpjqueryyiiyii-extensions

Alter the colors of all Divs inside a container with each click

Hey everyone, I'm just starting to learn JavaScript. I'm working on a project where I want to change the color of all the divs in a container every time they are clicked. For example, on the first click, I want all the divs to turn red. Then, on ...

javascriptjqueryhtmlcssbootstrap-4

Switch between using a dropdownlist and textbox depending on the selection in another dropdownlist

In the process of developing an application, I have implemented a country dropdown list and a state dropdown list. Here's the scenario: when a user selects a country, the states for that country will populate in the state dropdown list. However, the ...

phpjavascriptjquery

What is the meaning of this CSS acronym?

div[id^=picture]:target{ /*applying various styles here*/ } I stumbled upon the snippet of code shown above on a website discussing CSS image galleries. Can anyone clarify what this code accomplishes? Appreciate it. ...

javascripthtmlcss

Discover the position of the element that was clicked within the group of elements sharing the

Here is my HTML code: <input type="button" class="buttonclose marleft fleft clrPric" value="X"> <input type="button" class="buttonclose marleft fleft clrPric" value="X"> <input type="button" class="buttonclose marleft fleft clrPric" value= ...

javascriptjquery