holm/egroupware
1
1
Fork 0
forked from extern/egroupware
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Et2Date: Add placement property to control where calendar popup opens. "top", "bottom", or "auto"

Browse Source
This commit is contained in:
nathan 2023-02-08 14:36:09 -07:00
parent 00a857b2d7
commit 32dd160e35
1 changed files with 42 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
api/js/etemplate/Et2Date/Et2Date.ts
View File

@ -376,7 +376,14 @@ export class Et2Date extends Et2InputWidget(FormControlMixin(LitFlatpickr))
* If false (default), it is impossible to have a time that is not a multiple of minuteIncrement.
* Does not affect scroll, which always goes to nearest multiple.
*/
freeMinuteEntry: {type: Boolean}
freeMinuteEntry: {type: Boolean},
/**
* The preferred placement of the calendar popup can be set with the placement attribute. The default
* is "auto". Note that the actual position may vary to ensure the calendar remains in the viewport.
* Valid placements are "top", "bottom" or "auto".
*/
placement: {type: String, noAccessor: true}
}
}
@ -506,6 +513,10 @@ export class Et2Date extends Et2InputWidget(FormControlMixin(LitFlatpickr))
{
options.inline = this.inline;
}
if(this.placement)
{
options.position = this._convert_placement(this.placement);
}
options.plugins = [
// Turn on scroll wheel support
@ -844,6 +855,36 @@ export class Et2Date extends Et2InputWidget(FormControlMixin(LitFlatpickr))
}
}
private _convert_placement(position : "top" | "bottom" | "auto" | "") : "above" | "below" | "auto"
{
let placement = "auto";
switch(position)
{
case "top":
placement = "above";
break;
case "bottom":
placement = "below";
break;
}
return placement;
}
get placement() : "top" | "bottom" | "auto"
{
return this.__placement;
}
set placement(new_placement : "top" | "bottom" | "auto")
{
if(this._instance)
{
this._instance.set("position", this._convert_placement(new_placement))
}
this.__placement = new_placement;
}
/**
* Override from flatpickr - This is the node we tell flatpickr to use
* It must be an <input>, flatpickr doesn't understand anything else