Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

flatPickr fixes #7070

Merged
merged 1 commit into from
Feb 1, 2024
Merged

flatPickr fixes #7070

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 3 additions & 7 deletions packages/corelib/dist/index.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3157,13 +3157,8 @@ declare class DateEditor<P extends DateEditorOptions = DateEditorOptions> extend
static dateInputChange: (e: Event) => void;
static dateInputKeyup(e: KeyboardEvent): void;
static useFlatpickr: boolean;
static flatPickrOptions(input: HTMLElement): {
clickOpens: boolean;
allowInput: boolean;
dateFormat: string;
onChange: () => void;
};
static flatPickrTrigger(input: HTMLInputElement): HTMLElement;
flatPickrOptions(input: HTMLElement): any;
createFlatPickrTrigger(): HTMLElement;
static uiPickerZIndexWorkaround(el: HTMLElement | ArrayLike<HTMLElement>): void;
}

Expand All @@ -3175,6 +3170,7 @@ declare class DateTimeEditor<P extends DateTimeEditorOptions = DateTimeEditorOpt
private lastSetValueGet;
constructor(props: EditorProps<P>);
getFlatpickrOptions(): any;
createFlatPickrTrigger(): HTMLElement;
get_value(): string;
get value(): string;
set_value(value: string): void;
Expand Down
38 changes: 23 additions & 15 deletions packages/corelib/src/ui/editors/dateeditor.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import { Fluent, Invariant, addValidationRule, formatDate, getjQuery, isArrayLike, localText, parseISODateTime, stringFormat } from "@serenity-is/base";
import { Culture, Fluent, Invariant, addValidationRule, formatDate, getjQuery, isArrayLike, localText, parseISODateTime, stringFormat } from "@serenity-is/base";
import { IReadOnly, IStringValue } from "../../interfaces";
import { today } from "../../q";
import { Decorators } from "../../types/decorators";
import { dateInputChangeHandler, dateInputKeyupHandler, flatPickrOptions, flatPickrTrigger, jQueryDatepickerInitialization, jQueryDatepickerZIndexWorkaround } from "../helpers/dateediting";
import { dateInputChangeHandler, dateInputKeyupHandler, flatPickrTrigger, jQueryDatepickerInitialization, jQueryDatepickerZIndexWorkaround } from "../helpers/dateediting";
import { EditorProps, EditorWidget } from "../widgets/widget";

