An Angular Material Component wrapping the Angular Material Datepicker and allowing

• to update the date formats at runtime and instantly (see this issue and this issue)
• to use different formats for each DatePicker

Disclaimer

This component relies on a hack consisting of the modification of a private field within the Angular Material DatePicker component. Be aware that a breaking change could happen on any future update from the Angular Material team

Table of contents

• Browser support
• Features
  • Now
  • What's next?
• Demo
• Installation
• What's in?
• Usage
  • Basic usage
  • Advanced
• Versioning
• Creator
• Ask Me
• Credits
  • License

Browser support

| IE / Edge| Firefox| Chrome | Safari| Opera| |--|--|--|--|--| |IE11, Edge|latest|latest|latest|latest|

Features

Now:

• Angular 15 Support
• All features from the native Angular Material DatePicker.....and one more
• Update your DatePicker date formats at runtime (including the calendar popup labels)
• Support only MomentDateAdapter
• Support DateRangePicker

What's next?

• If you find it useful, just ask ;)

Demo

NgxGaewynnDatePicker demo

Installation

ngx-gaewynn-datepicker is available via npm and yarn

Using npm:

$ npm install ngx-gaewynn-datepicker --save

Using yarn:

$ yarn add ngx-gaewynn-datepicker

Using angular-cli:

$ ng add ngx-gaewynn-datepicker

What's in?

|Member|Description| |--|--| |NgxGaewynnDatePickerModule|The module handling DatePickers. To import in each module using the component| |NgxGaewynnDateRangePickerModule|The module handling DateRangePickers. To import in each module using the component| |NgxGaewynnDatePickerService|A service allowing to manage the date pickers formats and the configuration| |NGX_GAEWYNN_DATEPICKER_CONFIGURATION|A token providing your formats configuration|

NGX_GAEWYNN_DATEPICKER_CONFIGURATION consists of two properties:

• initials: represents a collection of links between a datepicker (or date range picker) and the locale it will use

[
	// All components with a group binding set to "group1" will be initialized using the format name "format-1" defined in the NGX_GAEWYNN_DATEPICKER_CONFIGURATION
	{ group: "group1", format: "format-1" },

	// All components with a group binding set to "group2" will be initialized using the format name "format-2" defined in the NGX_GAEWYNN_DATEPICKER_CONFIGURATION
	{ group: "group2", format: "format-2" }
]

• formats: represents the formats to use for each locale of your application

[
	// Formats that will be used when updating to "format-1"
	{
		format: "format-1",
		locale: "fr",
		momentDateFormats: {
			parse: {
				dateInput: "DD.MM.YYYY",
			},
			display: {
				dateInput: "DD.MM.YYYY",
				monthYearLabel: "MMM.YYYY",
				dateA11yLabel: "DD.MM.YYYY",
				monthYearA11yLabel: "MMM.YYYY",
			}
		}
	}, 
	// Formats that will be used when updating to "format-2"
	{
		format: "format-2",
		locale: "en",
		momentDateFormats: {
			parse: {
				dateInput: "YYYY-MM-DD",
			},
			display: {
				dateInput: "YYYY-MM-DD",
				monthYearLabel: "MMM/YYYY",
				dateA11yLabel: "YYYY-MM-DD",
				monthYearA11yLabel: "MMM/YYYY",
			}
		}
	}
]

An example of a whole configuration will then be as follow:

export  const  GaewynnDatePickerConfiguration: NgxGaewynnDatePickerConfiguration= {
	initials: [{ group: "group1", format: "format-1" }, { group: "group2", format: "format-2" }],
	formats: [{
		format: "format-1",
		locale: "fr",
		momentDateFormats: {
			parse: {
				dateInput: "DD.MM.YYYY",
			},
			display: {
				dateInput: "DD.MM.YYYY",
				monthYearLabel: "MMM.YYYY",
				dateA11yLabel: "DD.MM.YYYY",
				monthYearA11yLabel: "MMM.YYYY",
			}
		}
	}, {
		format: "format-2",
		locale: "en",
		momentDateFormats: {
			parse: {
				dateInput: "YYYY-MM-DD",
			},
			display: {
				dateInput: "YYYY-MM-DD",
				monthYearLabel: "MMM/YYYY",
				dateA11yLabel: "YYYY-MM-DD",
				monthYearA11yLabel: "MMM/YYYY",
			}
		}
	}]
};

Usage

NgxGaewynnDatePicker is only a wrapper around the Angular Material Datepicker, so just wrap your Angular Material Datepicker inside the <ngx-gaewynn-datepicker> or the <ngx-gaewynn-date-range-picker>.

