Angular Material 2 with Customized Moment.js Formatting

Is there a way to display the year, month, day, hours, minutes, and seconds in the input field of my material datepicker?
I have successfully customized the parse() and format() methods in my own DateAdapter using native JavaScript objects.

However, I am now considering using Moment.js. I have configured the MomentDateAdapter and MAT_MOMENT_DATE_FORMATS following the official tutorial.

How can I adjust the formatting of my dates using Moment.js? Do I need to override the format() and parse() methods again by extending the MomentDateAdapter?

javascriptangulartypescriptmomentjsangular-material2

Answer №1

When utilizing the MomentDateAdapter module, you have the option to customize the formats in the following manner:

import {
  MAT_DATE_FORMATS,
  DateAdapter,
  MAT_DATE_LOCALE
} from '@angular/material';

// Refer to the Moment.js documentation for details on these formats:
// https://momentjs.com/docs/#/displaying/format/
export const CUSTOM_FORMATS = {
  parse: {
    dateInput: 'L'
  },
  display: {
    dateInput: 'L',
    monthYearLabel: 'MMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY'
  }
};

//...
providers: [
    { provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE] },
    { provide: MAT_DATE_FORMATS, useValue: CUSTOM_FORMATS }
]

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

Having trouble with Ajax and facebox integration issues?

My website utilizes ajax jquery and facebox for interactive features. You can check out a demo here. The div with the ID "#content" contains links to other pages that open successfully using facebox. However, when I reload the content of this div using aj ...

javascriptjqueryajaxlightboxfacebox

Modify the fixed div's class when the user scrolls past a certain section

My page includes a fixed menu with various sections, each assigned a specific class name using data attributes (e.g. data-menu="black"). I want the fixed menu to change its class based on the section that is currently underneath it as the user scrolls. Y ...

javascriptjqueryhtmlcss

Sending information from a parent component to a child component in Vue.js and then showcasing the data

Hey there! I'm new to vue.js and I'm struggling to figure out why my data is not being passed to the child component. I've tried a few different approaches, but none seem to be working as expected. It feels like I'm really close, but so ...

javascriptvue.js

leveraging the localStorage feature in a for-in iteration

I am new to stackOverflow, although I have browsed the forums for help in the past. However, this time I couldn't find a solution to my current issue, so I decided to create an account and seek assistance. The problem at hand is related to a workout ...

javascriptobjectlocal-storagefor-in-loop

Please explain the significance of the question mark in the statement `impliedTokenType: ?string`

Stripe elements have a question mark before the type in this GitHub repository: link The syntax I expected was impliedTokenType?: string, but it actually is impliedTokenType: ?string. Can someone explain the difference between the two? ...

reactjstypescript

How to trigger a function in a different component using Angular 4

I have a query bar located within the header element, designed to search through a list in a separate component. How can I set up communication for the headerComponent to invoke a function in the BooksComponent? export class HeaderComponent { search ...

angular

How can we effectively reroute HTTP requests according to the information stored in a database?

When operating an express server, what is the appropriate method for redirecting incoming requests? In my application, I have two routes: POST and UPDATE. The POST route is responsible for creating a new item in the database, while the UPDATE route increa ...

javascriptnode.jsexpresshttp

The NodeJS application experiences a crash if incorrect parameters are provided to the API

Currently, I have built a CRUD API using TypeScript with Node.js, Express, and MongoDB. My goal is to ensure that the API functions correctly when the correct parameters are sent through a POST request. However, if incorrect parameters are passed, the Node ...

javascriptnode.jstypescriptapiexpress

troubles with variables in AngularJS Formly templates

Having trouble displaying model or other variables in my template? Check out this link for reference: http://jsbin.com/wofulinufo/edit?html,js,output. Question: What is the solution for displaying variables from controller? Even when I try using {{model} ...

javascriptangularjsangular-formly

Problem with Safari: File downloaded with name "Unknown" due to Javascript issue

After successfully converting my data to text/csv, I can easily download the file in Chrome. However, when attempting to do so in Safari on an iPad or Mac, it opens a tab with the name "unknown" or "Untitled". The code snippet I am using for this is as fol ...

javascriptangularjshtmldownloadsafari

Ensure the backslashes are removed from the AWS Lambda string API response

I have an AWS Lambda function where I am sending a string as my final response let abc= `"phone_exist":"0","calls":"0","lastaction":"0"` callback(null,abc); Output: "\"phone_exist\":\"0\",\"calls\":\"0\",\"l ...

javascriptnode.jsstringaws-lambda

How can I iterate through multiple rows in JavaScript?

Feeling stuck, the simple yet dreaded for loop has become my nemesis and I could really use some guidance. Currently, I have a Google sheet with 3 rows (excluding headers) and 8 columns. As users input data via a web app, the number of rows will dynamicall ...

javascriptgoogle-apps-scriptgoogle-sheets

A proven method for distinguishing between desktop and mobile browsers

Similar Question: Exploring Browser Detection Methods in Javascript I am interested in finding an efficient way to differentiate between desktop and mobile browsers, either using JavaScript or PHP. if (desktop browser) { do x; } else { // mobi ...

phpjavascriptcross-browserbrowser-detection

How can I lower the version of Angular CLI?

Currently, I am working on a project using angular 4 and the angular-cli version 1.6.4 but I am facing this issue while building my project. I have learned that downgrading to angular-cli-1.6.3 can resolve this issue. Could someone advise me on how to do ...

angularangular-cli

Comparison between on() delegation and delegate()

When using <strong>$(document).on('click', '#target')</strong> versus <strong>$('body').delegate('click', '#target');</strong> It seems like both options achieve the desired outcome ...

javascriptjqueryevents

Display or conceal a div element depending on the value selected in Vue.js

I have a Vue.js dropdown and I would like to show or hide my div based on the selected value in the dropdown. The current code is only working for one ID, but I want it to work for all IDs. I want to toggle the visibility of my div based on the option&apos ...

javascriptvue.js

Retrieving a specific data point from the web address

What is the most efficient way to retrieve values from the window.location.href? For instance, consider this sample URL: http://localhost:3000/brand/1/brandCategory/3. The structure of the route remains consistent, with only the numbers varying based on u ...

javascriptreactjstypescript

Best practice for sending a Facebook token securely between client and server

I'm facing a dilemma on how to securely transfer a user's Facebook token from their client to my server. Currently, I have the following approach in mind: The user accesses a webpage and logs in to Facebook; Facebook token is obtained; User&apo ...

javascriptnode.jsfacebooktoken

"Track the upload progress of your file with a visual progress

I have written this code for uploading files using Ajax and PHP, and I am looking to incorporate a progress bar to indicate the percentage of the upload. Here is the code snippet: <script> $("form#data").submit(function(){ var formData = new ...

javascriptajax

Tips for incorporating custom logic into the redirectTo field in Angular

Can I implement custom logic with redirectTo in Angular? Consider the following routes defined using forRoot: const routes: Route[] = [ { path: ':companyId', canActivate: [CanActivateCompany], children: [ { path: '' ...

angular