tp-elements/tp-date-picker
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: tp-elements:master
Branches Tags
tp-elements:master
tp-elements:1.0.0
..
compare: tp-elements:1.0.0
Branches Tags
tp-elements:master
tp-elements:1.0.0

No commits in common. "master" and "1.0.0" have entirely different histories.
master ... 1.0.0

3 changed files with 23 additions and 149 deletions
Show Stats Expand all files Collapse all files

86
package-lock.json generated
View File

@ -1,86 +0,0 @@
{
"name": "@tp/tp-date-picker",
"version": "1.0.0",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "@tp/tp-date-picker",
"version": "1.0.0",
"license": "Apache-2.0",
"dependencies": {
"@date-fns/utc": "^2.1.0",
"date-fns": "^4.0.0",
"lit": "^2.2.0"
}
},
"node_modules/@date-fns/utc": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/@date-fns/utc/-/utc-2.1.0.tgz",
"integrity": "sha512-176grgAgU2U303rD2/vcOmNg0kGPbhzckuH1TEP2al7n0AQipZIy9P15usd2TKQCG1g+E1jX/ZVQSzs4sUDwgA==",
"license": "MIT"
},
"node_modules/@lit-labs/ssr-dom-shim": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.2.1.tgz",
"integrity": "sha512-wx4aBmgeGvFmOKucFKY+8VFJSYZxs9poN3SDNQFF6lT6NrQUnHiPB2PWz2sc4ieEcAaYYzN+1uWahEeTq2aRIQ==",
"license": "BSD-3-Clause"
},
"node_modules/@lit/reactive-element": {
"version": "1.6.3",
"resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-1.6.3.tgz",
"integrity": "sha512-QuTgnG52Poic7uM1AN5yJ09QMe0O28e10XzSvWDz02TJiiKee4stsiownEIadWm8nYzyDAyT+gKzUoZmiWQtsQ==",
"license": "BSD-3-Clause",
"dependencies": {
"@lit-labs/ssr-dom-shim": "^1.0.0"
}
},
"node_modules/@types/trusted-types": {
"version": "2.0.7",
"resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
"integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
"license": "MIT"
},
"node_modules/date-fns": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
"integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==",
"license": "MIT",
"funding": {
"type": "github",
"url": "https://github.com/sponsors/kossnocorp"
}
},
"node_modules/lit": {
"version": "2.8.0",
"resolved": "https://registry.npmjs.org/lit/-/lit-2.8.0.tgz",
"integrity": "sha512-4Sc3OFX9QHOJaHbmTMk28SYgVxLN3ePDjg7hofEft2zWlehFL3LiAuapWc4U/kYwMYJSh2hTCPZ6/LIC7ii0MA==",
"license": "BSD-3-Clause",
"dependencies": {
"@lit/reactive-element": "^1.6.0",
"lit-element": "^3.3.0",
"lit-html": "^2.8.0"
}
},
"node_modules/lit-element": {
"version": "3.3.3",
"resolved": "https://registry.npmjs.org/lit-element/-/lit-element-3.3.3.tgz",
"integrity": "sha512-XbeRxmTHubXENkV4h8RIPyr8lXc+Ff28rkcQzw3G6up2xg5E8Zu1IgOWIwBLEQsu3cOVFqdYwiVi0hv0SlpqUA==",
"license": "BSD-3-Clause",
"dependencies": {
"@lit-labs/ssr-dom-shim": "^1.1.0",
"@lit/reactive-element": "^1.3.0",
"lit-html": "^2.8.0"
}
},
"node_modules/lit-html": {
"version": "2.8.0",
"resolved": "https://registry.npmjs.org/lit-html/-/lit-html-2.8.0.tgz",
"integrity": "sha512-o9t+MQM3P4y7M7yNzqAyjp7z+mQGa4NS4CxiyLqFPyFWyc4O+nodLrkrxSaCTrla6M5YOLaT3RpbbqjszB5g3Q==",
"license": "BSD-3-Clause",
"dependencies": {
"@types/trusted-types": "^2.0.2"
}
}
}
}

6
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@tp/tp-date-picker", "name": "@tp/tp-date-picker",
"version": "2.2.0", "version": "1.0.0",
"description": "", "description": "",
"main": "tp-date-picker.js", "main": "tp-date-picker.js",
"scripts": { "scripts": {
@ -13,8 +13,8 @@
"author": "trading_peter", "author": "trading_peter",
"license": "Apache-2.0", "license": "Apache-2.0",
"dependencies": { "dependencies": {
"@date-fns/utc": "^2.1.0", "date-fns": "^2.28.0",
"date-fns": "^4.0.0", "date-fns-tz": "^1.3.3",
"lit": "^2.2.0" "lit": "^2.2.0"
} }
} }

80
tp-date-picker.js
View File

