Skip to content

Commit 1e90d9a

Browse files
nolimits4webnolimits4web
committed
feat(calendar): year picker as popover
1 parent d2cf190 commit 1e90d9a

File tree

3 files changed

+80
-70
lines changed

3 files changed

+80
-70
lines changed

‎src/core/components/calendar/calendar-class.js‎

Lines changed: 77 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -343,40 +343,12 @@ class Calendar extends Framework7Class {
343343
}
344344

345345
function onYearSelectorClick() {
346-
$el.append(calendar.renderYearPicker());
347-
const $currentEl = $el.find('.calendar-year-picker-item-current');
348-
const $yearPickerEl = $el.find('.calendar-year-picker');
349-
if (!$currentEl || !$currentEl.length) return;
350-
$yearPickerEl.scrollTop(
351-
$currentEl[0].offsetTop -
352-
$yearPickerEl[0].offsetHeight / 2 +
353-
$currentEl[0].offsetHeight / 2,
354-
);
355-
}
356-
357-
function onYearSelectorItemClick() {
358-
const $clickedEl = $(this);
359-
if ($clickedEl.hasClass('calendar-year-picker-item-current')) {
360-
$el.find('.calendar-year-picker').remove();
361-
return;
362-
}
363-
$el
364-
.find('.calendar-year-picker-item-current')
365-
.add($clickedEl)
366-
.toggleClass('calendar-year-picker-item-current');
367-
const year = parseInt($clickedEl.attr('data-year'), 10);
368-
calendar.setYearMonth(year, undefined, 0);
369-
setTimeout(() => {
370-
$el.find('.calendar-year-picker').remove();
371-
}, 200);
346+
calendar.openYearPicker();
372347
}
373348

374349
function onTimeSelectorClick() {
375350
calendar.openTimePicker();
376351
}
377-
function onTimePickerCloseClick() {
378-
calendar.closeTimePicker();
379-
}
380352

381353
const passiveListener =
382354
app.touchEvents.start === 'touchstart' && getSupport().passiveListener
@@ -393,11 +365,9 @@ class Calendar extends Framework7Class {
393365
}
394366
if (calendar.params.yearPicker) {
395367
$el.find('.current-year-value').on('click', onYearSelectorClick);
396-
$el.on('click', '.calendar-year-picker-item', onYearSelectorItemClick);
397368
}
398369
if (calendar.hasTimePicker) {
399370
$el.find('.calendar-time-selector a').on('click', onTimeSelectorClick);
400-
$el.on('click', '.calendar-time-picker-close', onTimePickerCloseClick);
401371
}
402372
// Day clicks
403373
$wrapperEl.on('click', handleDayClick);
@@ -419,11 +389,9 @@ class Calendar extends Framework7Class {
419389
}
420390
if (calendar.params.yearPicker) {
421391
$el.find('.current-year-value').off('click', onYearSelectorClick);
422-
$el.off('click', '.calendar-year-picker-item', onYearSelectorItemClick);
423392
}
424393
if (calendar.hasTimePicker) {
425394
$el.find('.calendar-time-selector a').off('click', onTimeSelectorClick);
426-
$el.off('click', '.calendar-time-picker-close', onTimePickerCloseClick);
427395
}
428396
$wrapperEl.off('click', handleDayClick);
429397
if (calendar.params.touchMove) {
@@ -1466,37 +1434,6 @@ class Calendar extends Framework7Class {
14661434
);
14671435
}
14681436

