update css for calendar template

Author: changhuixu

projects/uiowa/date-range-picker/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uiowa/date-range-picker",
-  "version": "19.0.0",
+  "version": "19.0.2",
   "author": "Changhui Xu <changhui-xu@uiowa.edu>",
   "description": "An Angular library for date range picker.",
   "keywords": [
@@ -15,8 +15,8 @@
   },
   "license": "MIT",
   "peerDependencies": {
-    "@angular/common": "^19.2.0",
-    "@angular/core": "^19.2.0",
+    "@angular/common": ">=19.0.0",
+    "@angular/core": ">=19.0.0",
     "@ng-bootstrap/ng-bootstrap": ">=18.0.0"
   },
   "dependencies": {

projects/uiowa/date-range-picker/src/lib/date-picker/date-picker.component.css

@@ -4,6 +4,14 @@
   display: inline-block;
   height: 2rem;
   width: 2rem;
+  border-radius: 0.5rem;
+}
+.custom-day:hover,
+.custom-day.focused {
+  background-color: #e6e6e6;
+}
+.custom-day.today {
+  border: 1px solid #0d6efd;
 }
 .custom-day.weekend {
   color: #d81e1e;

projects/uiowa/date-range-picker/src/lib/date-picker/date-picker.component.html

@@ -44,12 +44,19 @@
 <ng-template
   #dayTemplate
   let-date="date"
+  let-today="today"
+  let-selected="selected"
   let-disabled="disabled"
+  let-focused="focused"
   let-currentMonth="currentMonth"
 >
   <span
     class="custom-day"
     [class.weekend]="isWeekend(date)"
+    [class.today]="today"
+    [class.focused]="focused"
+    [class.bg-primary]="selected"
+    [class.text-white]="selected"
     [class.disabled]="disabled"
     [class.outside]="date.month !== currentMonth"
   >
@@ -58,19 +65,19 @@
 </ng-template>
 
 <ng-template #footerTemplate>
-  <div *ngIf="allowClear">
-    <hr class="my-0" />
-    <button
-      class="btn btn-primary btn-sm m-2 float-start"
-      (click)="ngbDate = today; onDateChange(today); d.close()"
-    >
-      Today
-    </button>
-    <button
-      class="btn btn-secondary btn-sm m-2 float-end"
-      (click)="ngbDate = null; dateChange.emit(undefined); d.close()"
-    >
-      Clear
-    </button>
-  </div>
+  <hr class="my-0" />
+  <button
+    class="btn btn-primary btn-sm m-2 float-start"
+    (click)="ngbDate = today; onDateChange(today); d.close()"
+  >
+    Today
+  </button>
+  @if(allowClear){
+  <button
+    class="btn btn-secondary btn-sm m-2 float-end"
+    (click)="ngbDate = null; dateChange.emit(undefined); d.close()"
+  >
+    Clear
+  </button>
+  }
 </ng-template>

projects/uiowa/date-range-picker/src/lib/date-picker/date-picker.component.ts

@@ -1,11 +1,11 @@
 import {
   ChangeDetectionStrategy,
   Component,
-  EventEmitter,
+  inject,
   Input,
   OnChanges,
   OnInit,
-  Output,
+  output,
   SimpleChanges,
 } from '@angular/core';
 import {
@@ -24,29 +24,21 @@ import {
 })
 export class DatePickerComponent implements OnInit, OnChanges {
   @Input() id = '';
-  @Input()
-  date: Date | null = null;
-  @Input()
-  disabled = false;
+  @Input() date: Date | null = null;
+  @Input() disabled = false;
   @Input() minDate?: Date;
   @Input() maxDate?: Date;
   @Input() isInvalid = false;
   @Input() allowClear = false;
 
-  @Output()
-  dateChange = new EventEmitter<Date>();
+  dateChange = output<Date | undefined>();
 
   ngbDate: NgbDate | null = null;
   ngbMinDate!: NgbDateStruct;
   ngbMaxDate!: NgbDateStruct;
-  today!: NgbDate;
+  today = inject(NgbCalendar).getToday();
 
-  constructor(
-    private readonly dateAdapter: NgbDateNativeAdapter,
-    calendar: NgbCalendar
-  ) {
-    this.today = calendar.getToday();
-  }
+  constructor(private readonly dateAdapter: NgbDateNativeAdapter) {}
 
   ngOnInit() {
     this.ngbDate = NgbDate.from(this.dateAdapter.fromModel(this.date));

projects/uiowa/date-range-picker/src/lib/date-range-picker/date-range-picker.component.css

@@ -5,7 +5,9 @@
   height: 2rem;
   width: 2rem;
 }
-
+.custom-day.today {
+  border: 1px solid #0d6efd;
+}
 .custom-day.focused {
   background-color: #e6e6e6;
 }

projects/uiowa/date-range-picker/src/lib/date-range-picker/date-range-picker.component.html

@@ -8,7 +8,7 @@
     readonly
     [attr.id]="id"
     [disabled]="disabled"
-    [autoClose]="false"
+    autoClose="outside"
     [displayMonths]="2"
     [dayTemplate]="t"
     [showWeekNumbers]="false"
@@ -42,6 +42,7 @@
 <ng-template
   #t
   let-date="date"
+  let-today="today"
   let-focused="focused"
   let-disabled="disabled"
   let-currentMonth="currentMonth"
@@ -54,6 +55,7 @@
     "
     [class.faded]="isHovered(date) || isInside(date)"
     [class.weekend]="isWeekend(date)"
+    [class.today]="today"
     [class.disabled]="disabled"
     [class.outside]="date.month !== currentMonth"
     (mouseenter)="hoveredDate = date"

projects/uiowa/date-range-picker/src/lib/date-range-picker/date-range-picker.component.ts

@@ -2,11 +2,10 @@ import {
   ChangeDetectionStrategy,
   Component,
   ElementRef,
-  EventEmitter,
   Input,
   OnChanges,
   OnInit,
-  Output,
+  output,
   SimpleChanges,
   ViewChild,
 } from '@angular/core';
@@ -26,16 +25,11 @@ import { DateRange } from '../models/date-range';
 })
 export class DateRangePickerComponent implements OnInit, OnChanges {
   @Input() id = '';
-  @Input()
-  dateRange: DateRange = new DateRange();
-  @Input()
-  minDate?: Date;
-  @Input()
-  maxDate?: Date;
-  @Input()
-  disabled = false;
-  @Output()
-  dateRangeChange = new EventEmitter<DateRange>();
+  @Input() dateRange: DateRange = new DateRange();
+  @Input() minDate?: Date;
+  @Input() maxDate?: Date;
+  @Input() disabled = false;
+  dateRangeChange = output<DateRange>();
   hoveredDate: NgbDate | null = null;
 
   private fromDate: NgbDate | null = null;