imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Prevent future date selection in jump to date (#10419)

Browse source 
You can still type in whatever date you want (native date input behavior) but the UI picker has future dates disabled.

Fix https://github.com/vector-im/element-web/issues/20800
This commit is contained in:
Eric Eastwood 2023-03-22 11:45:44 -05:00 • committed by GitHub
parent 3eb6a55b93
commit ed88e0cdce
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 113 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

15
src/DateUtils.ts
View file

@ -102,6 +102,21 @@ export function formatFullDate(date: Date, showTwelveHour = false, showSeconds =
});
}
/**
* Formats dates to be compatible with attributes of a `<input type="date">`. Dates
* should be formatted like "2020-06-23" (formatted according to ISO8601)
*
* @param date The date to format.
* @returns The date string in ISO8601 format ready to be used with an `<input>`
*/
export function formatDateForInput(date: Date): string {
const year = `${date.getFullYear()}`.padStart(4, "0");
const month = `${date.getMonth() + 1}`.padStart(2, "0");
const day = `${date.getDate()}`.padStart(2, "0");
const dateInputValue = `${year}-${month}-${day}`;
return dateInputValue;
}
export function formatFullTime(date: Date, showTwelveHour = false): string {
if (showTwelveHour) {
return twelveHourTime(date, true);

11
src/components/views/messages/JumpToDatePicker.tsx
View file

@ -19,6 +19,7 @@ import React, { useState, FormEvent } from "react";
import { _t } from "../../../languageHandler";
import Field from "../elements/Field";
import { RovingAccessibleButton, useRovingTabIndex } from "../../../accessibility/RovingTabIndex";
import { formatDateForInput } from "../../../DateUtils";
interface IProps {
ts: number;
@ -27,12 +28,9 @@ interface IProps {
const JumpToDatePicker: React.FC<IProps> = ({ ts, onDatePicked }: IProps) => {
const date = new Date(ts);
const year = date.getFullYear();
const month = `${date.getMonth() + 1}`.padStart(2, "0");
const day = `${date.getDate()}`.padStart(2, "0");
const dateDefaultValue = `${year}-${month}-${day}`;
const dateInputDefaultValue = formatDateForInput(date);
const [dateValue, setDateValue] = useState(dateDefaultValue);
const [dateValue, setDateValue] = useState(dateInputDefaultValue);
const [onFocus, isActive, ref] = useRovingTabIndex<HTMLInputElement>();
const onDateValueInput = (ev: React.ChangeEvent<HTMLInputElement>): void => setDateValue(ev.target.value);
@ -49,6 +47,9 @@ const JumpToDatePicker: React.FC<IProps> = ({ ts, onDatePicked }: IProps) => {
type="date"
onInput={onDateValueInput}
value={dateValue}
// Prevent people from selecting a day in the future (there won't be any
// events there anyway).
max={formatDateForInput(new Date())}
className="mx_JumpToDatePicker_datePicker"
label={_t("Pick a date to jump to")}
onFocus={onFocus}