Skip to content

Commit

Permalink
[DO NOT MERGE JUST YET] Working on crushing bugs~ (#66)
Browse files Browse the repository at this point in the history 
* 🦄 Fixed #55 where _selectedDate is not being updated on date selected

* 🦄 Fixed #62 to add more entry points to style vanilla datepicker

* 💢 Fixed wrong weekdays

* 🦄 To fix #53, #54 and added test for random format

:unicorn: Fixed #55 where _selectedDate is not being updated on date selected
  • Loading branch information
@motss
motss committed Nov 5, 2016
1 parent a63684a commit d1b80ba
Show file tree
Hide file tree
Showing 2 changed files with 227 additions and 28 deletions.
86 changes: 58 additions & 28 deletions app-datepicker.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,15 +108,17 @@
<template strip-whitespace>
<style>
:host {
user-select: none;
display: block;
position: relative;
box-sizing: border-box;

-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
box-sizing: border-box;

user-select: none;
background: var(--app-datepicker-bg, #fafafa);

@apply(--app-datepicker);
display: block;
}

* {
Expand All @@ -129,6 +131,7 @@
width: 300px;
height: 384px;
max-height: 384px;

@apply(--layout-vertical);
}
div.datepicker.with-buttons {
Expand All @@ -142,6 +145,7 @@
padding: 8px 16px;
color: var(--app-datepicker-selection-color, #b2dfdb);
background-color: var(--app-datepicker-selection-bg, #009688);

@apply(--layout-vertical);
}
div.selected-year.iron-selected,
Expand All @@ -152,6 +156,7 @@
font-size: 14px;
font-weight: 800;
height: 34px;

@apply(--layout-horizontal);
@apply(--layout-center);
@apply(--app-datepicker-selected-year);
Expand All @@ -160,6 +165,7 @@
font-size: 32px;
font-weight: 800;
/*height: 34px;*/

@apply(--layout-horizontal);
@apply(--layout-center);
@apply(--layout-flex-auto);
Expand All @@ -176,20 +182,23 @@
overflow: hidden;
color: var(--app-datepicker-calendar-color, #000);
background-color: var(--app-datepicker-calendar-bg, #fafafa);

@apply(--layout-vertical);
}
div.navigator {
max-height: 46px;
padding: 3px 10px;
position: relative;
margin-top: 8px;

@apply(--layout-horizontal);
@apply(--layout-center-center);
}
div.nav-month-year {
font-size: 14px;
font-weight: 500;
text-align: center;

@apply(--layout-flex-auto);
@apply(--app-datepicker-nav-month-year);
}
Expand Down Expand Up @@ -302,9 +311,11 @@
cursor: pointer;
}
div.each-list-of-years.is-selected {
color: #009688;
font-size: 24px;
font-weight: 700;
color: var(--app-datepicker-selected-year-color, #009688);
background-color: var(--app-datepicker-selected-year-bg);

@apply(--app-datepicker-selected-each-list-of-years);
}

Expand Down Expand Up @@ -568,7 +579,7 @@
is: 'app-datepicker',

behaviors: [
Polymer.NeonAnimationRunnerBehavior
Polymer.NeonAnimationRunnerBehavior,
],

properties: {
Expand Down Expand Up @@ -783,7 +794,7 @@
'_updateDatepickerView(view)',
'_computeDaysOfWeek(firstDayOfWeek, locale)',
'_computeActiveMonthYear(_activeYear, _activeMonth, locale)',
'_computeShortSelectedDate(_selectedMonth, _selectedDate, locale)',
'_computeShortSelectedDate(_selectedYear, _selectedMonth, _selectedDate, locale)',
'_computeShowSelectedYear(_selectedYear, locale)',
'_computeShiftedDisableDays(firstDayOfWeek, disableDays.*)',
],
Expand Down Expand Up @@ -983,14 +994,14 @@
}
},
// Re-compute short version of full date to show on the picker.
_computeShortSelectedDate: function (_selectedMonth, _selectedDate, _locale) {
_computeShortSelectedDate: function (_selectedYear, _selectedMonth, _selectedDate, _locale) {
if (window.Intl) {
_locale = _locale || window.Intl.DateTimeFormat().resolvedOptions().locale;
var _ssd = new window.Intl.DateTimeFormat(_locale, {
weekday: 'short',
month: 'short',
day: 'numeric'
}).format(new Date(this._selectedYear, _selectedMonth, _selectedDate));
}).format(new Date(_selectedYear, _selectedMonth, _selectedDate));
this.set('_shortSelectedDate', _ssd);

// When datepicker has no button for date confirmation,
Expand Down Expand Up @@ -1024,8 +1035,8 @@
// This will trigger _isChosenDaysOfMonth to recompute style.
this.set('_chosenDaysOfMonth', _target.index);

this.set('_selectedDate', _target.date);
this.set('_selectedYear', this._activeYear);
this.set('_selectedDate', _target.date);
this.set('_selectedMonth', this._activeMonth);
}
},
Expand Down Expand Up @@ -1106,17 +1117,21 @@
_dow = [];
var _today = new Date();
var _offsetDate = _today.getDate() - _today.getDay();
var _formatter = new window.Intl.DateTimeFormat(_locale, {
weekday: 'narrow'
}).format;
var newDate = null;

for (var i = 0; i < 7; i++) {
var _formatter = new window.Intl.DateTimeFormat(_locale, {
weekday: 'narrow'
}).format;
_dow.push(_formatter(new Date(_today.getFullYear(), _today.getMonth(), _offsetDate + i)));
newDate = new Date(_today.getFullYear(), _today.getMonth(), _offsetDate + i);
_dow.push(_formatter(newDate));
}
}

var _sliced = _dow.slice(_firstDayOfWeek);
var _rest = _dow.slice(0, _firstDayOfWeek);
var _concatted = Array.prototype.concat(_sliced, _rest);

this.set('_daysOfWeek', _concatted);
},
// Re-compute the index of the selected date when a new date is selected
Expand Down Expand Up @@ -1227,19 +1242,33 @@

