tsanie/ui-lib
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

export DateSelector, fix issue about column.align and filter panel position of the last header cell.

Browse Source
This commit is contained in:
Chen Lily
2024-01-30 11:16:57 +08:00
parent df42221b52
commit 0b897cae8a
8 changed files with 133 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
lib/ui/date.js
View File

@ -1,7 +1,13 @@
import { createElement } from "../functions";
export function createDateInput(min, max) {
const date = createElement('input', 'ui-date-cell');
export function createDateInput(min, max, element) {
let date;
if (element instanceof HTMLInputElement) {
date = element;
date.classList.add('ui-date-cell');
} else {
date = createElement('input', 'ui-date-cell');
}
date.required = true;
date.type = 'date';
if (min != null) {
@ -89,16 +95,15 @@ export class DateSelector {
constructor(opts) {
opts ??= {};
if (typeof opts.parent === 'string') {
opts.parent = document.querySelector(opts.parent);
}
if (!(opts.parent instanceof HTMLElement)) {
throw new Error('no specified parent.');
}
this._var.options = opts;
this._var.parent = opts.parent;
}
const el = createDateInput(opts.minDate, opts.maxDate);
create(element) {
const opts = this._var.options;
const el = createDateInput(opts.minDate, opts.maxDate, element);
if (element == null) {
el.disabled = opts.enabled === false;
}
el.addEventListener('blur', e => {
const date = this._getDate(e.target.valueAsDate);
if (date == null) {
@ -109,9 +114,11 @@ export class DateSelector {
}
});
this._var.el = el;
parent.appendChild(el);
return el;
}
get element() { return this._var.el }
get enabled() { return !this._var.el.disabled }
set enabled(flag) {
this._var.el.disabled = flag === false;
@ -122,16 +129,13 @@ export class DateSelector {
setDateValue(this._var.el, val);
}
/**
* @param {string} date
*/
get minDate() { return this._var.el.min }
set minDate(date) {
this._var.el.min = date;
this._var.options.minDate = date;
}
/**
* @param {string} date
*/
get maxDate() { return this._var.el.max }
set maxDate(date) {
this._var.el.max = date;
this._var.options.maxDate = date;
@ -150,4 +154,23 @@ export class DateSelector {
}
return null;
}
static resolve(dom = document.body, trigger) {
const dates = dom.querySelectorAll('input[data-type="date"]');
for (let dat of dates) {
const val = dat.value;
const dateSelector = new DateSelector({
minDate: dat.getAttribute('data-min'),
maxDate: dat.getAttribute('data-max')
});
if (typeof trigger === 'function') {
dateSelector.onDateChanged = date => trigger.call(dateSelector, date);
}
dat.removeAttribute('data-type');
dat.removeAttribute('data-min');
dat.removeAttribute('data-max');
dateSelector.create(dat);
dateSelector.value = val;
}
}
}