1469-
renderYearPicker() {
1470-
const calendar = this;
1471-
const currentYear = calendar.currentYear;
1472-
let yearMin = calendar.params.yearPickerMin || new Date().getFullYear() - 100;
1473-
if (calendar.params.minDate) {
1474-
yearMin = Math.max(yearMin, new Date(calendar.params.minDate).getFullYear());
1475-
}
1476-
let yearMax = calendar.params.yearPickerMax || new Date().getFullYear() + 100;
1477-
if (calendar.params.maxDate) {
1478-
yearMax = Math.min(yearMax, new Date(calendar.params.maxDate).getFullYear());
1479-
}
1480-
const years = [];
1481-
for (let i = yearMin; i <= yearMax; i += 1) {
1482-
years.push(i);
1483-
}
1484-
return (
1485-
<div class="calendar-year-picker">
1486-
{years.map((year) => (
1487-
<div
1488-
data-year={year}
1489-
class={`calendar-year-picker-item ${
1490-
year === currentYear ? 'calendar-year-picker-item-current' : ''
1491-
}`}
1492-
>
1493-
<span>{calendar.yearFormatter(new Date().setFullYear(year))}</span>
1494-
</div>
1495-
))}
1496-
</div>
1497-
);
1498-
}
1499-
15001437
// eslint-disable-next-line
15011438
renderTimeSelector() {
15021439
const calendar = this;
@@ -1653,6 +1590,80 @@ class Calendar extends Framework7Class {
16531590
return calendar.renderInline();
16541591
}
16551592

1593+
openYearPicker() {
1594+
const calendar = this;
1595+
const { $el, app } = calendar;
1596+
if (!$el || !$el.length) return;
1597+
1598+
$el.append(
1599+
'<div class="popover calendar-popover calendar-year-picker-popover"><div class="popover-inner"><div class="calendar-year-picker"></div></div></div>',
1600+
);
1601+
1602+
if (calendar.modal) {
1603+
calendar.modal.params.closeByOutsideClick = false;
1604+
}
1605+
1606+
calendar.yearPickerPopover = app.popover.create({
1607+
el: $el.find('.calendar-year-picker-popover'),
1608+
targetEl: $el.find('.calendar-year-selector'),
1609+
backdrop: true,
1610+
backdropUnique: true,
1611+
on: {
1612+
close() {
1613+
calendar.closeYearPicker();
1614+
},
1615+
closed() {
1616+
if (calendar.modal) {
1617+
calendar.modal.params.closeByOutsideClick = true;
1618+
}
1619+
if (calendar.yearPickerPopover.$el) calendar.yearPickerPopover.$el.remove();
1620+
calendar.yearPickerPopover.destroy();
1621+
if (calendar.yearPickerInstance) {
1622+
calendar.yearPickerInstance.close();
1623+
calendar.yearPickerInstance.destroy();
1624+
}
1625+
delete calendar.yearPickerInstance;
1626+
delete calendar.yearPickerPopover;
1627+
},
1628+
},
1629+
});
1630+
calendar.yearPickerPopover.open();
1631+
1632+
const currentYear = calendar.currentYear;
1633+
let yearMin = calendar.params.yearPickerMin || new Date().getFullYear() - 100;
1634+
if (calendar.params.minDate) {
1635+
yearMin = Math.max(yearMin, new Date(calendar.params.minDate).getFullYear());
1636+
}
1637+
let yearMax = calendar.params.yearPickerMax || new Date().getFullYear() + 100;
1638+
if (calendar.params.maxDate) {
1639+
yearMax = Math.min(yearMax, new Date(calendar.params.maxDate).getFullYear());
1640+
}
1641+
const years = [];
1642+
for (let i = yearMin; i <= yearMax; i += 1) {
1643+
years.push(i);
1644+
}
1645+
1646+
calendar.yearPickerInstance = app.picker.create({
1647+
containerEl: calendar.yearPickerPopover.$el.find('.calendar-year-picker'),
1648+
value: [currentYear],
1649+
toolbar: false,
1650+
rotateEffect: false,
1651+
toolbarCloseText: calendar.params.toolbarCloseText,
1652+
cols: [
1653+
{
1654+
values: years,
1655+
},
1656+
],
1657+
});
1658+
}
1659+
1660+
closeYearPicker() {
1661+
const calendar = this;
1662+
if (calendar.yearPickerPopover && calendar.yearPickerPopover.opened)
1663+
calendar.yearPickerPopover.close();
1664+
calendar.setYearMonth(calendar.yearPickerInstance.value[0], undefined, 0);
1665+
}
1666+
16561667
openTimePicker() {
16571668
const calendar = this;
16581669
const { $el, app, is12HoursFormat } = calendar;
@@ -1681,7 +1692,7 @@ class Calendar extends Framework7Class {
16811692
if (value[0] > 12) value[0] -= 12;
16821693
if (value[0] === 0) value[0] = 12;
16831694
}
1684-
if (calendar.isPopover()) {
1695+
if (calendar.modal) {
16851696
calendar.modal.params.closeByOutsideClick = false;
16861697
}
16871698

@@ -1695,7 +1706,7 @@ class Calendar extends Framework7Class {
16951706
calendar.closeTimePicker();
16961707
},
16971708
closed() {
1698-
if (calendar.isPopover()) {
1709+
if (calendar.modal) {
16991710
calendar.modal.params.closeByOutsideClick = true;
17001711
}
17011712
if (calendar.timePickerPopover.$el) calendar.timePickerPopover.$el.remove();

‎src/core/components/calendar/calendar-vars.less‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,6 @@
3737
--f7-calendar-day-text-color: #000;
3838
--f7-calendar-sheet-bg-color: #fff;
3939
--f7-calendar-modal-bg-color: #fff;
40-
--f7-calendar-picker-bg-color: #fff;
4140
--f7-calendar-picker-pressed-bg-color: rgba(0,0,0,0.1);
4241
--f7-calendar-picker-hover-bg-color: rgba(0,0,0,0.03);
4342
--f7-calendar-time-selector-bg-color: rgba(0,0,0,0.05);
@@ -48,7 +47,6 @@
4847
--f7-calendar-sheet-border-color: var(--f7-bars-border-color);
4948
--f7-calendar-modal-bg-color: #121212;
5049
--f7-calendar-sheet-bg-color: #121212;
51-
--f7-calendar-picker-bg-color: #1c1c1d;
5250
--f7-calendar-picker-pressed-bg-color: rgba(255,255,255,0.08);
5351
--f7-calendar-picker-hover-bg-color: rgba(255,255,255,0.03);
5452
--f7-calendar-time-selector-bg-color: rgba(255,255,255,0.1);

‎src/core/components/calendar/calendar.less‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -321,7 +321,6 @@
321321
height: 100%;
322322
left: 0px;
323323
top: 0px;
324-
background: var(--f7-calendar-picker-bg-color);
325324
z-index: 1000;
326325
user-select: none;
327326
background: transparent;
@@ -425,7 +424,9 @@
425424
margin-left: 8px;
426425
}
427426
}
428-
.calendar-time-picker-popover {
427+
.calendar-time-picker-popover,
428+
.calendar-year-picker-popover,
429+
.calendar-month-picker-popover {
429430
height: 240px;
430431
width: 240px;
431432
}

0 commit comments

Comments
 (0)