Skip to content

Commit

Permalink
Merge pull request #2004 from apuliasoft/kup-date-picker
Browse files Browse the repository at this point in the history
  • Loading branch information
@lucafoscili
lucafoscili authored Aug 2, 2024
2 parents 47f64e0 + 3c63795 commit 37d4e72
Show file tree
Hide file tree
Showing 5 changed files with 903 additions and 523 deletions.
5 changes: 5 additions & 0 deletions packages/ketchup/src/components/kup-card/built-in/kup-card-built-in-1.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -114,4 +114,9 @@
line-height: 2.5em;
color: var(--kup_card_text_color);
}

.today-navigation-button{
display: flex;
align-items: center;
}
}
42 changes: 33 additions & 9 deletions packages/ketchup/src/components/kup-card/built-in/kup-card-calendar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import {
KupDateTimeFormatOptionsMonth,
KupDatesFormats,
} from '../../../managers/kup-dates/kup-dates-declarations';
import { KupDom } 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';
Expand All @@ -17,9 +17,12 @@ import {
KupCardBuiltInCalendarOptions,
} from '../kup-card-declarations';
import { fillString } from '../../../utils/utils';
import { KupLanguageGeneric } from '../../../managers/kup-language/kup-language-declarations';
import { kupManagerInstance } from '../../../managers/kup-manager/kup-manager';

const dom: KupDom = document.documentElement as KupDom;

