starred/WYGIWYH
1
0
Fork 0
mirror of https://github.com/eitchtee/WYGIWYH.git synced 2026-04-25 10:08:36 +02:00
Code Issues 14 Packages Projects Releases 10 Wiki Activity

feat: allow loading any available datepicker languages

Browse Source 
instead of a pre-configured list
This commit is contained in:
Herculino Trotta
2025-06-29 14:40:41 -03:00
parent 858934b7c5
commit 60d367dec5
2 changed files with 24 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/apps/common/widgets/datepicker.py
View File

@@ -37,7 +37,9 @@ class AirDatePickerInput(widgets.DateInput):
def _get_current_language(): def _get_current_language():
"""Get current language code in format compatible with AirDatepicker""" """Get current language code in format compatible with AirDatepicker"""
lang_code = translation.get_language() lang_code = translation.get_language()
# AirDatepicker uses simple language codes # AirDatepicker uses simple language codes, except for pt-br
if lang_code.lower() == "pt-br":
return "pt-BR"
return lang_code.split("-")[0] return lang_code.split("-")[0]
def _get_format(self): def _get_format(self):

36
frontend/src/application/datepicker.js
View File

@@ -1,15 +1,21 @@
import AirDatepicker from 'air-datepicker'; import AirDatepicker from 'air-datepicker';
import en from 'air-datepicker/locale/en';
import ptBr from 'air-datepicker/locale/pt-BR';
import nl from 'air-datepicker/locale/nl';
import de from 'air-datepicker/locale/de';
import {createPopper} from '@popperjs/core'; import {createPopper} from '@popperjs/core';
const locales = { /**
'pt': ptBr, * Dynamically imports a language file from the locale folder.
'en': en, *
'nl': nl, * @param {string} langCode - The two-letter language code (e.g., 'en', 'es').
'de': de * @returns {Promise<object>} A promise that resolves with the default export of the language file.
*/
export const getLocale = async (langCode) => {
try {
const localeModule = await import(`air-datepicker/locale/${langCode}.js`);
return localeModule.default;
} catch (error) {
console.warn(`Could not find locale for '${langCode}'. Defaulting to English.`);
const englishModule = await import('air-datepicker/locale/en.js');
return englishModule.default;
}
}; };
function isMobileDevice() { function isMobileDevice() {
@@ -25,7 +31,7 @@ function isMobile() {
return isMobileDevice() || isTouchDevice(); return isMobileDevice() || isTouchDevice();
} }
window.DatePicker = function createDynamicDatePicker(element) { window.DatePicker = async function createDynamicDatePicker(element) {
let todayButton = { let todayButton = {
content: element.dataset.nowButtonTxt, content: element.dataset.nowButtonTxt,
onClick: (dp) => { onClick: (dp) => {
@@ -45,7 +51,7 @@ window.DatePicker = function createDynamicDatePicker(element) {
toggleSelected: element.dataset.toggleSelected === 'true', toggleSelected: element.dataset.toggleSelected === 'true',
autoClose: element.dataset.autoClose === 'true', autoClose: element.dataset.autoClose === 'true',
buttons: element.dataset.clearButton === 'true' ? ['clear', todayButton] : [todayButton], buttons: element.dataset.clearButton === 'true' ? ['clear', todayButton] : [todayButton],
locale: locales[element.dataset.language] || locales['en'], locale: await getLocale(element.dataset.language),
onSelect: ({date, formattedDate, datepicker}) => { onSelect: ({date, formattedDate, datepicker}) => {
const _event = new CustomEvent("change", { const _event = new CustomEvent("change", {
bubbles: true, bubbles: true,
@@ -99,7 +105,7 @@ window.DatePicker = function createDynamicDatePicker(element) {
return new AirDatepicker(element, opts); return new AirDatepicker(element, opts);
}; };
window.MonthYearPicker = function createDynamicDatePicker(element) { window.MonthYearPicker = async function createDynamicDatePicker(element) {
let todayButton = { let todayButton = {
content: element.dataset.nowButtonTxt, content: element.dataset.nowButtonTxt,
onClick: (dp) => { onClick: (dp) => {
@@ -119,7 +125,7 @@ window.MonthYearPicker = function createDynamicDatePicker(element) {
toggleSelected: element.dataset.toggleSelected === 'true', toggleSelected: element.dataset.toggleSelected === 'true',
autoClose: element.dataset.autoClose === 'true', autoClose: element.dataset.autoClose === 'true',
buttons: element.dataset.clearButton === 'true' ? ['clear', todayButton] : [todayButton], buttons: element.dataset.clearButton === 'true' ? ['clear', todayButton] : [todayButton],
locale: locales[element.dataset.language] || locales['en'], locale: await getLocale(element.dataset.language),
onSelect: ({date, formattedDate, datepicker}) => { onSelect: ({date, formattedDate, datepicker}) => {
const _event = new CustomEvent("change", { const _event = new CustomEvent("change", {
bubbles: true, bubbles: true,
@@ -172,7 +178,7 @@ window.MonthYearPicker = function createDynamicDatePicker(element) {
return new AirDatepicker(element, opts); return new AirDatepicker(element, opts);
}; };
window.YearPicker = function createDynamicDatePicker(element) { window.YearPicker = async function createDynamicDatePicker(element) {
let todayButton = { let todayButton = {
content: element.dataset.nowButtonTxt, content: element.dataset.nowButtonTxt,
onClick: (dp) => { onClick: (dp) => {
@@ -192,7 +198,7 @@ window.YearPicker = function createDynamicDatePicker(element) {
toggleSelected: element.dataset.toggleSelected === 'true', toggleSelected: element.dataset.toggleSelected === 'true',
autoClose: element.dataset.autoClose === 'true', autoClose: element.dataset.autoClose === 'true',
buttons: element.dataset.clearButton === 'true' ? ['clear', todayButton] : [todayButton], buttons: element.dataset.clearButton === 'true' ? ['clear', todayButton] : [todayButton],
locale: locales[element.dataset.language] || locales['en'], locale: await getLocale(element.dataset.language),
onSelect: ({date, formattedDate, datepicker}) => { onSelect: ({date, formattedDate, datepicker}) => {
const _event = new CustomEvent("change", { const _event = new CustomEvent("change", {
bubbles: true, bubbles: true,