What is the local date format for the Ionic DatePicker?

I have successfully implemented a DatePicker in my Ionic Project, but the date is displaying in the wrong time format. Here is my function:

showDatePicker(){
  this.datePicker.show({
    date: new Date(),
    mode: 'date',
    allowOldDates: false,
    androidTheme: this.datePicker.ANDROID_THEMES.THEME_HOLO_DARK
  }).then(
    date => this.selectedDate = date
  );
  this.changeAPI();
}

The output string currently looks like this:

Tue Jan 15 2019 00:00:00 GMT+0100 Central European Standard Time

However, I would like it to be displayed as follows:

15.01.2019

How can I achieve this formatting? I have tried using the following code:

this.selectedDate.toLocaleDateString('de-DE');

But unfortunately, it does not seem to work (I am implementing this in the TypeScript file rather than the HTML file).

Additionally, how can I hide dates in the DatePicker that occur before today?

Thank you for any assistance.

javascriptangulartypescriptionic-framework

Answer №1

If you need to format the date in a template, make sure to utilize the date pipe

{{selectedDate | date: 'dd.mm.yyyy'}}

However, if you are working within a component, it's best to use the DatePipe from Angular's common module 

import { DatePipe } from '@angular/common';

constructor(private datePipe: DatePipe) {}

let formattedDate = this.datePipe.transform(this.selectedDate, 'dd.mm.yyyy');

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

An error occurred while trying to access the stored data at https://localhost:5000. The SSL protocol encountered

I am attempting to utilize an API to retrieve data and transfer it to MongoDB from my React application to the Node.js server, but I keep encountering an error message along with another issue in the console. https://i.stack.imgur.com/Bj4M6.png Despite e ...

javascriptnode.jsreactjsmongodbexpress

Enhance the editing capabilities of the Json data form

https://i.stack.imgur.com/YZIjb.png My goal is to enhance a form for editing json data by moving beyond the typical <textarea /> tag and making it more user-friendly. Are there any tools available that can help improve the form's usability? Add ...

javascriptreactjsjsonnext.js

Differences between Typescript compilation: Using dot notation vs square brackets when accessing non-existent properties

Imagine having the given class and code snippet: class myClass{ x: number; } const obj = new myClass(); obj.y = 7; // produces a compile error. Property 'y' does not exist on type myClass. obj['y'] = 7; // compiles without any issu ...

typescripttsc

Engaging with the crossrider sidepanel extension

When it comes to the crossrider sidepanel, I prefer using an iframe over js-injected html to avoid interference with the rest of the page. However, I am struggling to establish any interaction between my browser extension and the iframe. I believe adding ...

javascriptiframecrossrider

Error Message: The function "menu" is not a valid function

I've encountered an issue with a function not being called properly. The error message states "TypeError: menu is not a function." I attempted to troubleshoot by moving the function before the HTML that calls it, but unfortunately, this did not resolv ...

javascripthtmlcssdropdown

JSLint error: Inconsistent use of spaces and tabs detected

I recently ran the code below through JSLint: $(document).ready(function() { /* Insert paragraph upon page load */ // Retrieve all header elements var header = document.getElementsByTagName('h1'), parent, ...

javascriptjqueryjslint

What is the concept of nested includes in sequelize?

Is it possible to perform a nested include in Sequelize? I have a table called products that has a one-to-many relationship with comments, and the comments table has a many-to-one relationship with the users table. Each comment has a user_id and product_id ...

javascriptmysqlsequelize.jsjoin

NuxtJS Static generated HTML page fails to load JavaScript while accessing /index.html

I'm currently working on a project using Nuxt.js to generate static content, which involves utilizing JavaScript for tasks such as navigation and form functionality. Everything works smoothly when running the page with npm run dev. However, after ex ...

javascriptvue.jsnuxt.jsserver-side-rendering

Loop through a JSON object to dynamically update the value of a specific key

I have a JSON object with keys and values, where some of the values are empty strings. I want to replace those empty values with the corresponding key name. However, when trying to get the value of a key within the loop, it returns undefined. JSON: "Forg ...

javascriptjsonloopsfor-loop

The interface 'IProduct' does not include several properties found in type 'IProduct[]', such as length, pop, push, concat, and many more

My goal is to transfer data between parent and child components using React and TypeScript. I have defined the following interfaces: export interface IProduct { id: string; name: string; price: string; image: string; ...

javascriptreactjstypescriptreact-hooksuse-reducer

What causes bootstrap to fail on smaller screens?

While developing an app using Bootstrap, I encountered an issue where the app was not functioning properly on small screens. Everything worked perfectly on larger screens, such as a PC browser, but on a mobile browser, none of the tabs would open. When I t ...

javascriptjquerycsstwitter-bootstrap

When using Express.js for file uploading, it is important to first verify that a file has been sent, set a maximum file size limit, and ensure

After working with expressjs for a month, I've encountered some issues with file uploads. Despite researching on Google and various blogs, I haven't been able to find answers to the following three questions: What do I need to do or what setting ...

javascriptnode.jsfile-uploadexpress

Utilizing React and MaterialUI to create a dynamic GridLayout with paper elements

I am using the react-grid-layout library to create a dynamic grid where each item is a paper component from the React Material UI. However, I encountered an issue while running the application. The browser displayed the error message: "TypeError: react__W ...

javascriptreactjswebmaterial-ui

Ways to display additional text with a "Read More" link after three lines of content without relying on a

I am currently working on an application where I need to display text in a limited space of 3 lines. If the text exceeds this limit, I want to show either "Read More" or "Hide". Below is the code snippet that I am using for this functionality. class Cust ...

javascriptreactjsreact-native

Unable to detect the click event on Bootstrap accordion

I am currently utilizing Bootstrap to populate a table with data and then attempting to capture an accordion show event. My intention is to extract the div id in order to make an ajax call for more information on the respective item. Unfortunately, I have ...

javascriptjqueryajaxtwitter-bootstrap-3

What is the process for obtaining a flattened tuple type from a tuple comprised of nested tuples?

Suppose I have a tuple comprised of additional tuples: type Data = [[3,5,7], [4,9], [0,1,10,9]]; I am looking to develop a utility type called Merge<T> in such a way that Merge<Data> outputs: type MergedData = Merge<Data>; // type Merged ...

typescripttuplesrecursive-type

Combining two JSON objects using Angular's ng-repeat

My goal is to extract data from two JSON files and present it in a table: The first file 'names.json' contains: [ { "name": "AAAAAA", "down": "False" }, { "name": "BBBBBB", ...

javascriptangularjsjsonangularjs-ng-repeat

Is AGM-Map capable of providing all the same features as the Google Maps API?

Greetings to everyone! I am currently working on an Angular 6 project and I want to incorporate asset tracking using the Google Maps API. However, I am unsure if AGM-Map fully supports all the features of Google Maps API, like heatmaps and advanced asset ...

javascriptangulargoogle-maps

When using Typescript, the keyof operator for objects may not undergo refinement and can result in error

I've been working on creating a function that validates whether a key in an object is a non-empty string. export const validateRequiredString = <T>( obj: T, key: keyof T & (string | number) ): void => { if (typeof obj[key] !== " ...

typescripttypescript-generics

Encountering an issue with the default task in gulp, an error is displayed in Gitbash stating: "Task must have a name that is a string

Upon running the command 'gulp' in gitbash, an error is being displayed for the last line of the code, stating: throw new Error('Task requires a name that is a string'); Error: Task requires a name that is a string "use strict"; var g ...

javascriptnpmgulpgit-bash