Added option to customize dates separator

README.md

@@ -51,7 +51,8 @@ export class AppComponent {
 	  presetNames: ['This Month', 'Last Month', 'This Week', 'Last Week', 'This Year', 'Last Year', 'Start', 'End'],
 	  dateFormat: 'yMd',
 	  outputFormat: 'DD/MM/YYYY',
-	  startOfWeek: 1
+	  startOfWeek: 1,
+	  dateSeparator: '_',
 	};
   }
 }
@@ -73,6 +74,7 @@ export interface NgDateRangePickerOptions {
   dateFormat: string;
   outputFormat: string;
   startOfWeek: number;
+  dateSeparator: string;
 }
 ```
 

src/app/app.component.html

@@ -30,6 +30,7 @@
                   <option>grape</option>
                   <option>red</option>
                   <option>gray</option>
+                  <option>orange</option>
                 </select>
               </span>
             </div>

src/app/app.component.ts

@@ -17,7 +17,8 @@ export class AppComponent implements OnInit  {
       presetNames: ['This Month', 'Last Month', 'This Week', 'Last Week', 'This Year', 'Last Year', 'Start', 'End'],
       dateFormat: 'yMd',
       outputFormat: 'DD/MM/YYYY',
-      startOfWeek: 0
+      startOfWeek: 0,
+      dateSeparator: '_'
     };
   }
 }

src/ng-daterangepicker/ng-daterangepicker.component.html

@@ -5,7 +5,8 @@
                   'theme-cyan': options.theme === 'cyan',
                   'theme-grape': options.theme === 'grape',
                   'theme-red': options.theme === 'red',
-                  'theme-gray': options.theme === 'gray' }">
+                  'theme-gray': options.theme === 'gray',
+                  'theme-orange': options.theme === 'orange' }">
 
   <div class="input-section" (click)="toggleCalendar($event, 'from')">
     <span class="label-txt">{{options.presetNames[6]}}</span>

src/ng-daterangepicker/ng-daterangepicker.component.ts

@@ -3,13 +3,14 @@ import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';
 import * as dateFns from 'date-fns';
 
 export interface NgDateRangePickerOptions {
-  theme: 'default' | 'green' | 'teal' | 'cyan' | 'grape' | 'red' | 'gray';
+  theme: 'default' | 'green' | 'teal' | 'cyan' | 'grape' | 'red' | 'gray' | 'orange';
   range: 'tm' | 'lm' | 'lw' | 'tw' | 'ty' | 'ly';
   dayNames: string[];
   presetNames: string[];
   dateFormat: string;
   outputFormat: string;
   startOfWeek: number;
+  dateSeparator: string;
 }
 
 export interface IDay {
@@ -55,7 +56,8 @@ export class NgDateRangePickerComponent implements ControlValueAccessor, OnInit,
     presetNames: ['This Month', 'Last Month', 'This Week', 'Last Week', 'This Year', 'Last Year', 'Start', 'End'],
     dateFormat: 'yMd',
     outputFormat: 'DD/MM/YYYY',
-    startOfWeek: 0
+    startOfWeek: 0,
+    dateSeparator: '-'
   }
 
   private onTouchedCallback: () => void = () => { };
@@ -143,7 +145,7 @@ export class NgDateRangePickerComponent implements ControlValueAccessor, OnInit,
     }
 
     this.days = prevMonthDays.concat(days);
-    this.value = `${dateFns.format(this.dateFrom, this.options.outputFormat)}-${dateFns.format(this.dateTo, this.options.outputFormat)}`;
+    this.value = `${dateFns.format(this.dateFrom, this.options.outputFormat)}${this.options.dateSeparator}${dateFns.format(this.dateTo, this.options.outputFormat)}`;
   }
 
   toggleCalendar(e: MouseEvent, selection: 'from' | 'to'): void {
@@ -189,32 +191,37 @@ export class NgDateRangePickerComponent implements ControlValueAccessor, OnInit,
 
   selectRange(range: 'tm' | 'lm' | 'lw' | 'tw' | 'ty' | 'ly'): void {
     let today = dateFns.startOfDay(new Date());
-
+    // set current year, this is overwritten only in 'Last year' selection
+    dateFns.setYear(today, today.getFullYear());
     switch (range) {
       case 'tm':
+        this.date = dateFns.setMonth(today, today.getMonth());
         this.dateFrom = dateFns.startOfMonth(today);
         this.dateTo = dateFns.endOfMonth(today);
         break;
       case 'lm':
-        today = dateFns.subMonths(today, 1);
+        this.date = today = dateFns.subMonths(today, 1);
         this.dateFrom = dateFns.startOfMonth(today);
         this.dateTo = dateFns.endOfMonth(today);
         break;
       case 'lw':
         today = dateFns.subWeeks(today, 1);
+        this.date = today;
         this.dateFrom = dateFns.startOfWeek(today, {weekStartsOn: this.options.startOfWeek});
         this.dateTo = dateFns.endOfWeek(today, {weekStartsOn: this.options.startOfWeek});
         break;
       case 'tw':
+        this.date = dateFns.setMonth(today, today.getMonth());
         this.dateFrom = dateFns.startOfWeek(today, {weekStartsOn: this.options.startOfWeek});
         this.dateTo = dateFns.endOfWeek(today, {weekStartsOn: this.options.startOfWeek});
         break;
       case 'ty':
+        this.date = dateFns.setYear(today, today.getFullYear());
         this.dateFrom = dateFns.startOfYear(today);
         this.dateTo = dateFns.endOfYear(today);
         break;
       case 'ly':
-        today = dateFns.subYears(today, 1);
+        this.date = today = dateFns.subYears(today, 1);
         this.dateFrom = dateFns.startOfYear(today);
         this.dateTo = dateFns.endOfYear(today);
         break;

src/ng-daterangepicker/ng-daterangepicker.sass

@@ -391,3 +391,35 @@
             border-color: $gray
             &:hover, &.is-active
               background: $gray
+
+
+  &.theme-orange
+    &.is-active
+      border-color: $orange
+    .input-section
+      .label-txt
+        color: $orange
+      .cal-icon
+        svg
+          path
+            fill: $orange
+    .calendar
+      border-color: $orange
+      &:after
+        border-top-color: $orange
+        border-left-color: $orange
+      .calendar-container
+        .days
+          .day
+            &.is-within-range
+              background: lighten($orange, 20)
+            .day-num
+              &:hover, &.is-active
+                background: $orange
+      .side-container
+        .side-container-buttons
+          .side-button
+            border-color: $orange
+            &:hover, &.is-active
+              background: $orange
+

src/styles/colors.sass

@@ -22,3 +22,4 @@ $cyan: #0b7285
 $grape: #862e9c
 $red: #c92a2a
 $gray: #212529
+$orange: #f26b2a