57346

Set Date format for material-datepicker in angular 2

Question:

I am new in 'angular2' and 'angular js material'. I am using material-datepicker in my project.

This is my the date picker code

<material-datepicker placeholder="Select Date" [(date)]="currentDate" name="currentDate" required></material-datepicker>

It will be display in browser as shown below.

<a href="https://i.stack.imgur.com/yUjMt.png" rel="nofollow"><img alt="enter image description here" class="b-lazy" data-src="https://i.stack.imgur.com/yUjMt.png" data-original="https://i.stack.imgur.com/yUjMt.png" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" /></a>

My concern is date format issue. How to set the date format from 2017/04/27 to April 27 2017.

Answer1:

Material date picker is using moment to format the date so if you just give the pattern that moment accept you can get the date formatted as you want. [dateFormat]="'LL'"

Answer2:

You can use <a href="https://github.com/koleary94/Angular-2-Datepicker#api" rel="nofollow">dateFormat</a> option an specify MMMM DD YYYY tokens where:

<ul><li>MMMM is name month</li> <li>DD is day of the month</li> <li>YYYY is the year</li> </ul>

as stated in the <a href="http://momentjs.com/docs/#/displaying/format/" rel="nofollow">momentjs docs</a>.

Your code will be like the following:

<material-datepicker [dateFormat]="'MMMM DD YYYY'" placeholder="Select Date" [(date)]="currentDate" name="currentDate" required></material-datepicker>

Answer3:

In angular 2 for md datepicker, you can change the date format as below:

Create a component which extends NativeDateAdapter:

import { Component, OnInit } from '@angular/core'; import { NativeDateAdapter } from '@angular/material'; export class DateAdapterComponent extends NativeDateAdapter { format(date: Date, displayFormat: Object): string { let day = date.getDate(); let month = date.getMonth(); let year = date.getFullYear(); if (displayFormat == "input") { return this._toString(month) + ' '+ this._to2digit(day) + ',' + year; } else { return this._toString(month) + ' ' + year; } } private _to2digit(n: number) { return ('00' + n).slice(-2); } private _toString(n: number) { let month = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; return month[n]; } }

Add a date format constant in your app module:

const MY_DATE_FORMATS:MdDateFormats = { parse: { dateInput: {month: 'short', year: 'numeric', day: 'numeric'} }, display: { dateInput: 'input', monthYearLabel: {year: 'numeric', month: 'short'}, dateA11yLabel: {year: 'numeric', month: 'long', day: 'numeric'}, monthYearA11yLabel: {year: 'numeric', month: 'long'}, } };

and in provider, add date adapter and date formats:

providers: [ {provide: DateAdapter, useClass: DateAdapterComponent}, {provide: MD_DATE_FORMATS, useValue: MY_DATE_FORMATS}],

Recommend

  • Deleting Sharepoint Files using XMLHTTP
  • What does “bottleneck” mean in terms of bandwidth?
  • How can I replace certain string in a string in Python?
  • createRecord with ember-data + ember-data-django-rest-adapter
  • Identity Server by leastprivilege doesn't work properly on Azure
  • Year, Month, and Day parameters describe an un-representable DateTime in Persian calender
  • jQuery - how to validate a date of birth using jQuery Validation plugin?
  • Visual Studio 2010 - 2015 does not use ymm* registers for AVX optimization
  • A simple datepicker in VueJS
  • How to make Plotly chart with year mapped to line color and months on x-axis
  • How to parsing NSDate to RFC 822 always use in English?
  • iOS Date formatting
  • MySql - get days remaining
  • Returning this from a constructor function in JS
  • stop execution in Custom validator if it false
  • Is there any purpose for h2-h6 headings in HTML5?
  • C++ cout and enum representations
  • Divide a $1 by 3 and adjusting 1 cent
  • Spark (Scala) Writing (and reading) to local file system from driver
  • What is the use of a session store?
  • how to change api_token column in token guard
  • How to get the date of next specified day of week
  • Android cannot disable cut copy paste
  • Yii2: Finding file and getting path in a directory tree
  • Bootstrap (v3.3.4) glyphicons not displayed in IE when refresh page (F5)
  • Clear activity stack before launching another activity
  • How do I display a dialog that asks the user multi-choice questıon using tkInter?
  • Angular2 Response for preflight is invalid (redirect) from some GET requests
  • Why use database factory in asp.net mvc?
  • How do I configure context broker accept post requests from my remote sensor?
  • Copy to all folders batch file?
  • How to use carriage return with multiple line?
  • C++ and preprocessor macros: variadic type
  • Linq Objects Group By & Sum
  • Optimizing database types to compact database (SQLite)
  • WinForms: two way TextBox problem
  • R: gsub and capture
  • Buffer size for converting unsigned long to string
  • What are the advantages and disadvantages of reading an entire file into a single String as opposed
  • reshape alternating columns in less time and using less memory