diff --git a/src/src/app/components/trips/trips.component.ts b/src/src/app/components/trips/trips.component.ts
index 3989062..0c9b05f 100644
--- a/src/src/app/components/trips/trips.component.ts
+++ b/src/src/app/components/trips/trips.component.ts
@@ -11,6 +11,7 @@ import { DatePipe } from '@angular/common';
 import { DialogModule } from 'primeng/dialog';
 
 interface TripBaseWithDates extends TripBase {
+  daterange?: Date[];
   from?: Date;
   to?: Date;
 }
@@ -81,7 +82,9 @@ export class TripsComponent implements OnInit {
           next: (new_trip: TripBase) => {
             let dayCount = 0;
 
-            if (trip.from && trip.to) {
+            if (trip.daterange && trip.daterange.length === 2) {
+              trip.to = new Date(trip.daterange[1]);
+              trip.from = new Date(trip.daterange[0]);
               const obs$ = this.generateDaysLabel(trip.from!, trip.to!).map((label) =>
                 this.apiService.postTripDay({ id: -1, label: label, items: [] }, new_trip.id),
               );
diff --git a/src/src/app/modals/trip-create-modal/trip-create-modal.component.html b/src/src/app/modals/trip-create-modal/trip-create-modal.component.html
index 0cb0338..2386a7a 100644
--- a/src/src/app/modals/trip-create-modal/trip-create-modal.component.html
+++ b/src/src/app/modals/trip-create-modal/trip-create-modal.component.html
@@ -12,13 +12,8 @@
   @if (tripForm.get("id")?.value === -1) {
   <div class="grid md:col-span-4 grid-cols-2 gap-2">
     <p-floatlabel variant="in">
-      <p-datepicker id="from" formControlName="from" [iconDisplay]="'input'" [showIcon]="true" appendTo="body" fluid />
-      <label for="from">From</label>
-    </p-floatlabel>
-
-    <p-floatlabel variant="in">
-      <p-datepicker id="to" formControlName="to" [iconDisplay]="'input'" [showIcon]="true" appendTo="body" fluid />
-      <label for="to">To</label>
+      <p-datepicker id="daterange" formControlName="daterange" [iconDisplay]="'input'" [showIcon]="true" selectionMode="range" appendTo="body" fluid />
+      <label for="daterange">Date Range</label>
     </p-floatlabel>
   </div>
   }
diff --git a/src/src/app/modals/trip-create-modal/trip-create-modal.component.ts b/src/src/app/modals/trip-create-modal/trip-create-modal.component.ts
index 623ce41..1eacd57 100644
--- a/src/src/app/modals/trip-create-modal/trip-create-modal.component.ts
+++ b/src/src/app/modals/trip-create-modal/trip-create-modal.component.ts
@@ -33,8 +33,7 @@ export class TripCreateModalComponent {
       image: '',
       currency: null,
       image_id: null,
-      from: null,
-      to: null,
+      daterange: null,
     });
 
     const patchValue = this.config.data?.trip;