Only on mobile devices(its fine on desktop), StartDate and Endate are being fetched as null when I choose a certain date rannge. Why?

[Baraa El Ghalayini]

I gave the startDate and endDate predefined dates so i can at least make the search for once, but when you change the dates the search doesnt work anymore because as shown in the image the startDate and the endDate

are being retreived as null. Please try it on my wesbite , its domain is dormnation.link

 <form class="search-bar" #SearchEngineForm="ngForm">

                <div class="search-bar__university">

                    <label class="search-bar__university-label" for="Universities">University:</label>

                    <select [(ngModel)]="Location" name="location" id="Universities"

                        class="search-bar__university-selector">

                        <!-- <optgroup label="Hamra District"> -->

                        <option value="LAU Beirut" selected>LAU Beirut</option>

                        <option value="AUB">AUB</option>

                        <!-- </optgroup> -->

                        <option value="LAU Byblos">LAU Byblos</option>

                        <option value="USJ">USJ</option>

                        <option value="BAU">BAU</option>

                        <option value="RHU">RHU</option>

                        <option value="Any">Any University</option>

                    </select>

                </div>

                <div class="search-bar__calendar">

                    <label class="search-bar__calendar-label" for="dateRangePicker">Check-in/out:</label>

                    <ejs-daterangepicker #daterangepicker class="search-bar__calendar-selector" [start]="start"

                        [min]="min" [max]="max" [format]="format" [depth]="depth" [allowEdit]="false"

                        (focus)="openCalendar()" [(startDate)]="startDate"

                        [(endDate)]="endDate" [(ngModel)]="calendarDate" name="calendarDate" required>

                    </ejs-daterangepicker>

                </div>

           

                <div class="search-bar__studentsNumber">

                    <label class="search-bar__studentsNumber-label" for="number of students">Number of Students:</label>

                    <input [(ngModel)]="NumberOfGuests" name="NumberOfGuests" id="check-in" type="number" min="1" max="6" class="search-bar__studentsNumber-selector">

                </div>

                <!-- <i class=""></i> -->

                <div class="search-bar__submit">

                    <!-- <button type="submit" class="search-bar__submit-button fa-solid fa-magnifying-glass" [disabled]="!SearchEngineForm.valid"></button> -->

                    <button type="button" (click)="onSearchForm()" class="search-bar__submit-button fa-solid fa-magnifying-glass"></button>

                </div>

            </form>

export class HomepageComponent {

  public start: CalendarView = 'Year';

  public depth: CalendarView = 'Year';

  public format: string = 'MMM yyyy';

  public min: Date = new Date(); // Set the minimum selectable month to the current month and year

  public max: Date = new Date(new Date().getFullYear() + 2, new Date().getMonth(), 1);

  @ViewChild('daterangepicker') dateRangePicker: DateRangePickerComponent;

  openCalendar() {

    this.dateRangePicker.show();

  }

  calendarDate: Date; //Useless, just for form validation

  public fullYear: number = new Date().getFullYear();

  public month: number = new Date().getMonth();

  public startDate: Date = new Date(this.fullYear, this.month  , 28);

  public endDate: Date = new Date(this.fullYear, this.month + 1, 28);

  NumberOfGuests: number = 1;

  Location: string = 'LAU Beirut';

  constructor(private dormService: DormListService) {

  }

  onSearchForm() {

   

    localStorage.setItem('Location', this.Location);

    console.log("new version")

    console.log(this.startDate);

    this.dormService.onSearchForm(this.Location, this.startDate, this.endDate, this.NumberOfGuests, "default", 0, "default", false, false);

    console.log("im out of homepage")

  }

}

Attachment: RPReplay_Final1709541803_8df00e7c.zip

[Yohapuja Selvakumaran]

Hi Baraa El Ghalayini,

Thank you for reaching out us. We've validated the reported issue based on the information provided, but unfortunately, we couldn't replicate the issue in our sample. The values are being properly retrieved in mobile devices. Kindly check out the created sample.

Sample: https://stackblitz.com/edit/angular-yyll4q-wvezow?file=src%2Fapp.component.html,src%2Fapp.component.ts

1. To further investigate and address the reported issue, we kindly request your assistance in replicating it at our end. Could you please modify the shared sample to replicate the reported issue? This will allow us to better understand the problem and provide an appropriate solution.

1. Additionally, providing more details about where you encounter the null value on the mobile device would be helpful. Any specific scenarios or steps you follow that lead to this issue would assist us in diagnosing and resolving it accurately.

1. Please let us know if there's any particular event or condition in which you're getting the null value for the start date and end date. Your cooperation is greatly appreciated as we work towards resolving this issue.

Regards,

Yohapuja S