export interface DateEditorOptions {
Expand All @@ -24,16 +24,16 @@ export class DateEditor<P extends DateEditorOptions = DateEditorOptions> extends
let $ = getjQuery();
// @ts-ignore
if (typeof flatpickr !== "undefined" && (DateEditor.useFlatpickr || !$?.fn?.datepicker)) {
var options = DateEditor.flatPickrOptions(this.domNode);
var options = this.flatPickrOptions(this.domNode);
// @ts-ignore
flatpickr(this.domNode, options);
Fluent(flatPickrTrigger(this.domNode)).insertAfter(this.domNode);
this.createFlatPickrTrigger();
}
else if ($?.fn?.datepicker) {
$(this.domNode).datepicker({
showOn: 'button',
beforeShow: (inp: any, inst: any) => {
if (this.domNode.classList.contains('readonly'))
if (this.get_readOnly())
return false as any;
DateEditor.uiPickerZIndexWorkaround(this.domNode);
return true;
Expand Down Expand Up @@ -133,7 +133,7 @@ export class DateEditor<P extends DateEditorOptions = DateEditorOptions> extends
}

get_readOnly(): boolean {
return this.domNode.classList.contains('readonly');
return this.domNode.classList.contains('readonly') || this.domNode.getAttribute('readonly') != null;
}

set_readOnly(value: boolean): void {
Expand Down Expand Up @@ -205,16 +205,24 @@ export class DateEditor<P extends DateEditorOptions = DateEditorOptions> extends

public static useFlatpickr: boolean;

public static flatPickrOptions(input: HTMLElement) {
return flatPickrOptions(function () {
//Fluent.trigger(input, "change");
});
}

public static flatPickrTrigger(input: HTMLInputElement): HTMLElement {
if (!input)
public flatPickrOptions(input: HTMLElement): any {
return {
clickOpens: false,
allowInput: true,
dateFormat: Culture.dateOrder.split('').join(Culture.dateSeparator).replace('y', 'Y'),
onChange: () => {
//this.domNode && Fluent.trigger(this.domNode, 'change');
},
disable: [
() => this.get_readOnly()
]
};
}

public createFlatPickrTrigger(): HTMLElement {
if (!this.domNode)
return;
return flatPickrTrigger(Fluent(input).insertAfter(input).getNode());
return Fluent(flatPickrTrigger(this.domNode)).insertAfter(this.domNode).getNode();
}

public static uiPickerZIndexWorkaround(el: HTMLElement | ArrayLike<HTMLElement>) {
Expand Down
27 changes: 19 additions & 8 deletions packages/corelib/src/ui/editors/datetimeeditor.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import { Culture, Fluent, Invariant, addValidationRule, formatDate, formatISODateTimeUTC, getjQuery, localText, parseDate, parseISODateTime, round, stringFormat, trunc, tryGetText } from "@serenity-is/base";
import { Culture, Fluent, Invariant, addValidationRule, formatDate, formatISODateTimeUTC, getjQuery, localText, parseDate, parseISODateTime, round, stringFormat, trunc, tryGetText } from "@serenity-is/base";
import { IReadOnly, IStringValue } from "../../interfaces";
import { addOption, today } from "../../q";
import { Decorators } from "../../types/decorators";
import { flatPickrTrigger } from "../helpers/dateediting";
import { EditorProps, EditorWidget } from "../widgets/widget";
import { DateEditor } from "./dateeditor";
import { EditorUtils } from "./editorutils";
Expand Down Expand Up @@ -31,19 +32,20 @@ export class DateTimeEditor<P extends DateTimeEditorOptions = DateTimeEditorOpti
this.domNode.classList.add('dateTimeQ');
// @ts-ignore
flatpickr(this.domNode, this.getFlatpickrOptions());
this.createFlatPickrTrigger();
}
else if ($?.fn?.datepicker) {
this.domNode.classList.add('dateQ');

let $ = getjQuery();
$(this.domNode).datepicker({
showOn: 'button',
beforeShow: function () {
if (this.domNode.classList.contains('readonly'))
beforeShow: () => {
if (this.get_readOnly())
return false as any;
DateEditor.uiPickerZIndexWorkaround(this.domNode);
return true;
} as any,
},
yearRange: (this.options.yearRange ?? '-100:+50')
});

Expand Down Expand Up @@ -142,7 +144,7 @@ export class DateTimeEditor<P extends DateTimeEditorOptions = DateTimeEditorOpti

getFlatpickrOptions(): any {
return {
clickOpens: true,
clickOpens: false,
allowInput: true,
enableTime: true,
time_24hr: true,
Expand All @@ -151,11 +153,20 @@ export class DateTimeEditor<P extends DateTimeEditorOptions = DateTimeEditorOpti
dateFormat: Culture.dateOrder.split('').join(Culture.dateSeparator).replace('y', 'Y') + " H:i" + (this.options.seconds ? ":S" : ""),
onChange: () => {
this.lastSetValue = null;
this.domNode && Fluent.trigger(this.domNode, 'change');
}
//this.domNode && Fluent.trigger(this.domNode, 'change');
},
disable: [
() => this.get_readOnly()
]
}
}

public createFlatPickrTrigger(): HTMLElement {
if (!this.domNode)
return;
return Fluent(flatPickrTrigger(this.domNode)).insertAfter(this.domNode).getNode();
}

get_value(): string {
var value = this.domNode.value?.trim();
if (value != null && value.length === 0) {
Expand Down Expand Up @@ -300,7 +311,7 @@ export class DateTimeEditor<P extends DateTimeEditorOptions = DateTimeEditorOpti
}

get_readOnly(): boolean {
return this.domNode.classList.contains('readonly');
return this.domNode.classList.contains('readonly') || this.domNode.getAttribute('readonly') != null;
}

set_readOnly(value: boolean): void {
Expand Down
14 changes: 3 additions & 11 deletions packages/corelib/src/ui/helpers/dateediting.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@

import { Culture, formatDate, getjQuery, parseDate } from "@serenity-is/base";

export function dateInputChangeHandler(e: Event) {
Expand Down Expand Up @@ -173,22 +172,15 @@ export function dateInputKeyupHandler(e: KeyboardEvent) {
input.value = val + Culture.dateSeparator;
}

export function flatPickrOptions(onChange: () => void) {
return {
clickOpens: true,
allowInput: true,
dateFormat: Culture.dateOrder.split('').join(Culture.dateSeparator).replace('y', 'Y'),
onChange: onChange
}
}

export function flatPickrTrigger(input: HTMLInputElement): HTMLElement {
var button = document.createElement("button");
button.type = "button";
button.classList.add("ui-datepicker-trigger");
button.addEventListener("click", () => {
if (!input.classList.contains('readonly'))
if (!input.classList.contains('readonly') && input.getAttribute('readonly') == null) {
(input as any)._flatpickr?.open?.();
(input as any)._flatpickr?.calendarContainer?.focus?.();
}
});
return button;
}
Expand Down
10 changes: 3 additions & 7 deletions packages/corelib/wwwroot/index.global.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4342,13 +4342,8 @@ declare namespace Serenity {
static dateInputChange: (e: Event) => void;
static dateInputKeyup(e: KeyboardEvent): void;
static useFlatpickr: boolean;
static flatPickrOptions(input: HTMLElement): {
clickOpens: boolean;
allowInput: boolean;
dateFormat: string;
onChange: () => void;
};
static flatPickrTrigger(input: HTMLInputElement): HTMLElement;
flatPickrOptions(input: HTMLElement): any;
createFlatPickrTrigger(): HTMLElement;
static uiPickerZIndexWorkaround(el: HTMLElement | ArrayLike<HTMLElement>): void;
}

Expand All @@ -4360,6 +4355,7 @@ declare namespace Serenity {
private lastSetValueGet;
constructor(props: EditorProps<P>);
getFlatpickrOptions(): any;
createFlatPickrTrigger(): HTMLElement;
get_value(): string;
get value(): string;
set_value(value: string): void;
Expand Down
Loading