AngularJS's date filter does not correctly display the time in a 12-hour format

Attempting to show the date and time using a 12-hour format of 'dd-MMM-yyyy HH:mm a'
The desired outcome should be similar to: 27-DEC-2016 12:30 AM
The current result shows: Dec 27, 2016 The previous result without any formatting appears as: 2016-12-22T13:22:00Z

HTML Snippet:

{{pickuptime | date:defaultDateTimeFormat}}

Controller Code:

$scope.defaultDateTimeFormat = "dd-MMM-yyyy HH:mm a";

Answer №1

var app = angular.module("app", []);
app.controller("myCtrl", function($scope) {
  $scope.date = new Date();
  $scope.defaultDateTimeFormat = "dd-MMM-yy h:mm a";
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="myCtrl">
  {{date | date:defaultDateTimeFormat}}
</div>

With your input

It displays the time in a 12-hour format with the year included

var app = angular.module("app", []);
app.controller("myCtrl", function($scope) {
  $scope.date = new Date();
  $scope.defaultDateTimeFormat = "dd-MMM-yyyy HH:mm a";
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="myCtrl">
  {{date | date:defaultDateTimeFormat}}
</div>

For more information, visit this link

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

Nested loops combined with a timeout occasionally results in failure

I encountered a problem with the loops and timeouts in my script that I created for practice. If you want to take a look at the script, you can find it here: http://codepen.io/JulienBarreira/pen/EWNoxJ When running the script, I noticed that sometimes one ...

Robotic Arm in Motion

GOAL: The aim of the code below is to create a robotic arm that consists of three layers (upper, lower, and middle), all connected to the base. There are four sliders provided to independently move each part except for the base which moves the entire arm. ...

Retrieve data from a Vuetify data table when the user clicks on the arrow

Currently, I am utilizing a v-data-table with expandable rows. My goal is to retrieve the value of a row when the expand arrow is clicked. While I am aware that I can use @click:row to get the value when the row is clicked, I am specifically looking to obt ...

On a button click, the div's height will increase and then decrease when the same button is clicked again

I need help with a div that has its height set to 0px initially, and I want it to increase to 300px when a button is clicked. When the button is clicked again, I want the height to go back to 0px. Here's the CSS code: nav{ height:0px; overfl ...

Determine whether an image is retina or non-retina using just one picture

Is it possible to use just one picture that is already optimized for retina displays, but automatically resize or crop down to a non-retina version when viewed on a non-retina screen? I'm facing this issue specifically with IE while using a PC. The im ...

Is there a more efficient method for writing my jQuery code that follows a step-by-step approach?

I have developed a step-by-step setup process that guides users through various sections. Instead of using separate pages for each step (like step1.php, step2.php, etc.), I have all the code contained in one page named setup.php. This is achieved by utiliz ...

Struggling to organize and paginate numbers in angularjs and facing filtering and sorting issues

I'm running into some issues with getting the paging feature to work properly while applying filters. Currently, when the filters are active, the paging numbers do not display correctly and only filter the first page of results. What I'm aiming ...

Angular JavaScript Object Notation structure

I am a beginner in AngularJS and I'm attempting to create formatted JSON based on the values of table rows (tr) and cells (td). The table rows are generated automatically. When the form is submitted, I try to create the JSON values. Once the form is ...

beforeprinting() and afterprinting() function counterparts for non-IE browsers

Is there a way to send information back to my database when a user prints a specific webpage, without relying on browser-specific functions like onbeforeprint() and onafterprint()? I'm open to using any combination of technologies (PHP, MySQL, JavaScr ...

Checking the URL in Redux Form

I am currently using the redux-form library to manage my form in React Redux. I have successfully implemented validation for fields like email and name. However, I am facing an issue with validating a URL field in redux-form. What specific format should I ...

Scroll horizontally through the thumbnails with the IONIC app's slider feature

Whenever I access the list of orders and click on the right chevron detail option, I am redirected to the order detail page. On this page, there is a list of items ordered by a single person, each with a camera option to capture a picture. If there are tw ...

React js experiences a crash when it attempts to re-render with a different number of child elements

When working with react.js, I came across the need for a component that renders a 'tr' with either one or two 'td' elements, depending on its property. Here is an example: var Item = React.createClass({ content: function() { ...

Why does the Vue router sometimes refresh the page instead of properly navigating to it? Can you spot the difference between these two code examples?

I am encountering an issue while trying to click on a "checkout" button that is supposed to send cart data to a backend and redirect me to a URL generated by the backend. Despite receiving a valid URL, my code is not functioning correctly. When I attempt ...

Center rotation with THREE.TrackballControls

I'm facing an issue with rotating an object on the scene using THREE.TrackballControls. The rotation is not relative to the object's axis when it's not in the center of the screen - instead, it rotates based on the center of the screen. I at ...

Enhancing angular service with additional parameters

UPDATE: angular.extend and Object.assign both work fine, but which one is the better choice? I am facing an issue where adding more values to an angularjs service variable overwrites the previous value. Here is a sample code snippet: var testModule = ang ...

Converting a data-attribute list into an array

My current setup includes an image with the following properties: <img id="img" data-list="['image2.jpg', 'image3.jpg', 'image4.jpg']" src="image1.jpg"> I am wondering how I can extract the list of images from the data ...

Building a structured object from the HTML document outline

I have a vision to develop a jQuery plugin that traverses the top layer of the DOM, collecting elements into an object until it reaches a heading. Once a heading is encountered, the plugin creates a new object with the text of that heading. The subsequent ...

Compilation error in Angular 7 development process

Using Angular 7, npm 5.5.1 and node 8.9.0 In the terminal... npm run build:test <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5435252503736d736d73">[email protected]</a> build:test C:\Projects\fff ng ...

If you invoke revokeObjectURL, Chrome will fail to display Blob images

-----update------ After some investigation, I found that commenting out window.URL.revokeObjectURL( imgSrc ); fixed the issue in all browsers. It seems like Chrome was revoking the URL too early. I am curious to understand why this behavior occurs, and if ...

Iterating recursively through a tree structure to update properties using Mongoose

I have a unique structure resembling a tree that I've set up to store comments. Each "comment" acts as a node with a "parent" property linking it to another "comment" node. Additionally, I've included a "replyCount" field on each node to keep tra ...