@ -7,7 +7,7 @@ This program is available under Apache License Version 2.0
import '@tp/tp-icon/tp-icon.js'; import '@tp/tp-icon/tp-icon.js';
import { FormElement } from '@tp/helpers/form-element'; import { FormElement } from '@tp/helpers/form-element';
import { LitElement, html, css, svg } from 'lit'; import { LitElement, html, css, svg } from 'lit';
import { UTCDate } from '@date-fns/utc'; import { zonedTimeToUtc } from 'date-fns-tz';
class TpDatePicker extends FormElement(LitElement) { class TpDatePicker extends FormElement(LitElement) {
static get styles() { static get styles() {
@ -114,27 +114,6 @@ class TpDatePicker extends FormElement(LitElement) {
.pointer { .pointer {
cursor: pointer; cursor: pointer;
} }
.event-dots {
display: flex;
gap: 4px;
justify-content: center;
position: absolute;
bottom: 8px;
left: 0;
right: 0;
}
.event-dot {
width: 4px;
height: 4px;
border-radius: 50%;
background-color: var(--tp-datepicker-event-dot-color, #666);
}
div[part~="date"] {
position: relative;
}
` `
]; ];
} }
@ -142,7 +121,7 @@ class TpDatePicker extends FormElement(LitElement) {
render() { render() {
let { month, year, dayNames, value, yearsForward, yearsBackwards } = this; let { month, year, dayNames, value, yearsForward, yearsBackwards } = this;
const today = new UTCDate(); const today = new Date();
if ((!month && month !== 0) || (!year && year !== 0)) { if ((!month && month !== 0) || (!year && year !== 0)) {
month = today.getMonth(); month = today.getMonth();
@ -156,20 +135,20 @@ class TpDatePicker extends FormElement(LitElement) {
<div class="header"> <div class="header">
<div> <div>
<div> <div>
<tp-icon part="nav-icon" .icon=${TpDatePicker.iconPrev} @click=${() => this.previousMonth()}></tp-icon> <tp-icon .icon=${TpDatePicker.iconPrev} @click=${() => this.previousMonth()}></tp-icon>
</div> </div>
<div>${this.monthNames[month]}</div> <div>${this.monthNames[month]}</div>
<div class="right"> <div class="right">
<tp-icon part="nav-icon" .icon=${TpDatePicker.iconNext} @click=${() => this.nextMonth()}></tp-icon> <tp-icon .icon=${TpDatePicker.iconNext} @click=${() => this.nextMonth()}></tp-icon>
</div> </div>
</div> </div>
<div> <div>
<div> <div>
<tp-icon part="nav-icon" .icon=${TpDatePicker.iconPrev} @click=${() => this.previousYear()}></tp-icon> <tp-icon .icon=${TpDatePicker.iconPrev} @click=${() => this.previousYear()}></tp-icon>
</div> </div>
<div class="pointer" @click=${this.showYearOverlay}>${year}</div> <div class="pointer" @click=${this.showYearOverlay}>${year}</div>
<div class="right"> <div class="right">
<tp-icon part="nav-icon" .icon=${TpDatePicker.iconNext} @click=${() => this.nextYear()}></tp-icon> <tp-icon .icon=${TpDatePicker.iconNext} @click=${() => this.nextYear()}></tp-icon>
</div> </div>
</div> </div>
</div> </div>
@ -180,24 +159,12 @@ class TpDatePicker extends FormElement(LitElement) {
${curMonth.map(d => { ${curMonth.map(d => {
const matchesValue = this.equalDate(d, value); const matchesValue = this.equalDate(d, value);
const isToday = this.equalDate(d, today); const isToday = this.equalDate(d, today);
const eventCount = this.countEventsForDate(d);
return html` return html`
<div .date=${d} part="date ${d.getMonth() !== month ? 'filler' : 'of-month'}"> <div .date=${d} part="date ${d.getMonth() !== month ? 'filler' : 'of-month'}"><div class="number" part="number ${matchesValue ? 'selected' : ''} ${isToday ? 'today' : ''} ${d.getMonth() === month ? 'of-month' : ''}">${d.getDate()}</div></div>
<div class="number" part="number ${matchesValue ? 'selected' : ''} ${isToday ? 'today' : ''} ${d.getMonth() === month ? 'of-month' : ''}">
${d.getDate()}
${eventCount > 0 ? html`
<div class="event-dots">
<div class="event-dot" part="event-dot"></div>
${eventCount > 1 ? html`<div class="event-dot" part="event-dot"></div>` : ''}
</div>
` : ''}
</div>
</div>
` `
})} })}
</div> </div>
<div class="year-overlay" part="year-overlay" ?visible=${this.showYearSelector} @click=${this.selectYear}> <div class="year-overlay" ?visible=${this.showYearSelector} @click=${this.selectYear}>
${years.map(y => html` ${years.map(y => html`
<div .value=${y}>${y}</div> <div .value=${y}>${y}</div>
`)} `)}
@ -213,10 +180,10 @@ class TpDatePicker extends FormElement(LitElement) {
year: { type: Number }, year: { type: Number },
monthNames: { type: Array }, monthNames: { type: Array },
dayNames: { type: Array }, dayNames: { type: Array },
timeZone: { type: String },
yearsForward: { type: Number }, yearsForward: { type: Number },
yearsBackwards: { type: Number }, yearsBackwards: { type: Number },
showYearSelector: { type: Boolean }, showYearSelector: { type: Boolean },
events: { type: Array },
}; };
} }
@ -235,12 +202,11 @@ class TpDatePicker extends FormElement(LitElement) {
constructor() { constructor() {
super(); super();
this.today = new UTCDate(); this.today = new Date();
this.month = this.today.getMonth(); this.month = this.today.getMonth();
this.year = this.today.getFullYear(); this.year = this.today.getFullYear();
this.yearsForward = 10; this.yearsForward = 10;
this.yearsBackwards = 100; this.yearsBackwards = 100;
this.events = [];
this.dayNames = [ this.dayNames = [
'Mo', 'Mo',
@ -285,7 +251,7 @@ class TpDatePicker extends FormElement(LitElement) {
selectDate(e) { selectDate(e) {
for (const el of e.composedPath()) { for (const el of e.composedPath()) {
if (el.date !== undefined) { if (el.date !== undefined) {
this.value = el.date; this.value = this.timeZone ? zonedTimeToUtc(el.date, this.timeZone) : el.date;
this.dispatchEvent(new CustomEvent('value-changed', { detail: this.value, bubbles: true, composed: true })); this.dispatchEvent(new CustomEvent('value-changed', { detail: this.value, bubbles: true, composed: true }));
return; return;
} }
@ -327,10 +293,10 @@ class TpDatePicker extends FormElement(LitElement) {
} }
getMonthDates(month = null, year = null) { getMonthDates(month = null, year = null) {
month = month !== null ? month : new UTCDate().getMonth(); month = month !== null ? month : new Date().getMonth();
year = year || new UTCDate().getFullYear(); year = year || new Date().getFullYear();
const firstOfMonth = new UTCDate(); const firstOfMonth = new Date();
firstOfMonth.setFullYear(year); firstOfMonth.setFullYear(year);
firstOfMonth.setMonth(month); firstOfMonth.setMonth(month);
firstOfMonth.setDate(1); firstOfMonth.setDate(1);
@ -338,7 +304,7 @@ class TpDatePicker extends FormElement(LitElement) {
firstOfMonth.setMinutes(0); firstOfMonth.setMinutes(0);
firstOfMonth.setSeconds(0); firstOfMonth.setSeconds(0);
const lastOfMonth = new UTCDate(); const lastOfMonth = new Date();
lastOfMonth.setDate(1); lastOfMonth.setDate(1);
lastOfMonth.setFullYear(year); lastOfMonth.setFullYear(year);
lastOfMonth.setMonth(month + 1); lastOfMonth.setMonth(month + 1);
@ -351,13 +317,13 @@ class TpDatePicker extends FormElement(LitElement) {
while (firstOfMonth.getDay() > 1) { while (firstOfMonth.getDay() > 1) {
firstOfMonth.setDate(firstOfMonth.getDate() - 1); firstOfMonth.setDate(firstOfMonth.getDate() - 1);
dates.push(new UTCDate(firstOfMonth)); dates.push(new Date(firstOfMonth));
} }
dates.reverse(); dates.reverse();
for (let i = 1; i <= lastOfMonth.getDate(); ++i) { for (let i = 1; i <= lastOfMonth.getDate(); ++i) {
const d = new UTCDate(); const d = new Date();
d.setFullYear(year); d.setFullYear(year);
d.setMonth(month); d.setMonth(month);
d.setDate(i); d.setDate(i);
@ -370,7 +336,7 @@ class TpDatePicker extends FormElement(LitElement) {
// Make sure we always fill 42 date get guarantee equal size of the date picker. // Make sure we always fill 42 date get guarantee equal size of the date picker.
while (dates.length < 42) { while (dates.length < 42) {
lastOfMonth.setDate(lastOfMonth.getDate() + 1); lastOfMonth.setDate(lastOfMonth.getDate() + 1);
dates.push(new UTCDate(lastOfMonth)); dates.push(new Date(lastOfMonth));
} }
return dates; return dates;
@ -382,18 +348,12 @@ class TpDatePicker extends FormElement(LitElement) {
selectYear(e) { selectYear(e) {
const elList = e.composedPath(); const elList = e.composedPath();
for (const el of elList) { elList.forEach(el => {
if (el.value) { if (el.value) {
this.year = el.value; this.year = el.value;
this.showYearSelector = false; this.showYearSelector = false;
break;
} }
} });
}
countEventsForDate(date) {
if (!Array.isArray(this.events)) return 0;
return this.events.filter(event => this.equalDate(event, date)).length;
} }
} }