[BUG] Date Format Display Issue (iPhone vs Android)

[Sa7aR-Kassem]

Description: There is an inconsistency in the way selected dates are displayed in the "Date from" and "Date to" fields on the MOHAP portal. When the system language is switched to Arabic, the following issues occur:

On iPhone, only the month is displayed in the field, leaving the day and year missing.
On Android, the date is displayed in the day/month/year (DD/MM/YYYY) format, which is different from the expected format.
The expected behavior is for the selected date to appear in the month/day/year (MM/DD/YYYY) format across all devices.

Steps:

1. Switch the system language to Arabic.
2. Select any date in the "Date from" field.
3. Select any date in the "Date to" field.
4. Check the date format in the fields after selecting the dates.

Web:

iPhone

Android

[moiz-conceptlz]

@Sa7aR-Kassem this will be fixed in the next release - estimated at 2nd Jan 2025. For now, fall back to the following code for a date.

<div class="aegov-form-control control-base xl:control-lg">
   <label for="date_arrival">تاريخ الوصول</label>
   <div class="form-control-input">
      <input type="date" name="date_arrival" id="date_arrival" value="">
   </div>
</div>

[Sa7aR-Kassem]

Okay

There are also issues with the following:

1. The "Reset" button in Safari.
   Expected Results:
   when clicking on the reset button the field should be cleared
   Actual Results:
   https://github.com/user-attachments/assets/e97c56d6-8f6b-47b4-b849-3763fa05a866

2. General Issues in Android
   The placeholder is missing
   there is an arrow in the field
   issue at the page alignment

[moiz-conceptlz]

@Sa7aR-Kassem The custom icon on the date field will be removed in the next release. The default operating system icons or functionality will be the default.

Also, please note, the design system does not affect or cause any effect on default operating system inputs such as the date input. However, based on your video shared - it seems the reset will reset back to what every was the value. Ex; if the value was NULL, then hitting reset will result in a NULL again. However, if you pre populate a field with a value - the reset would reset back to that value.

Once again, the design system does not affect operating system behaviour.

[moiz-conceptlz]

Version 2.2.7 of the design system is released. Please update your package by running npm update.

There is no more custom icon for a date field. We have rolled back to take whatever is the default setting of the browser. This will solve the issues related to date not showing correctly on the arabic website, and more.

Please note; it is not necessary that you must use the default date input of the browser. If you want to use a custom date picker as a JS library, you can do it also. Just make sure you style it to match the input field.