Fix DatePicker

[hand-dot]

• Address the issue where the datepicker closes when selecting a time in time or dateTime mode
• Modify the datepicker’s button labels to use i18n.ts (not calender)
  • It felt unnatural to handle multilingual support within the schemas

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

1 Skipped Deployment

Name	Status	Preview	Updated (UTC)
pdfme-playground	⬜️ Ignored (Inspect)		Jan 18, 2025 0:01am

[kyasu1]

Hmm, I think this change broke the buttons' label translation again... They are now following the Lang value, not the locale value, so the result is very weird as shown.

[kyasu1]

Moreover, the datePicker is no longer closing when clicking outside, but we always need to click the Set button. This behavior is very frustrating. This happens in both the Designer and Form modes.

[kyasu1]

Also, since you are specifying 'ja' as the lang value in the following line,

pdfme/playground/src/FormAndViewer.tsx

Line 61 in 2ff80d1

lang: 'ja',

the users will always see the buttons' labels in Japanese in Form mode, regardless of the Lang or Locale values.

I understand that the playground is just an example of how to use this library. However, this inconsistency is very confusing for new users.

[hand-dot]

@kyasu1 Thank you for checking again.

Yes, maybe this playground form move should be able to change lang option.

I guess this makes misleeding.

[hand-dot]

at least we need to sepalete issue playdground and date kind schema.

I will update playground form mode lang option selectable.

[hand-dot]

Update Playground: https://playground.pdfme.com/form-viewer

[kyasu1]

Thank you for the quick update! It looks like it's working well. However, I think the buttons' labels should reflect the Locale value rather than the Lang value. As shown in the next screenshot, the calendar is in Russian, but the buttons are in Thai. This looks very weird.

[hand-dot]

Hmm, I see. Shall we create a translation adapted for the calendar?
If you handle the task, I will review it right away.

[kyasu1]

The following lines are what I suggested first time:

pdfme/packages/schemas/src/date/helper.ts

Lines 76 to 96 in 37a6e1f

	ar: { label: 'Arabic', adLocale: localeAr, close: 'يغلق', formatLocale: dateFns.ar },
	bg: { label: 'Bulgarian', adLocale: localeBg, close: 'близо', formatLocale: dateFns.bg },
	ca: { label: 'Catalan', adLocale: localeCa, close: 'Fermer', formatLocale: dateFns.ca },
	cs: { label: 'Czech', adLocale: localeCs, close: 'Blízko', formatLocale: dateFns.cs },
	da: { label: 'Danish', adLocale: localeDa, close: 'Tæt', formatLocale: dateFns.da },
	de: { label: 'German', adLocale: localeDe, close: 'Schließen', formatLocale: dateFns.de },
	el: { label: 'Greek', adLocale: localeEl, close: 'κοντά', formatLocale: dateFns.el },
	en: { label: 'English', adLocale: localeEn, close: 'Close', formatLocale: dateFns.enUS },
	es: { label: 'Spanish', adLocale: localeEs, close: 'Cerca', formatLocale: dateFns.es },
	eu: { label: 'Basque', adLocale: localeEu, close: 'Itxi', formatLocale: dateFns.eu },
	fi: { label: 'Finnish', adLocale: localeFi, close: 'Lähellä', formatLocale: dateFns.fi },
	fr: { label: 'French', adLocale: localeFr, close: 'Fermer', formatLocale: dateFns.fr },
	hr: { label: 'Croatian', adLocale: localeHr, close: 'Zatvoriti', formatLocale: dateFns.hr },
	hu: { label: 'Hungarian', adLocale: localeHu, close: 'Közeli', formatLocale: dateFns.hu },
	id: { label: 'Indonesian', adLocale: localeId, close: 'Menutup', formatLocale: dateFns.id },
	it: { label: 'Italian', adLocale: localeIt, close: 'Vicino', formatLocale: dateFns.it },
	ja: { label: 'Japanese', adLocale: localeJa, close: '閉じる', formatLocale: dateFns.ja },
	ko: { label: 'Korean', adLocale: localeKo, close: '닫다', formatLocale: dateFns.ko },
	nb: { label: 'Norwegian Bokmål', adLocale: localeNb, close: 'Lukke', formatLocale: dateFns.nb },
	nl: { label: 'Dutch', adLocale: localeNl, close: 'Dichtbij', formatLocale: dateFns.nl },
	pl: { label: 'Polish', adLocale: localePl, close: 'Zamknąć', formatLocale: dateFns.pl },

I think hard coding the translations of buttons here is valid, since they are usable in this schema only which depends on the external module. In this way, change of Lang on UI (Designer / Form) will not affect to the datePicker language. The Lang value should be used only when placing a new component as you implmented. So I suggest not to use i18n in this case and revert to 5.2.13...