javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-17 18:54:11 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(datetime): locale inputs are now reactive (#20826)

Browse Source 
fixes #20367
This commit is contained in:
Antoine
2020-04-24 11:29:22 -04:00
committed by GitHub
parent e585a22ac9
commit a75e8f34d6
2 changed files with 32 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
core/src/components/datetime/datetime.tsx
View File

@ -303,6 +303,12 @@ export class Datetime implements ComponentInterface {
private generatePickerOptions(): PickerOptions { private generatePickerOptions(): PickerOptions {
const mode = getIonMode(this); const mode = getIonMode(this);
this.locale = {
monthNames: convertToArrayOfStrings(this.monthNames, 'monthNames'),
monthShortNames: convertToArrayOfStrings(this.monthShortNames, 'monthShortNames'),
dayNames: convertToArrayOfStrings(this.dayNames, 'dayNames'),
dayShortNames: convertToArrayOfStrings(this.dayShortNames, 'dayShortNames')
};
const pickerOptions: PickerOptions = { const pickerOptions: PickerOptions = {
mode, mode,
...this.pickerOptions, ...this.pickerOptions,

26
core/src/components/datetime/test/basic/index.html
View File

@ -94,6 +94,14 @@
<ion-datetime id="customDayShortNames" value="1995-04-15" min="1990-02" max="2000" display-format="DDD. MMM DD, YY" month-short-names="jan, feb, mar, apr, mai, jun, jul, aug, sep, okt, nov, des"></ion-datetime> <ion-datetime id="customDayShortNames" value="1995-04-15" min="1990-02" max="2000" display-format="DDD. MMM DD, YY" month-short-names="jan, feb, mar, apr, mai, jun, jul, aug, sep, okt, nov, des"></ion-datetime>
</ion-item> </ion-item>
<ion-item>
<ion-label>DDD. MMM DD, YY (English/French switch)</ion-label>
<ion-datetime id="customMonthShortNames" value="1995-04-15" min="1990-02" max="2000"
display-format="DDD. MMM DD, YY"></ion-datetime>
<ion-button slot="end" onclick="toggleLanguage()">Language Selected: <span id="selectedLang">en</span>
</ion-button>
</ion-item>
<ion-item> <ion-item>
<ion-label>D MMM YYYY H:mm</ion-label> <ion-label>D MMM YYYY H:mm</ion-label>
<ion-datetime display-format="D MMM YYYY H:mm" min="1997" max="2010" value="2005-06-17T11:06Z"></ion-datetime> <ion-datetime display-format="D MMM YYYY H:mm" min="1997" max="2010" value="2005-06-17T11:06Z"></ion-datetime>
@ -227,6 +235,24 @@
el[prop] = isTrue; el[prop] = isTrue;
console.log('in toggleBoolean, setting', prop, 'to', isTrue); console.log('in toggleBoolean, setting', prop, 'to', isTrue);
} }
var monthShortNamesEnglish = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
var monthShortNamesFrench = ["jan", "fév", "mar", "avr", "mai", "jui", "jui", "aou", "sep", "oct", "nov", "déc"];
var selectedLang = "en";
var customDayShortNames = document.getElementById('customMonthShortNames');
customDayShortNames.monthShortNames = monthShortNamesEnglish;
function toggleLanguage() {
selectedLang = selectedLang === 'en' ? 'fr' : 'en';
var customMonthShortNames = document.getElementById('customMonthShortNames');
var el = document.getElementById('selectedLang');
el.innerText = selectedLang;
if (selectedLang === 'en') { customMonthShortNames.monthShortNames = monthShortNamesEnglish; }
else { customMonthShortNames.monthShortNames = monthShortNamesFrench; }
}
</script> </script>
</ion-app> </ion-app>
</body> </body>