Et2Date: Add support for inline dates & passing a format to parseDate

This commit is contained in:
nathan 2022-04-26 15:24:58 -06:00
parent a74bd82dde
commit 0017b78b53

View File

@ -9,7 +9,7 @@
*/ */
import {css} from "@lion/core"; import {css, html} from "@lion/core";
import {FormControlMixin, ValidateMixin} from "@lion/form-core"; import {FormControlMixin, ValidateMixin} from "@lion/form-core";
import 'lit-flatpickr'; import 'lit-flatpickr';
import {Et2InputWidget} from "../Et2InputWidget/Et2InputWidget"; import {Et2InputWidget} from "../Et2InputWidget/Et2InputWidget";
@ -25,7 +25,7 @@ import "flatpickr/dist/plugins/scrollPlugin.js";
* @param {string} dateString * @param {string} dateString
* @returns {Date | undefined} * @returns {Date | undefined}
*/ */
export function parseDate(dateString) export function parseDate(dateString, formatString?)
{ {
// First try the server format // First try the server format
if(dateString.substr(-1) === "Z") if(dateString.substr(-1) === "Z")
@ -44,7 +44,7 @@ export function parseDate(dateString)
} }
} }
let formatString = <string>(window.egw.preference("dateformat") || 'Y-m-d'); formatString = formatString || <string>(window.egw.preference("dateformat") || 'Y-m-d');
//@ts-ignore replaceAll() does not exist //@ts-ignore replaceAll() does not exist
formatString = formatString.replaceAll(new RegExp('[-/\.]', 'ig'), '-'); formatString = formatString.replaceAll(new RegExp('[-/\.]', 'ig'), '-');
let parsedString = ""; let parsedString = "";
@ -65,6 +65,10 @@ export function parseDate(dateString)
case 'd-M-Y': case 'd-M-Y':
parsedString = `${dateString.slice(6, 10)}/${dateString.slice(3, 5,)}/${dateString.slice(0, 2)}`; parsedString = `${dateString.slice(6, 10)}/${dateString.slice(3, 5,)}/${dateString.slice(0, 2)}`;
break; break;
case 'Ymd':
// Not a preference option, but used by some dates
parsedString = `${dateString.slice(0, 4)}/${dateString.slice(4, 6,)}/${dateString.slice(6, 8)}`;
break;
default: default:
parsedString = '0000/00/00'; parsedString = '0000/00/00';
} }
@ -288,7 +292,11 @@ export class Et2Date extends Et2InputWidget(FormControlMixin(ValidateMixin(LitFl
static get properties() static get properties()
{ {
return { return {
...super.properties ...super.properties,
/**
* Display the calendar inline instead of revealed as needed
*/
inline: {type: Boolean}
} }
} }
@ -361,6 +369,11 @@ export class Et2Date extends Et2InputWidget(FormControlMixin(ValidateMixin(LitFl
options.dateFormat = "Y-m-dT00:00:00\\Z"; options.dateFormat = "Y-m-dT00:00:00\\Z";
options.weekNumbers = true; options.weekNumbers = true;
if(this.inline)
{
options.inline = this.inline;
}
// Turn on scroll wheel support // Turn on scroll wheel support
// @ts-ignore TypeScript can't find scrollPlugin, but rollup does // @ts-ignore TypeScript can't find scrollPlugin, but rollup does
options.plugins = [new scrollPlugin()]; options.plugins = [new scrollPlugin()];
@ -416,6 +429,23 @@ export class Et2Date extends Et2InputWidget(FormControlMixin(ValidateMixin(LitFl
return value; return value;
} }
/**
* Inline calendars need a slot
*
* @return {TemplateResult}
* @protected
*/
// eslint-disable-next-line class-methods-use-this
_inputGroupAfterTemplate()
{
return html`
<div class="input-group__after">
<slot name="after"></slot>
<slot/>
</div>
`;
}
/** /**
* Change handler setting modelValue for validation * Change handler setting modelValue for validation
* *
@ -439,11 +469,18 @@ export class Et2Date extends Et2InputWidget(FormControlMixin(ValidateMixin(LitFl
set minDate(min : string | Date) set minDate(min : string | Date)
{ {
if(this._instance) if(this._instance)
{
if(min)
{ {
// Handle timezone offset, flatpickr uses local time // Handle timezone offset, flatpickr uses local time
let date = new Date(min); let date = new Date(min);
let formatDate = new Date(date.valueOf() + date.getTimezoneOffset() * 60 * 1000); let formatDate = new Date(date.valueOf() + date.getTimezoneOffset() * 60 * 1000);
this._instance.set('minDate', formatDate) this._instance.set("minDate", formatDate)
}
else
{
this._instance.set("minDate", "")
}
} }
} }
@ -459,11 +496,18 @@ export class Et2Date extends Et2InputWidget(FormControlMixin(ValidateMixin(LitFl
set maxDate(max : string | Date) set maxDate(max : string | Date)
{ {
if(this._instance) if(this._instance)
{
if(max)
{ {
// Handle timezone offset, flatpickr uses local time // Handle timezone offset, flatpickr uses local time
let date = new Date(max); let date = new Date(max);
let formatDate = new Date(date.valueOf() + date.getTimezoneOffset() * 60 * 1000); let formatDate = new Date(date.valueOf() + date.getTimezoneOffset() * 60 * 1000);
this._instance.set('maxDate', formatDate) this._instance.set("maxDate", formatDate)
}
else
{
this._instance.set("maxDate", "")
}
} }
} }