Add workaround for datetime-local input in firefox (#39261)

(cherry picked from commit 5638bc3)

airflow/www/static/js/cluster-activity/nav/FilterBar.tsx

@@ -19,7 +19,7 @@
 
 /* global moment */
 
-import { Box, Button, Flex, Input, Text } from "@chakra-ui/react";
+import { Box, Button, Flex, Text } from "@chakra-ui/react";
 import React from "react";
 
 import { useTimezone } from "src/context/timezone";
@@ -29,6 +29,7 @@ import {
  getDuration,
 } from "src/datetime_utils";
 import useFilters from "src/cluster-activity/useFilters";
+import DateTimeInput from "src/components/DateTimeInput";
 
 const FilterBar = () => {
  const { filters, onStartDateChange, onEndDateChange, clearFilters } =
@@ -61,9 +62,8 @@ const FilterBar = () => {
  <Text fontSize="sm" as="b" position="absolute" mt="-14px" ml={1}>
  Start Date
  </Text>
- <Input
+ <DateTimeInput
  {...inputStyles}
- type="datetime-local"
  value={formattedStartDate || ""}
  onChange={(e) => onStartDateChange(e.target.value)}
  />
@@ -72,9 +72,8 @@ const FilterBar = () => {
  <Text fontSize="sm" as="b" position="absolute" mt="-14px" ml={1}>
  End Date
  </Text>
- <Input
+ <DateTimeInput
  {...inputStyles}
- type="datetime-local"
  value={formattedEndDate || ""}
  onChange={(e) => onEndDateChange(e.target.value)}
  />

airflow/www/static/js/components/DateTimeInput.tsx

@@ -0,0 +1,84 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+/* global moment */
+
+import React from "react";
+import { Flex, Input, InputProps } from "@chakra-ui/react";
+
+const DateTimeInput = (props: InputProps) => {
+ // Firefox and safari do not support datetime-local so we need to put a date and time input next to each other
+ const userAgent = navigator.userAgent.toLowerCase();
+ const unsupportedBrowser =
+ userAgent.includes("firefox") || userAgent.includes("safari");
+
+ if (!unsupportedBrowser) return <Input type="datetime-local" {...props} />;
+
+ const { value, onChange, ...rest } = props;
+ // @ts-ignore
+ let datetime = moment(value as string);
+ // @ts-ignore
+ datetime = datetime.isValid() ? datetime : moment();
+ // @ts-ignore
+ const date = moment(datetime).format("YYYY-MM-DD");
+ // @ts-ignore
+ const time = moment(datetime).format("HH:mm:ss");
+ return (
+ <Flex>
+ <Input
+ type="date"
+ value={date}
+ onChange={(e) => {
+ if (onChange)
+ onChange({
+ ...e,
+ target: {
+ ...e.target,
+ value: `${e.target.value}T${time}`,
+ },
+ });
+ }}
+ {...rest}
+ borderRightWidth={0}
+ borderRightRadius={0}
+ paddingInlineEnd={0}
+ />
+ <Input
+ type="time"
+ value={time}
+ onChange={(e) => {
+ if (onChange)
+ onChange({
+ ...e,
+ target: {
+ ...e.target,
+ value: `${date}T${e.target.value}`,
+ },
+ });
+ }}
+ {...rest}
+ borderLeftWidth={0}
+ borderLeftRadius={0}
+ paddingInlineStart={0}
+ />
+ </Flex>
+ );
+};
+
+export default DateTimeInput;

airflow/www/static/js/dag/nav/FilterBar.tsx

@@ -19,7 +19,7 @@
 
 /* global moment */
 
-import { Box, Button, Flex, Input, Select } from "@chakra-ui/react";
+import { Box, Button, Flex, Select } from "@chakra-ui/react";
 import MultiSelect from "src/components/MultiSelect";
 import React from "react";
 import type { DagRun, RunState, TaskState } from "src/types";
@@ -30,6 +30,7 @@ import { useChakraSelectProps } from "chakra-react-select";
 import { useTimezone } from "src/context/timezone";
 import { isoFormatWithoutTZ } from "src/datetime_utils";
 import useFilters from "src/dag/useFilters";
+import DateTimeInput from "src/components/DateTimeInput";
 
 declare const filtersOptions: {
  dagStates: RunState[];
@@ -124,9 +125,8 @@ const FilterBar = () => {
  <Flex backgroundColor="blackAlpha.200" p={4} justifyContent="space-between">
  <Flex ml={10}>
  <Box px={2}>
- <Input
+ <DateTimeInput
  {...inputStyles}
- type="datetime-local"
  value={formattedTime || ""}
  onChange={(e) => onBaseDateChange(e.target.value)}
  {...(isBaseDateDefault ? {} : filteredStyles)}