const kupManager: KupManager = kupManagerInstance();
export function prepareCalendar(component: KupCard) {
const el = component.rootElement as KupCardBuiltInCalendar;
if (!el.kupData) el.kupData = {};
Expand All @@ -36,7 +39,7 @@ export function prepareCalendar(component: KupCard) {
setValue(component, new Date(opts.initialValue as string));
}
}
if (opts.firstDayIndex)
if (opts.firstDayIndex !== null && opts.firstDayIndex !== undefined)
el.kupData.firstDayIndex = opts.firstDayIndex;
opts.resetStatus = false;
}
Expand Down Expand Up @@ -90,12 +93,23 @@ export function prepareCalendar(component: KupCard) {
onClick: () => changeView(component),
id: 'change-view-button',
};
const goToTodayDateButton: FButtonProps = {
icon:"calendar",
wrapperClass: 'today-navigation-button kup-neutral',
styling: FButtonStyling.FLAT,
// label: 'Oggi',
title: kupManager.language.translate(
KupLanguageGeneric.TODAY
),
onClick: () => setDateToday(component),
};
//text-transform:capitalize
return (
<div id={component.rootElement.id + '_calendar'}>
<div class="section-1">
<div class="sub-1 nav">
{prevButtonComp}
<FButton {...goToTodayDateButton} />
<FButton {...changeViewButtonProp} />
{nextButtonComp}
</div>
Expand All @@ -106,7 +120,7 @@ export function prepareCalendar(component: KupCard) {
}

function setValue(component: KupCard, value: Date) {
if (!!(value instanceof Date)) {
if (!(value instanceof Date) || isNaN(value.getTime())) {
value = new Date();
}
const el = component.rootElement as KupCardBuiltInCalendar;
Expand Down Expand Up @@ -157,7 +171,11 @@ function setYear(component: KupCard, value: number) {

function getFirstDayIndex(component: KupCard): number {
const el = component.rootElement as KupCardBuiltInCalendar;
if (el.kupData.firstDayIndex) return el.kupData.firstDayIndex;
if (
el.kupData.firstDayIndex !== null &&
el.kupData.firstDayIndex !== undefined
)
return el.kupData.firstDayIndex;
return 1;
}

Expand Down Expand Up @@ -272,12 +290,13 @@ function createDaysCalendar(component: KupCard) {
}
daysForRowAdded = 0;
}

return (
<table class="calendar">
<thead>{thead}</thead>
<tbody>{tbody}</tbody>
</table>
<div>
<table class="calendar">
<thead>{thead}</thead>
<tbody>{tbody}</tbody>
</table>
</div>
);
}

Expand Down Expand Up @@ -516,3 +535,8 @@ function onCalendarItemClick(component: KupCard, value: string) {
component.onKupClick(component.rootElement.id, value);
refresh(component);
}
function setDateToday(component: KupCard): void {
setValue(component, new Date())
component.onKupClick(component.rootElement.id, new Date().toISOString());
refresh(component);
}
118 changes: 105 additions & 13 deletions packages/ketchup/src/components/kup-date-picker/kup-date-picker.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -387,21 +387,33 @@ export class KupDatePicker {
isOnInputEvent?: boolean
) {
let newValue = eventDetailValue;
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.setValue(newValue);
// check if input contains special codes
if (this.isAlphanumeric(newValue)) {
this.setValue(newValue);
} else {
const dateFormat = this.kupManager.dates.getDateFormat();

const parsedDate =
dateFormat === 'DD/MM/YYYY'
? this.kupManager.dates.parseAndValidateDate(newValue)
: this.kupManager.dates.parseAndValidateDateEn(newValue);
if (this.kupManager.dates.isValid(eventDetailValue) && parsedDate) {
newValue = this.kupManager.dates.format(
this.kupManager.dates.normalize(
eventDetailValue,
KupDatesNormalize.DATE
),
KupDatesFormats.ISO_DATE
);
this.refreshPickerComponentValue(newValue);
if (isOnInputEvent != true) {
this.setValue(newValue);
}
} else if (isOnInputEvent != true) {
this.setValue('');
console.error('Invalid date');
}
}

if (newValue != null) {
if (eventToRaise != null) {
eventToRaise.emit({
Expand All @@ -412,6 +424,77 @@ export class KupDatePicker {
}
}

// parseAndValidateDateEn(input: string) {
// const cleanedInput = input.replace(/[^0-9]/g, '');
// let day: string, month: string, year: string;
// let dateFormat:
// | 'MMDDYYYY'
// | 'MMDDYY'
// | 'MM/DD/YYYY'
// | 'MM/DD/YY'
// | 'MM-DD-YYYY'
// | 'MM-DD-YY'
// | null = null;

// if (cleanedInput.length === 8) {
// month = cleanedInput.slice(0, 2);
// day = cleanedInput.slice(2, 4);
// year = cleanedInput.slice(4, 8);
// dateFormat = 'MMDDYYYY';
// } else if (cleanedInput.length === 6) {
// month = cleanedInput.slice(0, 2);
// day = cleanedInput.slice(2, 4);
// year = cleanedInput.slice(4, 6);
// year = (parseInt(year, 10) >= 50 ? '19' : '20') + year;
// dateFormat = 'MMDDYY';
// } else if (input.includes('/')) {
// const parts = input.split('/');
// if (parts.length !== 3) return null;

// month = parts[0];
// day = parts[1];
// year = parts[2];
// if (year && year.length === 2) {
// year = (parseInt(year, 10) >= 50 ? '19' : '20') + year;
// dateFormat = 'MM/DD/YY';
// } else if (year && year.length === 4) {
// dateFormat = 'MM/DD/YYYY';
// } else {
// return null;
// }
// } else if (input.includes('-')) {
// const parts = input.split('-');
// if (parts.length !== 3) return null;

// month = parts[0];
// day = parts[1];
// year = parts[2];
// if (year && year.length === 2) {
// year = (parseInt(year, 10) >= 50 ? '19' : '20') + year;
// dateFormat = 'MM-DD-YY';
// } else if (year && year.length === 4) {
// dateFormat = 'MM-DD-YYYY';
// } else {
// return null;
// }
// } else {
// return null;
// }

// const dayNumber = parseInt(day, 10);
// const monthNumber = parseInt(month, 10);
// if (
// dayNumber < 1 ||
// dayNumber > 31 ||
// monthNumber < 1 ||
// monthNumber > 12
// ) {
// return null;
// }

// return { day, month, year, dateFormat };
// }

refreshPickerComponentValue(value: string) {
if (!this.isPickerOpened()) {
return;
Expand Down Expand Up @@ -528,6 +611,7 @@ export class KupDatePicker {
disabled={this.disabled}
fullHeight={fullHeight}
fullWidth={fullWidth}
maxLength={10}
id={this.rootElement.id + '_text-field'}
value={initialValue}
onBlur={() => this.onKupBlur()}
Expand Down Expand Up @@ -597,10 +681,18 @@ export class KupDatePicker {
if (this.value == null || this.value.trim() == '') {
return '';
}
// check for special code input
if (this.isAlphanumeric(this.value)) {
return this.value;
}
let v1 = this.kupManager.dates.format(this.value);
return v1;
}

isAlphanumeric(value: string): boolean {
const regex = /[A-Za-z]/;
return regex.test(value);
}
/*-------------------------------------------------*/
/* L i f e c y c l e H o o k s */
/*-------------------------------------------------*/
Expand Down
Loading

0 comments on commit 37d4e72

Please sign in to comment.