From 356c14b197e29e23ccf6116ccabac28d6cf49736 Mon Sep 17 00:00:00 2001
From: Carina Gentiana Pasere <48244789+pasere-smeup@users.noreply.github.com>
Date: Fri, 27 Sep 2024 14:16:01 +0200
Subject: [PATCH] kup-date-picker/kup-card-calendar: show/hide previous/next
month days in calendar; minor fixes
---
packages/ketchup/src/components.d.ts | 10 +++
.../built-in/kup-card-built-in-1.scss | 16 +++-
.../kup-card/built-in/kup-card-calendar.tsx | 73 ++++++++++++++++---
.../kup-card/kup-card-declarations.ts | 2 +
.../kup-date-picker-declarations.tsx | 1 +
.../kup-date-picker/kup-date-picker.tsx | 59 ++++++++-------
.../src/components/kup-date-picker/readme.md | 21 +++---
packages/ketchup/src/date-picker.html | 10 ++-
8 files changed, 143 insertions(+), 49 deletions(-)
diff --git a/packages/ketchup/src/components.d.ts b/packages/ketchup/src/components.d.ts
index 3efed1013b..5747ddc135 100644
--- a/packages/ketchup/src/components.d.ts
+++ b/packages/ketchup/src/components.d.ts
@@ -1822,6 +1822,11 @@ export namespace Components {
* @default true
*/
"showIcon": boolean;
+ /**
+ * Sets show previous/next month days in calendar
+ * @default true
+ */
+ "showPreviousNextMonthDays": boolean;
/**
* Sets the sizing of the textfield of the datepicker
* @default KupComponentSizing.MEDIUM
@@ -7235,6 +7240,11 @@ declare namespace LocalJSX {
* @default true
*/
"showIcon"?: boolean;
+ /**
+ * Sets show previous/next month days in calendar
+ * @default true
+ */
+ "showPreviousNextMonthDays"?: boolean;
/**
* Sets the sizing of the textfield of the datepicker
* @default KupComponentSizing.MEDIUM
diff --git a/packages/ketchup/src/components/kup-card/built-in/kup-card-built-in-1.scss b/packages/ketchup/src/components/kup-card/built-in/kup-card-built-in-1.scss
index 665e039bae..dff6cbe4cd 100644
--- a/packages/ketchup/src/components/kup-card/built-in/kup-card-built-in-1.scss
+++ b/packages/ketchup/src/components/kup-card/built-in/kup-card-built-in-1.scss
@@ -93,6 +93,11 @@
.item {
text-align: center;
+ .item-number {
+ cursor: pointer;
+ color: var(--kup_card_text_color);
+ }
+
&:not(.selected) .item-number:hover {
background-color: var(--kup_card_selected_color_hover);
}
@@ -103,8 +108,13 @@
}
}
+ .item-disabled {
+ .item-number {
+ color: var(--kup-text-disabled);
+ }
+ }
+
.item-number {
- cursor: pointer;
display: flex;
justify-content: center;
margin: auto;
@@ -113,7 +123,9 @@
text-transform: capitalize;
@include kup-body-compact-01;
line-height: 2.5em;
- color: var(--kup_card_text_color);
+ &.today {
+ text-decoration: underline;
+ }
}
.today-navigation-button {
diff --git a/packages/ketchup/src/components/kup-card/built-in/kup-card-calendar.tsx b/packages/ketchup/src/components/kup-card/built-in/kup-card-calendar.tsx
index 3c87b11c47..930ff4aea4 100644
--- a/packages/ketchup/src/components/kup-card/built-in/kup-card-calendar.tsx
+++ b/packages/ketchup/src/components/kup-card/built-in/kup-card-calendar.tsx
@@ -8,7 +8,10 @@ import {
KupDateTimeFormatOptionsMonth,
KupDatesFormats,
} from '../../../managers/kup-dates/kup-dates-declarations';
-import { KupDom, KupManager } from '../../../managers/kup-manager/kup-manager-declarations';
+import {
+ KupDom,
+ KupManager,
+} from '../../../managers/kup-manager/kup-manager-declarations';
import { KupObj } from '../../../managers/kup-objects/kup-objects-declarations';
import { SourceEvent } from '../../kup-date-picker/kup-date-picker-declarations';
import { KupCard } from '../kup-card';
@@ -39,8 +42,19 @@ export function prepareCalendar(component: KupCard) {
setValue(component, new Date(opts.initialValue as string));
}
}
- if (opts.firstDayIndex !== null && opts.firstDayIndex !== undefined)
+ if (
+ opts.firstDayIndex !== null &&
+ opts.firstDayIndex !== undefined
+ ) {
el.kupData.firstDayIndex = opts.firstDayIndex;
+ }
+ if (
+ opts.showPreviousNextMonthDays != null &&
+ opts.showPreviousNextMonthDays !== undefined
+ ) {
+ el.kupData.showPreviousNextMonthDays =
+ opts.showPreviousNextMonthDays;
+ }
opts.resetStatus = false;
}
}
@@ -94,13 +108,11 @@ export function prepareCalendar(component: KupCard) {
id: 'change-view-button',
};
const goToTodayDateButton: FButtonProps = {
- icon:"calendar",
+ icon: 'calendar',
wrapperClass: 'today-navigation-button kup-neutral',
styling: FButtonStyling.FLAT,
// label: 'Oggi',
- title: kupManager.language.translate(
- KupLanguageGeneric.TODAY
- ),
+ title: kupManager.language.translate(KupLanguageGeneric.TODAY),
onClick: () => setDateToday(component),
};
//text-transform:capitalize
@@ -179,6 +191,16 @@ function getFirstDayIndex(component: KupCard): number {
return 1;
}
+function isShowPreviousNextMonthDays(component: KupCard): boolean {
+ const el = component.rootElement as KupCardBuiltInCalendar;
+ if (
+ el.kupData.showPreviousNextMonthDays !== null &&
+ el.kupData.showPreviousNextMonthDays !== undefined
+ )
+ return el.kupData.showPreviousNextMonthDays;
+ return true;
+}
+
function getView(component: KupCard): SourceEvent {
const el = component.rootElement as KupCardBuiltInCalendar;
if (el.kupData.calendarView) return el.kupData.calendarView;
@@ -226,17 +248,30 @@ function createDaysCalendar(component: KupCard) {
const firstMonthDay = new Date(selectedYear, selectedMonth, 1);
const lastMonthDay = new Date(selectedYear, selectedMonth + 1, 0);
+ const today = new Date();
+
+ const lastPreviousMonthDate = new Date(selectedYear, selectedMonth, 0);
const finish: boolean = false;
let currentDayIndex = getFirstDayIndex(component);
const firstMonthDayIndex = firstMonthDay.getDay();
let row = [];
let daysForRowAdded = 0;
+ const showPreviousNextMonthDays = isShowPreviousNextMonthDays(component);
+ let substractDays = 0;
while (!finish) {
if (currentDayIndex == firstMonthDayIndex) {
break;
}
- row.push( | );
+ row.unshift(
+
+
+ {showPreviousNextMonthDays
+ ? lastPreviousMonthDate.getDate() - substractDays++
+ : ''}
+
+ |
+ );
currentDayIndex++;
daysForRowAdded++;
if (currentDayIndex > 6) {
@@ -245,6 +280,7 @@ function createDaysCalendar(component: KupCard) {
}
let dayCount = 1;
while (dayCount <= lastMonthDay.getDate()) {
+ let currentRowLastItem = daysForRowAdded;
for (let i = daysForRowAdded; i < 7; i++) {
let dayClass = 'item';
let dataIndex = {
@@ -263,11 +299,19 @@ function createDaysCalendar(component: KupCard) {
) {
dayClass += ' selected';
}
+ let itemClass = 'item-number';
+ if (
+ today.getFullYear() == selectedYear &&
+ today.getMonth() == selectedMonth &&
+ today.getDate() == dayCount
+ ) {
+ itemClass += ' today';
+ }
row.push(
{
onCalendarItemClick(
component,
@@ -280,10 +324,21 @@ function createDaysCalendar(component: KupCard) {
|
);
dayCount++;
+ currentRowLastItem = i;
if (dayCount > lastMonthDay.getDate()) {
break;
}
}
+ let nextMonthDay = 1;
+ for (let i = currentRowLastItem + 1; i < 7; i++) {
+ row.push(
+
+
+ {showPreviousNextMonthDays ? nextMonthDay++ : ''}
+
+ |
+ );
+ }
if (row.length > 0) {
tbody.push({row}
);
row = [];
@@ -536,7 +591,7 @@ function onCalendarItemClick(component: KupCard, value: string) {
refresh(component);
}
function setDateToday(component: KupCard): void {
- setValue(component, new Date())
+ setValue(component, new Date());
component.onKupClick(component.rootElement.id, new Date().toISOString());
refresh(component);
}
diff --git a/packages/ketchup/src/components/kup-card/kup-card-declarations.ts b/packages/ketchup/src/components/kup-card/kup-card-declarations.ts
index c0fb6ecca2..06a5f03a08 100644
--- a/packages/ketchup/src/components/kup-card/kup-card-declarations.ts
+++ b/packages/ketchup/src/components/kup-card/kup-card-declarations.ts
@@ -32,6 +32,7 @@ export interface KupCardBuiltInCalendarOptions {
initialValue?: string | KupObj;
firstDayIndex?: number;
resetStatus: boolean;
+ showPreviousNextMonthDays?: boolean;
}
/**
* Data of the built-in calendar.
@@ -43,6 +44,7 @@ export interface KupCardBuiltInCalendarData {
day?: number;
month?: number;
year?: number;
+ showPreviousNextMonthDays?: boolean;
}
/**
* Html element of the built-in calendar.
diff --git a/packages/ketchup/src/components/kup-date-picker/kup-date-picker-declarations.tsx b/packages/ketchup/src/components/kup-date-picker/kup-date-picker-declarations.tsx
index 5e303fcc31..6d65cfeead 100644
--- a/packages/ketchup/src/components/kup-date-picker/kup-date-picker-declarations.tsx
+++ b/packages/ketchup/src/components/kup-date-picker/kup-date-picker-declarations.tsx
@@ -12,6 +12,7 @@ export enum KupDatePickerProps {
initialValue = 'Sets the initial value of the component',
sizing = 'Sets the size of the component. Medium is the default',
showIcon = 'You can set if u want to show the calendar icon to toggle date-picker. True is the default',
+ showPreviousNextMonthDays = 'You can set if show the previous/next month days in calendar',
}
export enum SourceEvent {
DATE = 'date',
diff --git a/packages/ketchup/src/components/kup-date-picker/kup-date-picker.tsx b/packages/ketchup/src/components/kup-date-picker/kup-date-picker.tsx
index 1f4fc52444..fef713e905 100644
--- a/packages/ketchup/src/components/kup-date-picker/kup-date-picker.tsx
+++ b/packages/ketchup/src/components/kup-date-picker/kup-date-picker.tsx
@@ -107,6 +107,11 @@ export class KupDatePicker {
* @default true
*/
@Prop() showIcon: boolean = true;
+ /**
+ * Sets show previous/next month days in calendar
+ * @default true
+ */
+ @Prop() showPreviousNextMonthDays: boolean = true;
/*-------------------------------------------------*/
/* I n t e r n a l V a r i a b l e s */
@@ -390,37 +395,36 @@ export class KupDatePicker {
this.ISOvalue = '';
this.notISOvalue = newValue;
// check if input contains special codes
- if (!newValue || this.isAlphanumeric(newValue)) {
+ if (!eventDetailValue) {
/** donothing */
- } else {
- if (this.kupManager.dates.isIsoDate(eventDetailValue)) {
- if (isOnInputEvent != true) {
- this.ISOvalue = eventDetailValue;
- this.notISOvalue = '';
- }
- } else if (this.kupManager.dates.isValid(eventDetailValue)) {
- newValue = this.kupManager.dates.format(
- this.kupManager.dates.normalize(
- eventDetailValue,
- KupDatesNormalize.DATE
- ),
- KupDatesFormats.ISO_DATE
- );
- this.refreshPickerComponentValue(newValue);
- if (isOnInputEvent != true) {
- this.ISOvalue = newValue;
- this.notISOvalue = '';
- }
+ } else if (this.kupManager.dates.isIsoDate(eventDetailValue)) {
+ if (isOnInputEvent != true) {
+ this.ISOvalue = eventDetailValue;
+ this.notISOvalue = '';
}
- }
- if (newValue != null) {
- if (eventToRaise != null) {
- eventToRaise.emit({
- id: this.rootElement.id,
- value: newValue,
- });
+ } else if (this.isAlphanumeric(eventDetailValue)) {
+ /** donothing */
+ } else if (this.kupManager.dates.isValid(eventDetailValue)) {
+ newValue = this.kupManager.dates.format(
+ this.kupManager.dates.normalize(
+ eventDetailValue,
+ KupDatesNormalize.DATE
+ ),
+ KupDatesFormats.ISO_DATE
+ );
+ this.refreshPickerComponentValue(newValue);
+ if (isOnInputEvent != true) {
+ this.ISOvalue = newValue;
+ this.notISOvalue = '';
}
}
+
+ if (newValue != null && eventToRaise) {
+ eventToRaise.emit({
+ id: this.rootElement.id,
+ value: newValue,
+ });
+ }
}
refreshPickerComponentValue(value: string) {
@@ -588,6 +592,7 @@ export class KupDatePicker {
initialValue: this.ISOvalue,
firstDayIndex: this.firstDayIndex,
resetStatus: true,
+ showPreviousNextMonthDays: this.showPreviousNextMonthDays,
},
};
diff --git a/packages/ketchup/src/components/kup-date-picker/readme.md b/packages/ketchup/src/components/kup-date-picker/readme.md
index 1763ac3d25..738d3d85fc 100644
--- a/packages/ketchup/src/components/kup-date-picker/readme.md
+++ b/packages/ketchup/src/components/kup-date-picker/readme.md
@@ -5,16 +5,17 @@
## Properties
-| Property | Attribute | Description | Type | Default |
-| --------------- | ----------------- | --------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- |
-| `customStyle` | `custom-style` | Custom style of the component. | `string` | `''` |
-| `data` | -- | Props of the sub-components. | `Object` | `null` |
-| `disabled` | `disabled` | Defaults at false. When set to true, the component is disabled. | `boolean` | `false` |
-| `firstDayIndex` | `first-day-index` | First day number (0 - sunday, 1 - monday, ...) TODO: manage with kupDates.locale, remove prop | `number` | `1` |
-| `initialValue` | `initial-value` | Sets the initial value of the component | `string` | `''` |
-| `outlined` | `outlined` | When set to true, the component will be rendered as an outlined field. | `boolean` | `false` |
-| `showIcon` | `show-icon` | Sets the sizing of the textfield of the datepicker | `boolean` | `true` |
-| `sizing` | `sizing` | Sets the sizing of the textfield of the datepicker | `KupComponentSizing.EXTRA_LARGE \| KupComponentSizing.EXTRA_SMALL \| KupComponentSizing.LARGE \| KupComponentSizing.MEDIUM \| KupComponentSizing.SMALL` | `KupComponentSizing.MEDIUM` |
+| Property | Attribute | Description | Type | Default |
+| --------------------------- | ------------------------------- | --------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- |
+| `customStyle` | `custom-style` | Custom style of the component. | `string` | `''` |
+| `data` | -- | Props of the sub-components. | `Object` | `null` |
+| `disabled` | `disabled` | Defaults at false. When set to true, the component is disabled. | `boolean` | `false` |
+| `firstDayIndex` | `first-day-index` | First day number (0 - sunday, 1 - monday, ...) TODO: manage with kupDates.locale, remove prop | `number` | `1` |
+| `initialValue` | `initial-value` | Sets the initial value of the component | `string` | `''` |
+| `outlined` | `outlined` | When set to true, the component will be rendered as an outlined field. | `boolean` | `false` |
+| `showIcon` | `show-icon` | Sets the sizing of the textfield of the datepicker | `boolean` | `true` |
+| `showPreviousNextMonthDays` | `show-previous-next-month-days` | Sets show previous/next month days in calendar | `boolean` | `true` |
+| `sizing` | `sizing` | Sets the sizing of the textfield of the datepicker | `KupComponentSizing.EXTRA_LARGE \| KupComponentSizing.EXTRA_SMALL \| KupComponentSizing.LARGE \| KupComponentSizing.MEDIUM \| KupComponentSizing.SMALL` | `KupComponentSizing.MEDIUM` |
## Events
diff --git a/packages/ketchup/src/date-picker.html b/packages/ketchup/src/date-picker.html
index 43684e45d1..fc261d054d 100644
--- a/packages/ketchup/src/date-picker.html
+++ b/packages/ketchup/src/date-picker.html
@@ -44,13 +44,21 @@ init on Monday
initial-value="2021-11-01"
>
+ init on Monday, not show previous/next month days
+
+
init on Sunday
- Sizing
+ Sizing (first day Tuesday)