Utilize Moment.js in AngularJS for formatting dates

I have been attempting to use moment.js in Angularjs to format a date, but it seems like I am running into some issues. Here is the link to my code snippet on jsfiddle http://jsfiddle.net/sed6x5e8/ and below you can find the HTML and JS code that I am working with.

HTML:

<div ng-app="miniapp">
    <div ng-controller="Ctrl">
        <div>
            Actual Date: {{date}}
            <br><br>
            Formatted Date: {{formattedDate}}
        </div>

    </div>    
</div>

JS:

var $scope;
var app = angular.module('miniapp', [])
function Ctrl($scope) {
    $scope.date = '2/13/2015';
    $scope.formattedDate = moment($scope.date).format('YYYY-MM-DD');
}
javascriptangularjs

Answer №2

I have personally utilized angular-moment with great success in one of my projects. This library includes a filter that enables you to easily format dates. An example from the documentation is as follows:

<span>{{event.date | amDateFormat:'dddd, MMMM Do YYYY, h:mm:ss a'}}</span>

Answer №3

sample example

let application = angular.module("application", []);

application.constant("time", time);

application.controller("controller", function($scope, time) {
    $scope.date = new moment().format("D/MMM/YYYY");
    var dat2 = new moment();
    $scope.date4 = dat2.add('7', 'd').format('MMMM Do YYYY, h:mm:ss a');
});

CSS 

let application = angular.module("application", []);

application.constant("time", time);

application.controller("controller", function($scope, time) {
    $scope.date = new moment().format("D/MMM/YYYY");
    var dat2 = new moment();
    $scope.date4 = dat2.add('7', 'd').format('MMMM Do YYYY, h:mm:ss a');
});
<script src="https://timejs.com/downloads/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="application" ng-controller="controller">
    {{ date }} 
  </br>
  </br>
  {{date4}}
</div>

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

Importing cookies directly into server actions in Next JS 13 is not possible for me

Currently, I am tackling a project using Next JS 13 and came across an issue pertaining to server actions. While server actions can be directly applied on form or button components, my personal preference is to define server components in separate files an ...

javascriptreactjsnext.jsnext.js13

Utilizing hyperlinks to dynamically remove elements from a webpage with the power of HTML5 and JavaScript

Looking for guidance on how to create a link that will remove two specific list items from an unordered list located above the link. As a beginner, any assistance is greatly appreciated! ...

javascriptonclickremoveclass

Ways to verify the identity of a user using an external authentication service

One of my microservices deals with user login and registration. Upon making a request to localhost:8080 with the body { "username": "test", "password":"test"}, I receive an authentication token like this: { "tok ...

javascripttypescriptnestjs

Animate a div once the parent section becomes visible while scrolling

I previously had this function working, but it seems that I have somehow messed it up in the process. My current setup includes a scroll hijack feature that navigates users to a new section or card each time they scroll. The script adds a visible class w ...

javascriptjqueryhtmlcssscrollview

Should arrays of objects be kept in databases or JavaScript files?

Here is a small excerpt from an array of objects utilized on my website. It's just a snippet and not the full JS file. I have several JS files like this, some reaching up to 500 lines of code. Currently delving into databases ...

javascriptdatabasemongodbstorageuser-data

file uploaded with missing extension

Currently, my code looks like this: var multipart = require('connect-multiparty'); var multipartMiddleware = multipart(); router.post('/registo',upload.single('file'), function (req, res) { However, the file extension for t ...

angularjsnode.jsexpressmulter

Concealing the print option while utilizing PDFObject in conjunction with PDF.js

When displaying a file using pdf.js, I encountered issues with the print button and other functionalities. I was able to hide the buttons using CSS for Chrome, but not for Internet Explorer, where I had to resort to using JavaScript. While the JavaScript ...

javascriptjquerycsspdf.jspdfobject

PHP seems to be resistant to receiving data from ajax requests

I am attempting to develop a drag and drop file upload feature without using a traditional form, utilizing JavaScript's FormData. However, I am encountering an issue where PHP does not seem to be receiving the uploaded file. Could there be some missin ...

javascriptphpjqueryajax

Performing additions on two-dimensional arrays using Angular/JavaScript

Currently, I am in the process of learning basic JavaScript and could use some assistance. My task involves working with two-dimensional arrays where the 0th index will always represent a date and the 1st index will always be an integer in the array. My go ...

javascriptangularjs

Obtain an array as the response from an Ajax call

When passing data using Ajax request, I utilize the code below: var query = { "username" : $('#username').val(), "email" : $('#email').val(), } $.ajax({ type : "POST", url : "system/process_registration.php", ...

javascriptphpjquerymysqlajax

"Embracing AngularJs with the power of SocketIo

Can someone please help me with the code snippet provided below? This code is sourced from: http://www.html5rocks.com/en/tutorials/frameworks/angular-websockets app.factory('socket', function ($rootScope) { var socket = io.connect(); return { ...

javascriptangularjssocket.io

Develop a custom autocomplete feature using Formik in React for selecting values from an array of objects

Looking to Add Autocomplete Functionality in Your React Application Using Formik for Seamless Selection of Single and Multiple Values from an Array of Objects? Take a Look at this Code snippet! [see image below] (https://i.stack.imgur.com/ekkAi.png) arra ...

javascriptreactjsmaterial-uiautocompleteformik

Updating corresponding key values in two JavaScript objectsORModify matched key values

I am in need to compare two objects and update the values of the first object with the updated values from the second object. For example: $scope.obj1={"id" : 1, "name" : "java"} $scope.obj2={"id" : 1, "name" : "java4you", "gender" : "male"} compare(des ...

javascriptangularjs

How can I adjust the height of an iframe dynamically using AngularJS?

I wrote a function that resizes the height of an iframe element to always be 100% after it loads: app.directive('iframeAutoSize', [function() { return { restrict: 'A', link: function(scope, element, attrs) { ...

javascriptcssangularjsiframe

What is the most effective method for transferring resolved promise values to a subsequent "then" chain?

Currently, I am grappling with understanding promises by utilizing the Q module in node.js. However, I have encountered a minor setback. Consider this scenario: ModelA.create(/* params */) .then(function(modelA){ return ModelB.create(/* params */); } ...

javascriptnode.jspromise

When a specific state is clicked on the d3 datamaps US state map, only that state is

I am currently working on a project that involves displaying the US map using d3.js with the datamaps library. My goal is to show a state only when it is clicked. Does anyone have any suggestions on how I can achieve this using either d3 or the datamaps l ...

angularjsd3.jsdatamaps

Tips for editing bootstrap-vue table columns using non-Latin characters?

I need to create a table using the Cyrillic alphabet, but the keys of the object must be in the Latin alphabet within the program. Example : export default { data() { return { wmsFields: ['№', 'Наименование', ...

javascriptvue.jsbootstrap-vue

Trouble accessing state when React child calls parent method

Within my project, I am working with 3 components that are nested as follows: App->GameList->GameItem The App (parent) component has a method that is triggered by the onClick event within the GameItem (child) component Upon clicking the GameItem co ...

javascriptreactjs

Servlet does not parse $http GET parameters

I'm encountering an issue where my Angular $http call is sending the userId, but the servlet is not able to receive the request parameter. I am trying to fetch the parameter using request.getParameter("userId"); Below is the code snippet for referenc ...

javaangularjsservlets

At what point is ng-if triggered?

I am currently in the process of developing functionality for buttons that open directives in modal windows. To keep things simple, I decided to use a modal container flagged with the versus directive: <div ng-if="vm.Modal.Modal1"> <directive-for ...

javascriptjqueryangularjs