// split capturing group of format into year, month and date.
_computeSeparateFormat: function (_format) {
var re = /(yyyy|yy)[^a-zA-Z0-9]+(mmmm|mmm|mm|m)[^a-zA-Z0-9]+(do|dd|d)/i;
var sym = /\w+([^a-zA-Z0-9]+)\w+([^a-zA-Z0-9]+)\w+/i;
var re = /^(yyyy|yy|m{1,4}|d{1,2}|do)\W+(yyyy|yy|m{1,4}|d{1,2}|do)\W+(yyyy|yy|m{1,4}|d{1,2}|do)$/g;
var m = re.exec(_format);
var n = sym.exec(_format);
var _temp = {};
if (m !== null && n !== null) {
_temp.y = m[1];
_temp.m = m[2];
_temp.d = m[3];
_temp.s1 = n[1];
_temp.s2 = n[2];
var _tempArr = [];
if (m !== null) {
_tempArr.push(m[1]);
_tempArr.push(m[2]);
_tempArr.push(m[3]);

for (var i = 0, matched; i < 3; i++) {
matched = _tempArr[i];

if (matched.indexOf('y') >= 0) {
_temp.y = matched;
} else if (matched.indexOf('m') >= 0) {
_temp.m = matched;
} else if (matched.indexOf('d') >= 0) {
_temp.d = matched;
}
}
}
this.set('_format', _temp);

// Only set _format if the new format is valid.
if ('d' in _temp && 'm' in _temp && 'y' in _temp) {
this.set('_format', _temp);
}

_temp = null;
},

Expand All @@ -1253,7 +1282,7 @@
var _formattedYear = _selectedYear;
var _formattedMonth = this._monthNames[_selectedMonth];
var _formattedDate = _selectedDate;
var _finalFormatted = '';
var _finalFormatted = this.format;
// compute new formatted year.
if (_format.y === 'yy') {
_formattedYear = _selectedYear%100;
Expand All @@ -1279,9 +1308,10 @@
_formattedDate = this._padStart(_formattedDate, 2, '0');
}
// set formatted value with user defined symbols.
_finalFormatted = _formattedYear + _format.s1 +
_formattedMonth + _format.s2 + _formattedDate;

_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
Loading

0 comments on commit d1b80ba

Please sign in to comment.