It relies on ReactiveForms, so needs to be included in a FormGroup

Basic usage

1. Inject the NgxGaewynnDatePickerModule (and/or the NgxGaewynnDateRangePickerModule) in each modules using the component and define a configuration for your datepickers (see What's in?). This configuration will be provided using the NGX_GAEWYNN_DATEPICKER_CONFIGURATION token in your AppModule

// ...  
import { NgxGaewynnDatePickerModule, NgxGaewynnDateRangePickerModule, NGX_GAEWYNN_DATEPICKER_CONFIGURATION } from  'NgxGaewynnDatePicker';
        
@NgModule({      
	imports: [
		// ...     		
		NgxGaewynnDatePickerModule,
		NgxGaewynnDateRangePickerModule
	],
	providers: [
		// ...
		// GaewynnDatePickerConfiguration is the configuration as described
		// You can use "useFactory" or "useClass" to provide the configuration
		{ provide: NGX_GAEWYNN_DATEPICKER_CONFIGURATION, useValue: GaewynnDatePickerConfiguration}
	]
})
export class AppModule { }

2. Add the <ngx-gaewynn-datepicker> and/or the <ngx-gaewynn-date-range-picker> to your template

<div [formGroup]="ngxGaewynnDatePickerForm">
	<!-- the [group] binding indicate which format will be used for this datepicker (see "What's in?" -->
	<ngx-gaewynn-datepicker [group]="'group1'">
		<mat-form-field appearance="fill">
			<mat-label>{{ Your hint }}</mat-label>
			<input  matInput [formControl]="customDateFormControl" [matDatepicker]="picker">
			<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
			<mat-datepicker #picker></mat-datepicker>
		</mat-form-field>
	</ngx-gaewynn-datepicker>

	<!-- For a DateRangePicker -->
	<ngx-gaewynn-date-range-picker  [group]="'group1'">
		<mat-form-field  appearance="fill">
			<mat-label>{{ mockService.getRangePlaceholder(1) }}</mat-label>
			<mat-date-range-input  [rangePicker]="rangePicker1">
				<input  matStartDate  [formControl]="customRangeDateFromFormControl1"  placeholder="Start date">
				<input  matEndDate  [formControl]="customRangeDateToFormControl1"  placeholder="End date">
			</mat-date-range-input>
			<mat-hint>{{ mockService.hintGroup1 }} – {{ mockService.hintGroup1 }}</mat-hint>
			<mat-datepicker-toggle  matIconSuffix  [for]="rangePicker1"></mat-datepicker-toggle>
			<mat-date-range-picker  #rangePicker1></mat-date-range-picker>
		</mat-form-field>
	</ngx-gaewynn-date-range-picker>
</div>

3. Inject the NgxGaewynnDatePickerService in each component using the <ngx-gaewynn-datepicker> (or the <ngx-gaewynn-date-range-picker>) component and call the function "init()" to initialize all datepickers with their initials formats

@Component({
	selector: 'app-root',
	templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {

	constructor(private readonly _ngxGaewynnDatePickerService: NgxGaewynnDatePickerService) { }

	public ngOnInit(): void {
		this._ngxGaewynnDatePickerService.init();
	}
}

4. Trigger the update of your format whenever you want

@Component({
	selector: 'app-root',
	templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {

	constructor(private readonly _ngxGaewynnDatePickerService: NgxGaewynnDatePickerService) { }

	public ngOnInit(): void {
		this._ngxGaewynnDatePickerService.init();
	}

	public updateFormats(): void {

		// This will apply the format named "format-2" in your 
		// NGX_GAEWYNN_DATEPICKER_CONFIGURATION on all datepickers binded to "group1"
		this._ngxGaewynnDatePickerService.updateFormats("format-2", "group1");
	}
}

Advanced usage

In more complex scenarios, it could happen that using the NGX_GAEWYNN_DATEPICKER_CONFIGURATION at the application startup as a provider is not a solution. In such cases, you can initialize the configuration programmatically using the NgxGaewynnDatePickerService and the functions "initConfiguration()" and "addFormat()".

Versioning

ngx-gaewynn-datepicker will be maintained under the Semantic Versioning guidelines. Releases will be numbered with the following format:

<major>.<minor>.<patch>

For more information on SemVer, please visit http://semver.org.

Creator

Arnaud Fischer

• @GitHub
• @LinkedIn

Credits

• Inspired by marcgrabow for his "dirty hack to change the display dateInput dateformat", but that works for now :smile:
• Inspired by mohamedelshorbagy on usage of zonejs in his comment

License

ngx-gaewynn-datepicker is MIT licensed.