Merge branch 'release/5.0.0'

README.md

@@ -6,7 +6,7 @@
 [![npm version](https://badge.fury.io/js/ngx-daterangepicker-material.svg)](https://badge.fury.io/js/ngx-daterangepicker-material)
 [![last commit](https://img.shields.io/github/last-commit/fetrarij/ngx-daterangepicker-material.svg)](https://github.com/fetrarij/ngx-daterangepicker-material/commits/master)
 
-This `Angular Material` plugin is compatible with Angular 2+ and is Ivy compatible. It leverages `moment.js` to handle date manipulation and parsing. The base for this plugin was originally the [Bootstrap Date Range Picker](http://www.daterangepicker.com), but its dependencies on jQuery and Bootstrap were removed. `Angular Material` themes are fully supported since v3.0.0, so you can just drop this component into an existing Material project and it will blend right into your application.
+This `Angular Material` plugin is compatible with Angular 2+ and is Ivy compatible. It leverages `dayjs` to handle date manipulation and parsing. The base for this plugin was originally the [Bootstrap Date Range Picker](http://www.daterangepicker.com), but its dependencies on jQuery, Bootstrap and dayjs.js were removed.
 
 ![](screen.png)
 
@@ -18,6 +18,7 @@ Demo: https://fetrarij.github.io/ngx-daterangepicker-material/
 
 | Angular| ngx-daterangepicker-material|
 | ------|:------:|
+| >=11.0.0  | v5.x.x |
 | >=9.0.0  | v4.x.x |
 | <9.0.0  | v2.x.x |
 | ~~>=9.0.0 depends on @angular/material~~ |~~v3.x~~ |
@@ -60,7 +61,7 @@ Html:
 Typescript:
 
 ````typescript
-selected: {startDate: Moment, endDate: Moment};
+selected: {startDate: Dayjs, endDate: Dayjs};
 ````
 ### with some options:
 Html:
@@ -77,7 +78,7 @@ Html:
 Typescript:
 
 ````typescript
-selected: {start: Moment, end: Moment};
+selected: {start: Dayjs, end: Dayjs};
 ````
 You can [play with our online demo here](https://fetrarij.github.io/ngx-daterangepicker-material/)
 and [browse our demo code here](./demo/src/app).
@@ -110,7 +111,7 @@ You can use the component directly in your templates, which will set its `inline
 
 ### minDate, maxDate
 
- >To set the minimal and maximal date, these options are either a moment date or string in [ISO](https://www.w3.org/QA/Tips/iso-date) format
+ >To set the minimal and maximal date, these options are either a dayjs date or string in [ISO](https://www.w3.org/QA/Tips/iso-date) format
 
 ### dateLimit
 
@@ -130,8 +131,8 @@ You can use the component directly in your templates, which will set its `inline
     applyLabel: 'Okay', // detault is 'Apply'
     clearLabel: 'Clear', // detault is 'Clear'
     customRangeLabel: 'Custom range',
-    daysOfWeek: moment.weekdaysMin(),
-    monthNames: moment.monthsShort(),
+    daysOfWeek: dayjs.weekdaysMin(),
+    monthNames: dayjs.monthsShort(),
     firstDay: 1 // first day is monday
 }
 ```
@@ -158,12 +159,12 @@ the model we got would be:  `{start: Date, end: Date}`
 ```
 ```javascript
 ranges: any = {
-    'Today': [moment(), moment()],
-    'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
-    'Last 7 Days': [moment().subtract(6, 'days'), moment()],
-    'Last 30 Days': [moment().subtract(29, 'days'), moment()],
-    'This Month': [moment().startOf('month'), moment().endOf('month')],
-    'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
+    'Today': [dayjs(), dayjs()],
+    'Yesterday': [dayjs().subtract(1, 'days'), dayjs().subtract(1, 'days')],
+    'Last 7 Days': [dayjs().subtract(6, 'days'), dayjs()],
+    'Last 30 Days': [dayjs().subtract(29, 'days'), dayjs()],
+    'This Month': [dayjs().startOf('month'), dayjs().endOf('month')],
+    'Last Month': [dayjs().subtract(1, 'month').startOf('month'), dayjs().subtract(1, 'month').endOf('month')]
   }
 ```
 #### Other options with ranges
@@ -243,11 +244,11 @@ You can use theses options:
 
 ### \(rangeClicked)
 
- >Fired when clicked on range, and send an object with range label and dates value, eg:  `{label: 'This Month', dates: [Moment, Moment]}`
+ >Fired when clicked on range, and send an object with range label and dates value, eg:  `{label: 'This Month', dates: [Dayjs, Dayjs]}`
 
 ### \(datesUpdated)
 
- >Fires when the date model is updated, like applying (if you have activated the apply button), or when selecting a range or date without the apply button, and sends an object containing start and end dates, eg: `{startDate: Moment, endDate: Moment}`
+ >Fires when the date model is updated, like applying (if you have activated the apply button), or when selecting a range or date without the apply button, and sends an object containing start and end dates, eg: `{startDate: Dayjs, endDate: Dayjs}`
 
 ### Global locale
 

demo/src/app/custom-ranges/custom-ranges.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import * as moment from 'moment';
+import * as dayjs from 'dayjs';
 
 @Component({
   selector: 'custom-ranges',
@@ -11,42 +11,42 @@ export class CustomRangesComponent implements OnInit {
   alwaysShowCalendars: boolean;
   showRangeLabelOnInput: boolean;
   keepCalendarOpeningWithRange: boolean;
-  maxDate: moment.Moment;
-  minDate: moment.Moment;
-  invalidDates: moment.Moment[] = [];
+  maxDate: dayjs.Dayjs;
+  minDate: dayjs.Dayjs;
+  invalidDates: dayjs.Dayjs[] = [];
   tooltips = [
-    {date: moment(), text: 'Today is just unselectable'},
-    {date:  moment().add(2, 'days'), text: 'Yeeeees!!!'}
+    {date: dayjs(), text: 'Today is just unselectable'},
+    {date:  dayjs().add(2, 'days'), text: 'Yeeeees!!!'}
   ];
   inlineDateTime;
   ranges: any = {
-    Today: [moment(), moment()],
-    Yesterday: [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
-    'Last 7 Days': [moment().subtract(6, 'days'), moment()],
-    'Last 30 Days': [moment().subtract(29, 'days'), moment()],
-    'This Month': [moment().startOf('month'), moment().endOf('month')],
+    Today: [dayjs(), dayjs()],
+    Yesterday: [dayjs().subtract(1, 'days'), dayjs().subtract(1, 'days')],
+    'Last 7 Days': [dayjs().subtract(6, 'days'), dayjs()],
+    'Last 30 Days': [dayjs().subtract(29, 'days'), dayjs()],
+    'This Month': [dayjs().startOf('month'), dayjs().endOf('month')],
     'Last Month': [
-      moment()
+      dayjs()
         .subtract(1, 'month')
         .startOf('month'),
-      moment()
+      dayjs()
         .subtract(1, 'month')
         .endOf('month')
     ],
     'Last 3 Month': [
-      moment()
+      dayjs()
         .subtract(3, 'month')
         .startOf('month'),
-      moment()
+      dayjs()
         .subtract(1, 'month')
         .endOf('month')
     ]
   };
 
-  isInvalidDate = (m: moment.Moment) =>  {
+  isInvalidDate = (m: dayjs.Dayjs) =>  {
     return this.invalidDates.some(d => d.isSame(m, 'day') );
   }
-  isTooltipDate = (m: moment.Moment) =>  {
+  isTooltipDate = (m: dayjs.Dayjs) =>  {
     const tooltip = this.tooltips.find(tt => tt.date.isSame(m, 'day'));
     if (tooltip) {
       return tooltip.text;
@@ -56,15 +56,15 @@ export class CustomRangesComponent implements OnInit {
   }
 
   constructor() {
-    this.maxDate = moment().add(2,  'weeks');
-    this.minDate = moment().subtract(3, 'days');
+    this.maxDate = dayjs().add(2,  'weeks');
+    this.minDate = dayjs().subtract(3, 'days');
 
     this.alwaysShowCalendars = true;
     this.keepCalendarOpeningWithRange = true;
     this.showRangeLabelOnInput = true;
     this.selected = {
-      startDate: moment().subtract(1, 'days').set({hours: 0, minutes: 0}),
-      endDate: moment().subtract(1, 'days').set({hours: 23, minutes: 59})
+      startDate: dayjs().subtract(1, 'days').set('hours', 0).set('minutes', 0),
+      endDate: dayjs().subtract(1, 'days').set('hours', 23).set('minutes', 59)
     };
   }
   rangeClicked(range) {

demo/src/app/full/full.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
-import * as moment from 'moment';
+import * as dayjs from 'dayjs';
 import { DaterangepickerDirective } from '../../../../src/daterangepicker/daterangepicker.directive';
 
 @Component({
@@ -23,8 +23,8 @@ export class FullComponent implements OnInit {
     lockStartDate: false,
     closeOnAutoApply: true
   };
-  minDate: moment.Moment = moment().subtract(5, 'days');
-  maxDate: moment.Moment = moment().add(2, 'month');
+  minDate: dayjs.Dayjs = dayjs().subtract(5, 'days');
+  maxDate: dayjs.Dayjs = dayjs().add(2, 'month');
   locale: any = {
     format: 'YYYY-MM-DDTHH:mm:ss.SSSSZ',
     displayFormat: 'DD MMMM YYYY HH:mm',
@@ -38,7 +38,7 @@ export class FullComponent implements OnInit {
   dateLimit: number;
   click() {
   }
-  selected = {start: moment().subtract(3, 'days'), end: moment().add(3, 'days') };
+  selected = {start: dayjs().subtract(3, 'days'), end: dayjs().add(3, 'days') };
   @ViewChild(DaterangepickerDirective, { static: true }) daterangepicker: DaterangepickerDirective;
   constructor() {
     this.timePicker = false;

demo/src/app/reactive-form/reactive-form.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import * as moment from 'moment';
+import * as dayjs from 'dayjs';
 import { FormGroup, FormBuilder, Validators } from '@angular/forms';
 import { LocaleConfig } from '../../../../src/daterangepicker';
 
@@ -19,8 +19,8 @@ export class ReactiveFormComponent {
   constructor(private fb: FormBuilder) {
     this.form = this.fb.group({
       selected: [{
-        startDate: moment('2015-11-24T00:00Z'),
-        endDate: moment('2015-11-26T00:00Z')
+        startDate: dayjs('2015-11-24T00:00Z'),
+        endDate: dayjs('2015-11-26T00:00Z')
       }, Validators.required],
     });
 

demo/src/app/simple/simple.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
-import * as moment from 'moment';
+import * as dayjs from 'dayjs';
 import { DaterangepickerComponent, DaterangepickerDirective } from '../../../../src/daterangepicker';
 
 @Component({
@@ -8,15 +8,15 @@ import { DaterangepickerComponent, DaterangepickerDirective } from '../../../../
   styleUrls: ['./simple.component.scss']
 })
 export class SimpleComponent implements OnInit {
-  selected: {startDate: moment.Moment, endDate: moment.Moment};
+  selected: {startDate: dayjs.Dayjs, endDate: dayjs.Dayjs};
   @ViewChild(DaterangepickerDirective, { static: true }) pickerDirective: DaterangepickerDirective;
   inlineDate: any;
   inlineDateTime: any;
   picker: DaterangepickerComponent;
   constructor() {
     this.selected = {
-      startDate: moment('2015-11-18T00:00Z'),
-      endDate: moment('2015-11-26T00:00Z')
+      startDate: dayjs('2015-11-18T00:00Z'),
+      endDate: dayjs('2015-11-26T00:00Z')
     }
    }
 

demo/src/app/single-datepicker/single-datepicker.component.ts

@@ -1,23 +1,25 @@
 import { Component, OnInit } from '@angular/core';
-import * as moment from 'moment';
-import 'moment/locale/fr';
+import * as dayjs from 'dayjs';
+import 'dayjs/locale/fr';
 import { LocaleConfig } from '../../../../src/daterangepicker';
-// moment.locale('fr', localization);
+import * as weekday from 'dayjs/plugin/weekday';
+dayjs.extend(weekday);
+dayjs.locale('fr');
 
 @Component({
   selector: 'single-datepicker',
   templateUrl: './single-datepicker.component.html',
   styleUrls: ['./single-datepicker.component.scss']
 })
 export class SingleDatepickerComponent implements OnInit {
-  selected = moment();
+  selected = dayjs();
   locale: LocaleConfig = {
     applyLabel: 'Appliquer',
     customRangeLabel: ' - ',
-    daysOfWeek: moment.weekdaysMin(),
-    monthNames: moment.monthsShort(),
-    firstDay: moment.localeData().firstDayOfWeek(),
-  }
+    daysOfWeek: dayjs.weekdaysMin(),
+    monthNames: dayjs.monthsShort(),
+    firstDay: dayjs.localeData().firstDayOfWeek(),
+  };
   constructor() { }
   ngOnInit() {
   }

demo/src/app/timepicker/timepicker.component.ts

@@ -1,17 +1,17 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
-import * as moment from 'moment';
+import * as dayjs from 'dayjs';
 import { DaterangepickerComponent, DaterangepickerDirective } from '../../../../src/daterangepicker';
 
 @Component({
   selector: 'timepicker',
   templateUrl: './timepicker.component.html'
 })
 export class TimepickerComponent implements OnInit {
-  selected: {startDate: moment.Moment, endDate: moment.Moment};
+  selected: {startDate: dayjs.Dayjs, endDate: dayjs.Dayjs};
   constructor() {
     this.selected = {
-      startDate: moment('2015-11-18T00:00Z'),
-      endDate: moment('2015-11-26T00:00Z')
+      startDate: dayjs('2015-11-18T00:00Z'),
+      endDate: dayjs('2015-11-26T00:00Z')
     }
    }