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]

         <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")

  }

}

[Kokila Poovendran]

Hi Baraa El Ghalayini,


Greeting from Syncfusion support!

Thank you for reaching out to us regarding the issue with StartDate and EndDate being fetched as null only on mobile devices, while it works fine on desktop.

We've carefully reviewed the problem you reported and attempted to replicate it on our end. However, we were unable to reproduce the issue. In the sample provided, the values for StartDate and EndDate are returned properly across both mobile and desktop devices.

You can view the behavior in the sample provided by following this link:  https://stackblitz.com/edit/angular-n1rbwr-emd122?file=src%2Fapp.component.html,src%2Fapp.component.ts,src%2Fapp.component.css

We understand the importance of resolving this issue for you. If you could provide us with additional details or steps to reproduce the issue reliably and if possible please provide a video reference, it would greatly assist us in diagnosing and addressing the problem more effectively.

Please don't hesitate to reach out if you have any further questions or concerns. We're here to help.

[Baraa El Ghalayini]

Hello, first of all thank you for helping me.

Im encountering the problem only on apple products:

On iphone safari and google chrome browsers.

And,

on macos safari browsers.

Whereas, on andriod browsers and windows browsers, it's working fine. 

It's working fine for you, because you're previewing it on windows, try it on any real iphone or macos and hopefully you'll encounter the problem.

OR, actually try it on browserstack. open dormnation.link website, change the dates to any date you desireand then press the search button and see the console, you'll see that the startdate is returned as null.

[Kokila Poovendran]

Hi Baraa El Ghalayini,

We understand that you're experiencing difficulties with the start date returning as null on Safari and Chrome browsers on iPhone and macOS devices. We apologize for any inconvenience this may have caused.

While we attempted to replicate the issue on our end using Safari and Chrome browsers on iPhone and macOS devices, we were unable to encounter the problem you described.

To better assist you, could you provide additional details or steps to reproduce the issue? It would be helpful if you could share a modified version of the code and a video illustrating the problem. This will enable us to investigate further and provide a more accurate solution.

Thank you for your cooperation, and we look forward to resolving this issue for you promptly.

[Baraa El Ghalayini]

Hello, can you please try it on my website dormnation.link ? I'm encountering the problem there, and the code for it is provided in the 1st message I placed here. Attached, you can find a video showing what's happening. I have predefined the startDate and endDate, so when I directly hit search when I refresh/open the webpage, it works perfectly. However, if I change the dates, the predefined values become null and the search method stops working

Attachment: RPReplay_Final1709541803_3ce2a641.zip

[Kokila Poovendran]

Hi Baraa El Ghalayini,

 

We apologize for any inconvenience caused, and we appreciate your patience.

Upon reviewing the video illustration you provided, we observed that changing the date and clicking the search icon successfully navigates to the new webpage, and the search function works as expected. However, the attached zip file appears to be empty, preventing us from obtaining further details about the issue.

To assist you better, could you please double-check the video illustration and ensure that it accurately reflects the problem you're encountering? Additionally, if possible, could you provide detailed replication steps or any additional information that could help us understand the issue more comprehensively?

Once we have the necessary information, we'll do our best to address the problem promptly and provide you with a satisfactory solution

Video Illustration: 186975_d154ec6f.zip