jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ui: autodetect us datetime format for search

Browse source
This commit is contained in:
nick-delirium 2024-10-25 11:05:29 +02:00
parent 7a6e11e936
commit 6628c204b5
No known key found for this signature in database
GPG key ID: 93ABD695DF5FDBA0
4 changed files with 17 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
frontend/app/components/shared/DateRangeDropdown/DateRangePopup.tsx
View file

@ -53,6 +53,7 @@ function DateRangePopup(props: any) {
};
const { onCancel } = props;
const isUSLocale = navigator.language === 'en-US' || navigator.language.startsWith('en-US');
const rangeForDisplay = [range.start!.startOf('day').ts, range.end!.startOf('day').ts]
return (
<div className={styles.wrapper}>
@ -70,7 +71,7 @@ function DateRangePopup(props: any) {
</div>
))}
</div>
<div className="flex justify-center h-fit dateRangeContainer">
<div className="flex justify-center h-fit w-full items-center dateRangeContainer">
<DateRangePicker
name="dateRangePicker"
// onSelect={this.selectCustomRange} -> onChange
@ -89,24 +90,24 @@ function DateRangePopup(props: any) {
<div className="flex items-center justify-between py-2 px-3">
<div className="flex items-center gap-2">
<label>From: </label>
<span>{range.start.toFormat("dd/MM")} </span>
<span>{range.start.toFormat(isUSLocale ? "MM/dd" : "dd/MM")} </span>
<TimePicker
format={"HH:mm"}
format={isUSLocale ? 'hh:mm a' : "HH:mm"}
value={range.start}
className="w-24"
onChange={setRangeTimeStart}
needConfirm={false}
showNow={false}
style={{ width: isUSLocale ? 102 : 76 }}
/>
<label>To: </label>
<span>{range.end.toFormat("dd/MM")} </span>
<span>{range.end.toFormat(isUSLocale ? "MM/dd" : "dd/MM")} </span>
<TimePicker
format={"HH:mm"}
format={isUSLocale ? 'hh:mm a' : "HH:mm"}
value={range.end}
onChange={setRangeTimeEnd}
className="w-24"
needConfirm={false}
showNow={false}
style={{ width: isUSLocale ? 102 : 76 }}
/>
</div>
<div className="flex items-center">

4
frontend/app/components/shared/DateRangeDropdown/ReactCalendar.css
View file

@ -152,4 +152,8 @@
.react-calendar--selectRange .react-calendar__tile--hover {
background-color: #e6e6e6;
}
.ant-picker-input > input:focus {
border: 0!important;
}

2
frontend/app/components/shared/DateRangeDropdown/dateRangePopup.module.css
View file

@ -11,7 +11,7 @@
}
.preSelections {
width: 130px;
min-width: 112px;
background-color: white;
border-right: solid thin #EEE;
& > div {

7
frontend/app/components/shared/SelectDateRange/SelectDateRange.tsx
View file

@ -55,7 +55,8 @@ function SelectDateRange(props: Props) {
};
const isCustomRange = period.rangeName === CUSTOM_RANGE;
const customRange = isCustomRange ? period.rangeFormatted() : '';
const isUSLocale = navigator.language === 'en-US' || navigator.language.startsWith('en-US');
const customRange = isCustomRange ? period.rangeFormatted(isUSLocale ? "MMM dd yyyy, hh:mm a" : "MMM dd yyyy, HH:mm") : '';
if (props.isAnt) {
const menuProps = {
@ -106,7 +107,7 @@ function SelectDateRange(props: Props) {
<div
className={cn('absolute top-0 mt-10 z-40', { 'right-0': right })}
style={{
width: '520px',
width: isUSLocale ? '542px' : '500px',
fontSize: '14px',
textAlign: 'left',
}}
@ -164,7 +165,7 @@ function SelectDateRange(props: Props) {
<div
className={cn('absolute top-0 mt-10 z-40', { 'right-0': right })}
style={{
width: '520px',
width: isUSLocale ? '542px' : '520px',
fontSize: '14px',
textAlign: 'left'
}}