I've been utilizing a datepipe to convert a Date object into a string format.
const mydate : Date = new Date();
This conversion works flawlessly in the template section.
{{ mydate | date: "dd.MM.yyyy" }}
It also successfully converts Date objects to strings within the corresponding class.
let str : string = this.dp.transform(dtm, "dd.MM.yyyy");
However, I'm wondering if there is a way to perform the reverse operation. Can the pipe parse a string input and return a Date object?
Absolutely! You have the ability to develop your own custom Pipe by implementing the PipeTransform interface.
For more details, please refer to:
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({ name: 'stringToDate' })
export class StringToDate implements PipeTransform {
transform(stringDate: string) {
// Perform the necessary conversion, formatting, substring operations here
let newDate = new Date(stringDate);
return newDate;
}
}
Make sure to import this custom Pipe into your ngModule and utilize it within your Template as needed.
It is not possible to format and parse natively. I used JavaScript RegExp to parse the date manually instead. Another option could be moments.js, although I opted not to use it.
<input type="text" placeholder="DD.MM.YYYY" [value]="mydate | date: 'dd.MM.yyyy'" (change)="setDate ($event)"/>
setDate (e)
{
let val : string = e.target.value;
let rgx : RegExp = new RegExp ("^([0-9]{2})\.([0-9]{2})\.([0-9]{4})$"); // DD.MM.YYYY
let match : Array <string> = rgx.exec (val);
if (match != null)
{
this.selday = new Date (Number (match [3]), Number (match [2]) - 1, Number (match [1]));
this.requestData ();
}
}
When using the
Date.parse()method, a string representation of a date is parsed and it returns the number of milliseconds since January 1, 1970, 00:00:00 UTC. If the string is not recognized or contains illegal date values (like 2015-02-31), it will return NaN.
var unixTimeZero = Date.parse('01 Jan 1970 00:00:00 GMT');
var javaScriptRelease = Date.parse('04 Dec 1995 00:12:00 GMT');
console.log(unixTimeZero);
// expected output: 0
console.log(javaScriptRelease);
// expected output: 818035920000
For more information on Date.parse, refer to the documentation here.
In my opinion, the library moment proved to be the most effective and reliable solution for this task. Simply install the necessary dependency and utilize it directly within your code.
npm install moment
Integrate it into your code like so:
import * as moment from 'moment';
...
public parse(stringDate: string, stringFormat: string, lang: string): Date {
try {
const dateMoment = moment(stringDate, stringFormat.toUpperCase(), lang, true);
if (dateMoment && dateMoment.isValid()) {
return dateMoment.toDate();
}
return null;
} catch (e) {
console.error('Error while parsing date', stringDate, e);
return null;
}
}
Then, you can easily use it by calling:
this.parse('2020-08-09', 'yyyy-MM-dd', 'en');
Having trouble loading data from MongoDB using Angular 8? I've successfully loaded data with https://jsonplaceholder.typicode.com/, but when trying locally at 'http://localhost:3000/employees', it doesn't work. I can post data but una ...
I've made updates to my firestore rules, and while the simulator is working correctly, I'm encountering an insufficient permissions error when creating a new document. Below are the firebase rules in question: match /users/{usersid} { a ...
I am currently working with angular 5 and I am looking for a way to dynamically duplicate DOM templates using a custom pipe: <div id="template" style="display:none;"> <a routerlink="{{parameter.route}}">here</a> </div> <nav& ...
The recent Node 16 release introduces a new timers/promises API that has caught my interest. I successfully installed Node 16 using NVM and switched to it: $ nvm use Found '/Users/golergka/Projects/my-project/.nvmrc' with version <16> ...
I've attempted various methods to modify this problem, regardless of how it's explained on different Stack Overflow threads. I am faced with an obstacle where I have an array composed of objects, and my goal is to iterate through the array and mo ...
I'm having trouble with exporting in the prisma TypeScript file while executing it within a Node.js GraphQL project. Here is the error I am encountering: 05-12-2018 18:20:16: SyntaxError: /home/user/Publish/PracticeBusiness/src/generated/prisma.ts: ...
Hello, I am currently attempting to customize the appearance of the p-calendar, but I am struggling with changing the color of the displayed dates. Can anyone provide assistance? Thank you in advance. Below is my template: <div class="p-field p-co ...
Currently, I am in the process of developing a basic CRUD application with Angular2. The application comprises of a table that displays existing records and a form for adding new records. I am seeking guidance on how to update the table to show the new rec ...
Within my Angular project, I have established a configuration that utilizes multiple services. One of these services contains certain functions that I wish to restrict access to, ensuring they can only be utilized by a specific other service. To accomplis ...
I'm having trouble adding FontAwesome 5 to my Angular 2+ application. I came across this package - https://www.npmjs.com/package/@fortawesome/fontawesome Can you guide me on how and where to import this package? Should I do it in the app.module.ts fil ...
I have a quick and simple question. I am using a service called DataStorageServiceService where I have initialized shopCartProduct = new Subject<ProductModel[]>();. Now, I have a component named SingleProductComponent and I want to send data into t ...
Help required with verifying a JWT token in Nextjs as I'm encountering the following error: TypeError: Right-hand side of 'instanceof' is not an object See below for the code I am currently using: useEffect(() => { let token = localS ...
My Angular web application utilizes Protractor for end-to-end tests. Recently, I implemented OAuth0 authentication into my app. To disable Angular synchronization before redirecting to the non-Angular OAuth0 page, I use await browser.waitForAngularEnabled( ...
When a button is clicked, three functions are called in sequence within a promise. The first function is responsible for blocking a model window and returning a promise which then resolves the next function. The HTML code snippet is as follows: ...
Is there a way to integrate the Neo4j application output into my Angular Front-end application? I am open to using Nodejs for backend if necessary. Could you kindly provide guidance on how to specifically include just the middle section of a graph diagram ...
Looking for a way to render an HTML element dynamically based on a prop in a React component? interface ButtonProps { children: ReactNode; className?: string; as?: string; <--- ? [key: string]: unknown; } const Button = forwardRef({ children, ...
Currently, I am trying to figure out how to declare and populate a TypeScript list of lists. The structure of the list should be as follows: List<CustomList<>, number> Typically, I would create a standard list like this: someList: { text: a ...
Since I'm looking to minimize the information provided by navigator.userAgent, I decided to migrate to User-Agent Client Hints. However, I've encountered an error while attempting to do so: https://i.stack.imgur.com/lgIl7.png Could someone plea ...
I am attempting to update the input value, but I keep receiving this error message: TypeError: "setting getter-only property "value" I have created a function in Angular to try and modify the value: modifyValue(searchCenter, centerId){ searchCenter.va ...
When attempting to infer the type of Data based on input parameters, it correctly infers when the data is an object type; however, it defaults to 'unknown' when the data is a function type. https://i.sstatic.net/wkuQa.png declare function getType ...