Added new @Input named showStartTimeInputs and `showEndTimeInputs… (#1099)

* Added new `@Input` named `showStartTimeInputs` and `showEndTimeInputs` set to a `boolean` to show and hide To and From time stamp.

* added changes to demo page

* updated utc

* updated utc

* updated utc

Author: anjalitiwari285

projects/swimlane/ngx-ui/CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## HEAD (unreleased)
 
+- Fix: (`ngx-calendar`) : Added new `@Input` named `showStartTimeInputs` and `showEndTimeInputs` set to a `boolean`.
 - Feature (`ngx-column`): Added a new column component
 
 ## 49.2.1 (2025-06-18)

projects/swimlane/ngx-ui/src/lib/components/calendar/calendar.component.html

@@ -160,7 +160,7 @@
     </div>
   </div>
   <div *ngIf="selectType === 'range'" class="time-inputs">
-    <div class="time-row" *ngIf="range.startDate">
+    <div class="time-row" *ngIf="range.startDate && showStartTimeInputs">
       <div>
         <ngx-input
           type="text"
@@ -207,7 +207,7 @@
         </button>
       </div>
     </div>
-    <div class="time-row" *ngIf="range.endDate">
+    <div class="time-row" *ngIf="range.endDate && showEndTimeInputs">
       <div>
         <ngx-input
           type="text"
@@ -234,7 +234,7 @@
         </ngx-input>
       </div>
       <div>
-        <button class="ampm" type="button" [class.selected]="endAmPmVal === 'AM'" (click)="onAmPmChange('AM', 'end')">
+        <button  class="ampm" type="button" [class.selected]="endAmPmVal === 'AM'" (click)="onAmPmChange('AM', 'end')">
           AM
         </button>
       </div>

projects/swimlane/ngx-ui/src/lib/components/calendar/calendar.component.ts

@@ -67,6 +67,8 @@ export class CalendarComponent implements OnInit, AfterViewInit, ControlValueAcc
     endDate: undefined
   };
 
+  @Input() showStartTimeInputs: boolean = true;
+  @Input() showEndTimeInputs: boolean = true;
   @Input('minView')
   get minView() {
     return this._minView ? this._minView : CalendarView.Date;

projects/swimlane/ngx-ui/src/lib/components/calendar/calender.component.spec.ts

@@ -351,6 +351,51 @@ describe('CalendarComponent', () => {
     });
   });
 
+  describe('conditional time Input rendering', () => {
+    it('should show both time inputs if both showStartTimeInputs and showEndTimeInputs are true', () => {
+      component.range = { startDate: new Date(), endDate: new Date() };
+      component.showStartTimeInputs = true;
+      component.showEndTimeInputs = true;
+      component.selectType = 'range';
+      fixture.detectChanges();
+      const timeRows = fixture.nativeElement.querySelectorAll('.time-row');
+      expect(timeRows.length).toBe(2);
+    });
+
+    it('should hide start time input if showStartTimeInputs is false', () => {
+      component.range = { startDate: new Date(), endDate: new Date() };
+      component.showStartTimeInputs = false;
+      component.showEndTimeInputs = true;
+      component.selectType = 'range';
+      fixture.detectChanges();
+      const timeRows = fixture.nativeElement.querySelectorAll('.time-row');
+      expect(timeRows.length).toBe(1); // only end input shown
+    });
+
+    it('should hide end time input if showEndTimeInputs is false', () => {
+      component.range = { startDate: new Date(), endDate: new Date() };
+      component.showStartTimeInputs = true;
+      component.showEndTimeInputs = false;
+      component.selectType = 'range';
+      fixture.detectChanges();
+      const timeRows = fixture.nativeElement.querySelectorAll('.time-row');
+      expect(timeRows.length).toBe(1); // only start input shown
+    });
+
+    it('should hide both time inputs if both flags are false', () => {
+      component.showStartTimeInputs = false;
+      component.showEndTimeInputs = false;
+      component.range = {
+        startDate: new Date('2024-06-01T10:00:00'),
+        endDate: new Date('2024-06-02T18:00:00')
+      };
+      component.selectType = 'range';
+      fixture.detectChanges();
+      const timeRows = fixture.nativeElement.querySelectorAll('.time-row');
+      expect(timeRows.length).toBe(0); // nothing rendered
+    });
+  });
+
   describe('initializeTime', () => {
     it('should initialize time properties based on range start and range end', () => {
       const rangeStart = new Date('2024-04-04T10:30:00');

src/app/forms/calendar-page/calendar-page.component.html

@@ -71,6 +71,24 @@ <h3>Select Range</h3>
         (onRangeSelect)="onRangeSelect($event)"> </ngx-calendar>]]>
       </app-prism>
 
+      <h3>Select Range - Configure ‘From’ and ‘To’ timestamps in Select Range using input flags.</h3>
+
+      <ngx-calendar
+      name="calendar-range"
+      [selectType]="'range'"
+      [dateLabelFormat]="'YYYY MMM D'"
+      (onRangeSelect)="onRangeSelect($event)"
+      [showStartTimeInputs] = "true"
+      [showEndTimeInputs] = "false"
+    >
+    </ngx-calendar>
+
+    <app-prism>
+      <![CDATA[<ngx-calendar name="calendar-range" [selectType]="'range'" [dateLabelFormat]="'YYYY MMM D'"
+      (onRangeSelect)="onRangeSelect($event)" [showStartTimeInputs] = "true"
+      [showEndTimeInputs] = "true"> </ngx-calendar>]]>
+    </app-prism>
+
       <h3>Min view and Default view</h3>
 
       <h4>Min view: "date" default view: "date"</h4>