Inputs with type `date` are not localized

ewenlau commented 7 months ago

The bug

The issue is fairly simple and not very important, it's mostly a QoL. When you set a custom locale in the settings, it doesn't apply to setting birth date to people. As I said, not very important, but I still thought it would be useful to report it and it's probably an easy fix.

The OS that Immich Server is running on

Debian 12.5

Version of Immich Server

v1.101.0

Version of Immich Mobile App

1.101.0

Platform with the issue

[ ] Server
[X] Web
[ ] Mobile

Your docker-compose.yml content

#
# WARNING: Make sure to use the docker-compose.yml of the current release:
#
# https://github.com/immich-app/immich/releases/latest/download/docker-compose.yml
#
# The compose file on main may not be compatible with the latest release.
#

name: immich

services:
  immich-server:
    container_name: immich_server
    image: ghcr.io/immich-app/immich-server:${IMMICH_VERSION:-release}
    command: ['start.sh', 'immich']
    volumes:
      - ${UPLOAD_LOCATION}:/usr/src/app/upload
      - /etc/localtime:/etc/localtime:ro
    env_file:
      - .env
    ports:
      - 2283:3001
    depends_on:
      - redis
      - database
    restart: always

  immich-microservices:
    container_name: immich_microservices
    image: ghcr.io/immich-app/immich-server:${IMMICH_VERSION:-release}
    # extends: # uncomment this section for hardware acceleration - see https://immich.app/docs/features/hardware-transcoding
    #   file: hwaccel.transcoding.yml
    #   service: cpu # set to one of [nvenc, quicksync, rkmpp, vaapi, vaapi-wsl] for accelerated transcoding
    command: ['start.sh', 'microservices']
    volumes:
      - ${UPLOAD_LOCATION}:/usr/src/app/upload
      - /etc/localtime:/etc/localtime:ro
    env_file:
      - .env
    depends_on:
      - redis
      - database
    restart: always

  immich-machine-learning:
    container_name: immich_machine_learning
    # For hardware acceleration, add one of -[armnn, cuda, openvino] to the image tag.
    # Example tag: ${IMMICH_VERSION:-release}-cuda
    image: ghcr.io/immich-app/immich-machine-learning:${IMMICH_VERSION:-release}
    # extends: # uncomment this section for hardware acceleration - see https://immich.app/docs/features/ml-hardware-acceleration
    #   file: hwaccel.ml.yml
    #   service: cpu # set to one of [armnn, cuda, openvino, openvino-wsl] for accelerated inference - use the `-wsl` version for WSL2 where applicable
    volumes:
      - /cache-location:/cache
    env_file:
      - .env
    restart: always

  redis:
    container_name: immich_redis
    image: registry.hub.docker.com/library/redis:6.2-alpine@sha256:51d6c56749a4243096327e3fb964a48ed92254357108449cb6e23999c37773c5
    restart: always

  database:
    container_name: immich_postgres
    image: registry.hub.docker.com/tensorchord/pgvecto-rs:pg14-v0.2.0@sha256:90724186f0a3517cf6914295b5ab410db9ce23190a2d9d0b9dd6463e3fa298f0
    environment:
      POSTGRES_PASSWORD: ${DB_PASSWORD}
      POSTGRES_USER: ${DB_USERNAME}
      POSTGRES_DB: ${DB_DATABASE_NAME}
    volumes:
      - /pg_data_location:/var/lib/postgresql/data
    restart: always

Your .env content

# You can find documentation for all the supported env variables at https://immich.app/docs/install/environment-variables

# The location where your uploaded files are stored
UPLOAD_LOCATION=/upload-location

# The Immich version to use. You can pin this to a specific version like "v1.71.0"
IMMICH_VERSION=release

# Connection secret for postgres. You should change it to a random password
DB_PASSWORD=db-password

# The values below this line do not need to be changed
###################################################################################
DB_HOSTNAME=immich_postgres
DB_USERNAME=postgres
DB_DATABASE_NAME=immich

REDIS_HOSTNAME=immich_redis

Reproduction steps

1. Go to Account Settings then App settings
2. Set your locale to something else than your browser locale
3. Set a birth date on someone

Relevant log output

No response

Additional information

No response

jellemdekker commented 7 months ago

The component for setting a person's birth date uses the custom <DateInput> element, which relies on a normal HTML Date Input.

As far as I can tell, the following still applies:

You can assign a language to the input date type by changing the language of the page or the item itself [...].

However, that will not change the display language of the calendar shown, because that calendar element is a browser UI element, and the overwhelming majority of browsers only natively display one language at a time. Even Firefox, which supports multiple language packs, only uses the primary one chosen at any one time, and it's that UI language which it will show the input date picker with.

The good news is that your users will already see the date picker in their browser's language, no matter how obscure the language.

So there would have to be a switch to a non-native datepicker like:

the Single Date example of @svelte-plugins/datepicker,
date-picker-svelte (demo)
some other localized component

WhiteWoodenWall commented 3 months ago

The same happens for changing the date/time of photos. I have my custom locale set to Japanese, which shows up correctly when viewing a photo, but reverts to American English format when trying to edit the date.

When viewing an image.

When changing the date. (The suggested timezone also isn't the same Asia/Tokyo of the server, but close)

immich-app / immich