Skip to content

Commit

Permalink
🐛 To fix #80
Browse files Browse the repository at this point in the history 
To fix locale fallback bug when the absence of window.Intl or window.Intl.DateTimeFormat().resolvedOptions. #80

Signed-off-by: Rong Sen Ng <wes.ngrongsen@gmail.com>
  • Loading branch information
@motss
motss committed Apr 28, 2017
1 parent c3a9363 commit f5a3fae
Show file tree
Hide file tree
Showing 3 changed files with 150 additions and 106 deletions.
42 changes: 33 additions & 9 deletions app-datepicker.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -199,7 +199,7 @@
font-size: 14px;
font-weight: 500;
text-align: center;

@apply(--layout-flex-auto);
@apply(--app-datepicker-nav-month-year);
}
Expand Down Expand Up @@ -591,10 +591,14 @@
type: String,
value: function () {
if (window.Intl) {
return new window.Intl.DateTimeFormat().resolvedOptions().locale;
return (window.Intl
&& window.Intl.DateTimeFormat
&& window.Intl.DateTimeFormat().resolvedOptions
&& window.Intl.DateTimeFormat().resolvedOptions().locale)
|| 'en-US';
}

return 'en';
return 'en-US';
}
},
/**
Expand Down Expand Up @@ -909,7 +913,11 @@
}

// Set up Intl.
_locale = _locale || window.Intl.DateTimeFormat().resolvedOptions().locale;
_locale = _locale || ((window.Intl
&& window.Intl.DateTimeFormat
&& window.Intl.DateTimeFormat().resolvedOptions
&& window.Intl.DateTimeFormat().resolvedOptions().locale)
|| 'en-US');
var _formatter = new window.Intl.DateTimeFormat(_locale, {
day: 'numeric'
}).format;
Expand Down Expand Up @@ -986,7 +994,11 @@
// Re-compute active month year if new date is selected.
_computeActiveMonthYear: function (_activeYear, _activeMonth, _locale) {
if (window.Intl) {
_locale = _locale || window.Intl.DateTimeFormat().resolvedOptions().locale;
_locale = _locale || ((window.Intl
&& window.Intl.DateTimeFormat
&& window.Intl.DateTimeFormat().resolvedOptions
&& window.Intl.DateTimeFormat().resolvedOptions().locale)
|| 'en-US');
var _amy = new window.Intl.DateTimeFormat(_locale, {
month: 'short',
year: 'numeric'
Expand All @@ -997,7 +1009,11 @@
// Re-compute short version of full date to show on the picker.
_computeShortSelectedDate: function (_selectedYear, _selectedMonth, _selectedDate, _locale) {
if (window.Intl) {
_locale = _locale || window.Intl.DateTimeFormat().resolvedOptions().locale;
_locale = _locale || ((window.Intl
&& window.Intl.DateTimeFormat
&& window.Intl.DateTimeFormat().resolvedOptions
&& window.Intl.DateTimeFormat().resolvedOptions().locale)
|| 'en-US');
var _ssd = new window.Intl.DateTimeFormat(_locale, {
weekday: 'short',
month: 'short',
Expand All @@ -1015,7 +1031,11 @@
},
_computeShowSelectedYear: function (_selectedYear, _locale) {
if (window.Intl) {
_locale = _locale || window.Intl.DateTimeFormat().resolvedOptions().locale;
_locale = _locale || ((window.Intl
&& window.Intl.DateTimeFormat
&& window.Intl.DateTimeFormat().resolvedOptions
&& window.Intl.DateTimeFormat().resolvedOptions().locale)
|| 'en-US');
var _ssy = new window.Intl.DateTimeFormat(_locale, {
year: 'numeric'
}).format(new Date(_selectedYear, 0, 1));
Expand Down Expand Up @@ -1312,7 +1332,7 @@
_finalFormatted = _finalFormatted.replace(_format.y, _formattedYear);
_finalFormatted = _finalFormatted.replace(_format.m, _formattedMonth);
_finalFormatted = _finalFormatted.replace(_format.d, _formattedDate);

return _finalFormatted;
},
// method for content tag (eg. buttons).
Expand Down Expand Up @@ -1346,7 +1366,11 @@
var _longDate = new Date(this._selectedYear, this._selectedMonth, _selectedDate);

if (_showLongDate) {
_locale = _locale || window.Intl.DateTimeFormat().resolvedOptions().locale;
_locale = _locale || ((window.Intl
&& window.Intl.DateTimeFormat
&& window.Intl.DateTimeFormat().resolvedOptions
&& window.Intl.DateTimeFormat().resolvedOptions().locale)
|| 'en-US');
var _options = {
weekday: this.showLongDate ? 'short' : undefined,
year: 'numeric',
Expand Down
6 changes: 1 addition & 5 deletions demo/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -396,10 +396,6 @@ <h4>Datepicker dialog w/o any animation and transition</h4>
});
}

(function () {

})();

if (window.fetch) {
_loadLocales('locales.json');
}else {
Expand Down Expand Up @@ -497,4 +493,4 @@ <h4>Datepicker dialog w/o any animation and transition</h4>
ga('send', 'pageview');
</script>
</body>
</html>
</html>
208 changes: 116 additions & 92 deletions test/app-datepicker-test.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -270,27 +270,27 @@
"yyyy/mmmm/do",
"yyyy/mmmm/dd",
"yyyy/mmmm/d",

"yyyy/mmm/do",
"yyyy/mmm/dd",
"yyyy/mmm/d",

"yyyy/mm/do",
"yyyy/mm/dd",
"yyyy/mm/d",

"yyyy/m/do",
"yyyy/m/dd",
"yyyy/m/d",

"yy/mmmm/do",
"yy/mmmm/dd",
"yy/mmmm/d",

"yy/mmm/do",
"yy/mmm/dd",
"yy/mmm/d",

"yy/mm/do",
"yy/mm/dd",
"yy/mm/d",
Expand All @@ -303,35 +303,35 @@
"2016/January/31st",
"2016/January/31",
"2016/January/31",

"2016/Jan/31st",
"2016/Jan/31",
"2016/Jan/31",

"2016/01/31st",
"2016/01/31",
"2016/01/31",

"2016/1/31st",
"2016/1/31",
"2016/1/31",

"16/January/31st",
"16/January/31",
"16/January/31",

"16/Jan/31st",
"16/Jan/31",
"16/Jan/31",

"16/01/31st",
"16/01/31",
"16/01/31",

"16/1/31st",
"16/1/31",
"16/1/31",
];
];

// Setup datepicker.
datepicker.showLongDate = !1;
Expand All @@ -347,93 +347,117 @@
expect(datepicker.date).to.be.equal(expectedResults[idx]);
});
});
});

it('should produce correct date based on the format with random order of year, month, date', function () {
var testFormats = [
"do/mmmm/yyyy",
"dd/mmmm/yyyy",
"d/mmmm/yyyy",

"mmm/do/yyyy",
"mmm/dd/yyyy",
"mmm/d/yyyy",

"yyyy/mm/do",
"yyyy/mm/dd",
"yyyy/mm/d",

"yyyy/m/do",
"yyyy/m/dd",
"yyyy/m/d",

"yy/mmmm/do",
"yy/mmmm/dd",
"yy/mmmm/d",

"mmm/yy/do",
"mmm/yy/dd",
"mmm/yy/d",

"yy/mm/do",
"yy/mm/dd",
"yy/mm/d",

"yy/m/do",
"yy/m/dd",
"yy/m/d",
];
var expectedResults = [
"31st/January/2016",
"31/January/2016",
"31/January/2016",

"Jan/31st/2016",
"Jan/31/2016",
"Jan/31/2016",

"2016/01/31st",
"2016/01/31",
"2016/01/31",

"2016/1/31st",
"2016/1/31",
"2016/1/31",

"16/January/31st",
"16/January/31",
"16/January/31",

"Jan/16/31st",
"Jan/16/31",
"Jan/16/31",

"16/01/31st",
"16/01/31",
"16/01/31",

"16/1/31st",
"16/1/31",
"16/1/31",
];

// Setup datepicker.
datepicker.showLongDate = !1;
datepicker.autoUdpateDate = !0;
datepicker.inputDate = '2016/01/31';
datepicker.locale = 'en-US';

// Start inputting the formats.
testFormats.forEach(function (format, idx) {
datepicker.format = format;
datepicker.enforceDateChange();
it('should produce correct date based on the format with random order of year, month, date', function () {
var testFormats = [
"do/mmmm/yyyy",
"dd/mmmm/yyyy",
"d/mmmm/yyyy",

"mmm/do/yyyy",
"mmm/dd/yyyy",
"mmm/d/yyyy",

"yyyy/mm/do",
"yyyy/mm/dd",
"yyyy/mm/d",

"yyyy/m/do",
"yyyy/m/dd",
"yyyy/m/d",

"yy/mmmm/do",
"yy/mmmm/dd",
"yy/mmmm/d",

"mmm/yy/do",
"mmm/yy/dd",
"mmm/yy/d",

"yy/mm/do",
"yy/mm/dd",
"yy/mm/d",

"yy/m/do",
"yy/m/dd",
"yy/m/d",
];
var expectedResults = [
"31st/January/2016",
"31/January/2016",
"31/January/2016",

"Jan/31st/2016",
"Jan/31/2016",
"Jan/31/2016",

"2016/01/31st",
"2016/01/31",
"2016/01/31",

expect(datepicker.date).to.be.equal(expectedResults[idx]);
"2016/1/31st",
"2016/1/31",
"2016/1/31",

"16/January/31st",
"16/January/31",
"16/January/31",

"Jan/16/31st",
"Jan/16/31",
"Jan/16/31",

"16/01/31st",
"16/01/31",
"16/01/31",

"16/1/31st",
"16/1/31",
"16/1/31",
];

// Setup datepicker.
datepicker.showLongDate = !1;
datepicker.autoUdpateDate = !0;
datepicker.inputDate = '2016/01/31';
datepicker.locale = 'en-US';

// Start inputting the formats.
testFormats.forEach(function (format, idx) {
datepicker.format = format;
datepicker.enforceDateChange();

expect(datepicker.date).to.be.equal(expectedResults[idx]);
});
});
});
});

</script>
context('test for absence of window.Intl.DateTimeFormat().resolvedOptions', function () {
it('should fallback to default locale if window.Intl is undefined', function () {
var cachedIntl = window.Intl;

// Override Intl on browser.
window.Intl = null;

expect(datepicker.locale).to.be.equal('en-US');

// Restore Intl.
window.Intl = cachedIntl;
});

it('should fallback to default locale when window.Intl.DateTimeFormat().resolvedOptions is undefined', function () {
var cachedIntl = window.Intl;

// Override Intl on browser.
window.Intl.DateTimeFormat().resolvedOptions = {};

expect(datepicker.locale).to.be.equal('en-US');

// Restore Intl.
window.Intl = cachedIntl;
});
});
</script>
</body>
</html>

0 comments on commit f5a3fae

Please sign in to comment.