Errors in calendar

Hi,

so, here is my description of some errors in the calendar popup and some optimization suggestions.

A newly selected date is displayed in the wrong language
I am currently using the “bookingcom-official-searchbox” on a German-language website. The initial display is okay. See https://i.imgur.com/gUgmVnS.jpg

But when I select a new date for “Check-In-Date” in the pop-up calendar, the new date values are displayed in English format and NOT in German format. See https://i.imgur.com/QDWcuD2.jpg

Selecting a new date causes a “Deprecation warning” in the browser console

Deprecation warning: value provided is not in a recognized RFC2822 or ISO format. moment construction falls back to js Date(), which is not reliable across all browsers and versions. Non RFC2822/ISO date formats are discouraged. Please refer to https://momentjs.com/guides/#/warnings/js-date/ for more info.
Arguments: 
[0] _isAMomentObject: true, _isUTC: false, _useUTC: false, _l: undefined, _i: 2022-2-10, _f: undefined, _strict: undefined, _locale: [object Object]
t/<@https://my.xyz.com/portal/wp-content/plugins/bookingcom-official-searchbox/assets/js/moment-with-locales.min.js?x10279:1:3274
ba/<@https://my.xyz.com/portal/wp-content/plugins/bookingcom-official-searchbox/assets/js/moment-with-locales.min.js?x10279:1:21836
ba@https://my.xyz.com/portal/wp-content/plugins/bookingcom-official-searchbox/assets/js/moment-with-locales.min.js?x10279:1:21887
Sa@https://my.xyz.com/portal/wp-content/plugins/bookingcom-official-searchbox/assets/js/moment-with-locales.min.js?x10279:1:22453
Ha@https://my.xyz.com/portal/wp-content/plugins/bookingcom-official-searchbox/assets/js/moment-with-locales.min.js?x10279:1:22535
M@https://my.xyz.com/portal/wp-content/plugins/bookingcom-official-searchbox/assets/js/moment-with-locales.min.js?x10279:1:209
pickDate@https://my.xyz.com/portal/wp-content/plugins/bookingcom-official-searchbox/assets/js/bos_date.js?x10279:307:29
@javascript:pickDate(2022,02,10,'b_checkin','b_frm');:1:9

The pop-up calendar needs some CSS tweaking
1.) The pop-up calendar needs a z-index for the CSS id “b_calendarPopup” to ensure that the element covers all other elements that may be located under the “bookingcom-official-searchbox”. CSS example: #b_calendarPopup {z-index: 100;}

2.) When the pop-up calendar is displayed, some items (in my case) are not displayed correctly. See for https://i.imgur.com/XJRziHA.jpg

Here are some custom CSS changes I had to make <u>in my case</u>:
a) The text color for the days of the week is white (#FFFFFF) in my case. So of course you can’t see the days of the week on a white background. This is probably reflecting the text color selected for the “search-box”. I changed the font color for the days of the week to “#385c94” and set the “font-weight” to “bold”.

b) I changed the background color of the “Selected-Day Container” to “#385c94”.

c) I changed the font color of the date number in the “Selected-Day Container” to “#FFFFFF” and I set the “font-weight” to “bold”.

I fixed the display errors with some custom CSS, but I think it would make sense to offer the user some additional CSS settings for the pop-up calendar as well.

/* Booking.com - Calendar - CSS Tweaking - 04.02.2022 */
#b_calendarPopup {
  z-index: 100;
}
.b_calendarInner, .bos_calendar_month, .bos_calendar__row, #flexi_searchbox .bos_month_wrapper select, .b_calFuture a, .b_calClose a {
  color: #385c94 !important;
  opacity: inherit; /* For Google Chrome */
}
.bos_calendar_day-name, .b_calClose a, .bos-calendar__dates .bos-calendar__date--b_calSelected a {
  font-weight: bold;
}
.bos-calendar__dates .bos-calendar__date--b_calSelected {
  background-color: #385c94
}
.bos-calendar__dates .bos-calendar__date--b_calSelected a  {
  color: #ffffff !important;
}

See the result: https://i.imgur.com/XyaQRMh.jpg

Finally, I would like to point out that the selection of a small font in the pop-up calendar is more suitable for mobile devices. For desktops, the small font is not so good.

#flexi_searchbox {
   font: small/1.2 Arial,Helvetica,sans-serif;
     font-weight: normal;
     font-size: small;
     line height: 1.2;
     font-family: Arial, Helvetica, sans-serif;

I would suggest that the small font in the CSS file “bos_searchbox.css” is better offloaded into a media query for mobile devices and a normal font size is used for desktop computers.

I haven’t added this change to my custom CSS code yet!

Sorry – I know these are a lot of suggested changes/requests. But I think that even users who have no knowledge of CSS should be able to influence the display of the pop-up calendar in an uncomplicated way with additional CSS settings.

Best regards