How to showcase the date in a unique format using Angular

Does anyone know of a JavaScript ES7 method that can convert the output of new Date() into the format shown below? If there isn't a built-in method, I am willing to manually parse or find/replace it myself.

2020-06-30 07.49.28

I would like the date with hyphens and the time with periods.

Currently working with TypeScript in Angular 8, but regular JavaScript syntax will also suffice.

If there is an Angular Method, Moment.js, Lodash, or any other library method that can achieve this, please let me know.

If none are available, I'm open to using the simplest find/replace or regex method to format the date and time.

javascriptangulartypescriptmomentjsangular8

Answer №1

To incorporate date formatting in HTML, consider utilizing the datepipe method.

<h1>{{date |date:'yyyy-MM-dd hh.mm ss'  }}</h1>

In Typescript:

let newDateFormat = (new DatePipe('en-US').transform(new Date(), 'MM-dd-yyyy hh.mm.ss'));

If you need to format dates for purposes like naming files, try using ngx-moment for a simpler approach. You can format your date as follows:

moment().format('YYYY-MM-DD HH.mm.ss');

Answer №3

Check out this code snippet, there might be room for improvement

var today = new Date();
var dateFormatted = [
  today.getFullYear(),
  ('0' + (today.getMonth() + 1)).slice(-2),
  ('0' + today.getDate()).slice(-2)
].join('-');
console.log("Formatted Date: ", dateFormatted);

var timeFormatted = [
  ('0' + today.getHours()).slice(-2),
  ('0' + today.getMinutes()).slice(-2),
  ('0' + today.getSeconds()).slice(-2)
].join(':');
console.log("Formatted Time: ", timeFormatted);
console.log("Result: ", dateFormatted + " " + timeFormatted);

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

Tips for arranging columns and rows in a mat-dialog box

In my Angular project, I am working on a mat dialog box and trying to achieve a layout with 1 row at the top and 3 rows at the bottom, similar to the image below. However, I am facing issues in making it work properly. Additionally, I want to hide the hori ...

cssangularlayoutangular-material

What is the best way to incorporate a background image using ngStyle?

I need help populating multiple cards in the following way: <mdl-card *ngFor="let product of templates" class="demo-card-event" mdl-shadow="2" [ngStyle]="{ 'background-color': 'lightgray' }"> <mdl-card-title mdl-card-expan ...

angulartypescript

Is it possible to insert a second hyperlink into a JavaScript-occupied anchor?

Check out my reference page at: To change the content in a 'containerarea' div, I am utilizing Dynamic Drive's "Dynamic Ajax" script. Below is an example of the anchor code used: <a href="javascript:ajaxpage('videos-maintenance/app ...

javascriptajaxanchor

Checking for a particular element's existence in an array using jQuery

Is there a way to verify the presence of the var element in the array sites? var sites = array['test','about','try']; var element = 'other'; ...

javascriptjquery

Creating endless scroll feature in Vuetify's Autocomplete component - A comprehensive guide

Having trouble with my Vuetify Autocomplete component and REST API backend. The '/vendors' method requires parameters like limit, page, and name to return JSON with id and name. I managed to implement lazy loading on user input, but now I want i ...

javascriptvue.jsvuetify.js

Issues with zoom functionality not functioning properly within IE11

I am currently developing an application with Angular that is designed to be compatible with tablets and touch-enabled devices. One of the key features I want to implement is the ability for users to zoom/scale up the app, especially for those with visual ...

javascripthtmlcssinternet-explorerinternet-explorer-11

Troubleshooting problem with JSON decoding in PHP and json_encode

Encountering an issue when parsing JSON received from a PHP backend. In my PHP code, I have an array that I send using json_encode: $result[] = (object) array('src' => "{$mergedFile}", 'thumb_src' => "{$thumb_file}"); echo json_e ...

javascriptphpjson

The anchor link is not aligning properly due to the fluctuating page width

Seeking help to resolve an issue I'm facing. Maybe someone out there has a solution? The layout consists of a content area on the left (default width=70%) and a menu area on the right (default width=30%). When scrolling down, the content area expand ...

javascripthtmlcssscrollanchor

The function cannot be applied to d[h] due to a TypeError

Having some trouble with my code here. I'm trying to set up routes to display a gif using CSS animation when the page is loading. The gif shows up initially, but then everything fades out and the gif remains on the page. Additionally, I'm getting ...

javascriptcssangularjs

Ensure the inferred type is asserted in TypeScript

Is there a more elegant approach to assert the type TypeScript inferred for a specific variable? Currently, I am using the following method: function assertType<T>(value: T) { /* no op */ } assertType<SomeType>(someValue); This technique prov ...

typescripterror-handlingtype-inferencenarrowing

utilizing AJAX to retrieve scripts from WITHIN my own domain

In the realm of ajax scripts, I encounter a scenario where referencing something within the same domain requires passing HTML and associated javascript. Due to it being a non X-domain setup, I anticipate that this could be achievable. The aim here is to fe ...

javascriptjqueryajaxjson

What is the method for opening the command prompt while initializing a node.js server?

I've successfully set up a node.js server and now I'm looking to send a command to the prompt upon startup. This is something I couldn't manage while the server was already running. Should I be implementing this from within the server.js fi ...

javascriptpythonnode.js

Overlaying a div on top of an iframe

Struggling to make this work for a while now. It seems like a small issue related to CSS. The image isn't overlaying the IFrame at the top of the page as expected, it's going straight to the bottom. Here is the code snippet: .overlay{ width: ...

javascriptjqueryhtmlcssiframe

Creating a custom URL in a React TypeScript project using Class components

I have been researching stack overflow topics, but they all seem to use function components. I am curious about how to create a custom URL in TypeScript with Class Components, for example http://localhost:3000/user/:userUid. I attempted the following: The ...

reactjstypescriptreact-routerreact-typescript

Creating a visual representation from an array of strings to produce a

My goal is to organize a list of server names into a map using a specific logic. For instance, with names like: "temp-a-name1", "temp-a-name2", "temp-b-name1", "temp-b-name2" They would be mapped as: { a: [ "temp-a-name1", "temp-a-name2" ] ...

javascriptstring

Tips for avoiding a form reload on onSubmit during unit testing with jasmine

I'm currently working on a unit test to ensure that a user can't submit a form until all fields have been filled out. The test itself is functioning correctly and passes, but the problem arises when the default behavior of form submission causes ...

javascriptangulartypescriptunit-testingjasmine

struggle to locate / Node.js Error

I followed the tutorial located at and implemented the following code. // Module dependencies. var application_root = __dirname, express = require( 'express' ), //Web framework path = require( 'path' ), //Utilities for dealing with fi ...

javascriptnode.jsexpressroutes

A single image path utilized for both development and production stages during the Angular build process

I am struggling to determine the correct path for my images to work seamlessly on both development and production environments. Currently, I can only get them to display properly on my local development server. However, when I use the command ng build --pr ...

angular

Develop a custom JavaScript code block in Selenium WebDriver using Java

Recently, I came across a JavaScript code snippet that I executed in the Chrome console to calculate the sum of values in a specific column of a web table: var iRow = document.getElementById("DataTable").rows.length var sum = 0 var column = 5 for (i=1; i& ...

javascriptjavaselenium-webdriver

Ways to automatically refresh a page in Javascript after a short period of user inactivity

Similar Question: How Can I Modify This Code To Redirect Only When There Is No Mouse Movement I am looking to update a web page automatically if the user is inactive, specifically through key presses or mouse clicks using Javascript. ...

javascriptjqueryhtml