palantir/blueprint

Will TimePicker support locale representations?

Open

#6450 opened on Oct 9, 2023

View on GitHub
 (3 comments) (1 reaction) (0 assignees)TypeScript (20,263 stars) (2,167 forks)batch import
P2Package: datetimeType: feature requestType: questionhelp wanted

Description

Environment

  • Package version(s): @blueprint/datetime: v5.2.2
  • Browser and OS versions: Chrome Version 117.0.5938.149 + macOs Ventura 13.5.2

Question

Hi, we are using the TimePicker component. We want to show the time in UTC, but it is not possible (without doing some hacky transformation) because internally, the component uses these functions: getHours, getMinutes, getSeconds. All of them are representations using the local time.

For example, we have this: "2023-09-09T09:43:06.206Z", and we want to represent the UTC time, but it is impossible because TimePicker will always show the local time representation.

I would like to ask two things:

  1. Is this correct? Or am I missing something?
  2. I have seen that the date time package is being improved to support local times. Is TimePicker going to be improved with this functionality?

Thank you very much!

Our hack Using the functions available in timeZoneUtils, we managed to transform the date like this:

const dateToTransform = "2023-09-09T09:43:06.206Z"
const transformedDate = TimezoneUtils.convertLocalDateToTimezoneTime(
    new Date(dateToTransform),
    "Etc/UTC
);

console.log(transformedDate.toISOString()); // "2023-09-09T07:43:06.206Z"

We also needed to transform it with convertDateToLocalEquivalentOfTimezoneTime in the onChange method.

Contributor guide

Tech stack
typescriptreact
Domain
frontend
Issue type
feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-2 days
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
needs maintainer response
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
ReactTypeScriptJavaScript Date APIsBlueprint datetime package
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
40
Research direction
Examine the TimePicker component in packages/datetime/src/components/time picker/timePicker.tsx, specifically the getHours, getMinutes, getSeconds functions. Review the timezoneUtils in packages/datetime/src/common/timezoneUtils.ts to understand existing timezone conversion utilities. Consider adding a timezone prop to TimePicker that defaults to local time and allows UTC or other timezones. Check for any existing discussion in the issue comments about maintainers' thoughts. Ensure to update tests accordingly.