change: replace date controller of Scheduler.
feature: `ui.formatDate` supports formatter. fix: issue about boolean sort.
This commit is contained in:
parent
03e3b4a70f
commit
0ff48a0ac4
@ -1,18 +1,8 @@
|
||||
import { Grid, GridColumn, createElement, setTooltip, createIcon, createCheckbox, createRadiobox, showAlert, showConfirm, Popup, Dropdown, validation } from "../ui";
|
||||
import { r as lang, nullOrEmpty, formatUrl, escapeEmoji, isEmail, isPhone } from "../utility";
|
||||
import { createElement, createCheckbox, createRadiobox, Dropdown, validation, toDateValue } from "../ui";
|
||||
import { r as lang } from "../utility";
|
||||
|
||||
let r = lang;
|
||||
|
||||
function datepicker(element) {
|
||||
if (typeof $?.fn?.datepicker === 'function') {
|
||||
$(element).datepicker({
|
||||
autoHide: true,
|
||||
format: 'm/dd/yyyy'
|
||||
});
|
||||
}
|
||||
return element;
|
||||
}
|
||||
|
||||
export default class ScheduleItem {
|
||||
_var = {};
|
||||
|
||||
@ -79,7 +69,8 @@ export default class ScheduleItem {
|
||||
|
||||
getDateString(s) {
|
||||
const d = this.getDateTime(s);
|
||||
return String(d.getMonth() + 1).padStart(2, '0') + '/' + String(d.getDate()).padStart(2, '0') + '/' + String(d.getFullYear());
|
||||
// return String(d.getMonth() + 1).padStart(2, '0') + '/' + String(d.getDate()).padStart(2, '0') + '/' + String(d.getFullYear());
|
||||
return toDateValue(d, true);
|
||||
}
|
||||
|
||||
setParameters(p) {
|
||||
@ -101,15 +92,8 @@ export default class ScheduleItem {
|
||||
this._var.container.querySelector('.schedule-id-6>input').checked = schedule.Saturday;
|
||||
this._var.container.querySelector('.schedule-id-7>input').checked = schedule.Sunday;
|
||||
this._var.container.querySelector('.schedule-id-dayofmonth').value = String(schedule.DayOfMonth);
|
||||
const start = this.getDateString(schedule.StartDate);
|
||||
const end = this.getDateString(schedule.EndDate);
|
||||
if (typeof $?.fn?.datepicker === 'function') {
|
||||
$(this._var.container.querySelector('.schedule-id-duration-start')).datepicker('setDate', new Date(start));
|
||||
$(this._var.container.querySelector('.schedule-id-duration-end')).datepicker('setDate', new Date(end));
|
||||
} else {
|
||||
this._var.container.querySelector('.schedule-id-duration-start').value = start;
|
||||
this._var.container.querySelector('.schedule-id-duration-end').value = end;
|
||||
}
|
||||
this._var.container.querySelector('.schedule-id-duration-start').value = this.getDateString(schedule.StartDate);
|
||||
this._var.container.querySelector('.schedule-id-duration-end').value = this.getDateString(schedule.EndDate);
|
||||
}
|
||||
|
||||
create() {
|
||||
@ -222,20 +206,10 @@ export default class ScheduleItem {
|
||||
createElement('legend', legend => legend.innerText = 'Duration'),
|
||||
createElement('div', 'schedule-item-line schedule-item-line-duration',
|
||||
createElement('span', span => span.innerText = 'Start date'),
|
||||
datepicker(
|
||||
validation(
|
||||
createElement('input', i => { i.type = 'text', i.className = 'ui-input schedule-id-duration-start', i.maxLength = 10 }),
|
||||
/^([0]?[1-9]|[1][0-2])\/([0]?[1-9]|[12][0-9]|[3][01])\/[0-9]{4}$/
|
||||
)
|
||||
),
|
||||
createElement('input', i => { i.type = 'date', i.className = 'ui-input schedule-id-duration-start', i.maxLength = 10 }),
|
||||
createElement('div', 'schedule-item-placeholder'),
|
||||
createElement('span', span => span.innerText = 'End date'),
|
||||
datepicker(
|
||||
validation(
|
||||
createElement('input', i => { i.type = 'text', i.className = 'ui-input schedule-id-duration-end', i.maxLength = 10 }),
|
||||
/^([0]?[1-9]|[1][0-2])\/([0]?[1-9]|[12][0-9]|[3][01])\/[0-9]{4}$/
|
||||
)
|
||||
)
|
||||
createElement('input', i => { i.type = 'date', i.className = 'ui-input schedule-id-duration-end', i.maxLength = 10 })
|
||||
),
|
||||
createElement('div', 'schedule-item-line',
|
||||
createCheckbox({ className: 'schedule-id-enabled', checked: true, label: 'Enabled' })
|
||||
|
||||
5
lib/ui/date.d.ts
vendored
5
lib/ui/date.d.ts
vendored
@ -10,8 +10,9 @@ export function createDateInput(min?: string, max?: string, element?: HTMLInputE
|
||||
/**
|
||||
* 将日期转换成 yyyy-MM-dd 格式的字符串
|
||||
* @param dt 日期值
|
||||
* @param local 是否视日期为本地时间
|
||||
*/
|
||||
export function toDateValue(dt: Date): string;
|
||||
export function toDateValue(dt: Date, local?: boolean): string;
|
||||
|
||||
/**
|
||||
* 格式化日期字符串
|
||||
@ -23,7 +24,7 @@ export function toDateValue(dt: Date): string;
|
||||
* `new Date('2024-01-26')`<br/>
|
||||
* @returns 格式化为 M/d/yyyy 的日期字符串
|
||||
*/
|
||||
export function formatDate(date: Date | number | string): string;
|
||||
export function formatDate(date: Date | number | string, formatter?: string): string;
|
||||
|
||||
/**
|
||||
* 设置显示日期
|
||||
|
||||
154
lib/ui/date.js
154
lib/ui/date.js
@ -45,6 +45,129 @@ export function toDateValue(dt, local) {
|
||||
return `${year}-${month}-${date}`;
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @param {Date} date
|
||||
* @param {boolean} [utc=true]
|
||||
* @returns {string}
|
||||
*/
|
||||
function getFormatter(date, utc) {
|
||||
const prefix = utc !== false ? 'getUTC' : 'get';
|
||||
const r = {
|
||||
/**
|
||||
* @private
|
||||
* @returns {number} 返回日数字
|
||||
*/
|
||||
j: () => date[`${prefix}Date`](),
|
||||
/**
|
||||
* @private
|
||||
* @returns {string} 返回格式化成两位的日字符串
|
||||
*/
|
||||
d: () => String(r.j()).padStart(2, '0'),
|
||||
/**
|
||||
* @private
|
||||
* @returns {number} 返回月数字
|
||||
*/
|
||||
n: () => date[`${prefix}Month`]() + 1,
|
||||
/**
|
||||
* @private
|
||||
* @returns {string} 返回格式化成两位的月字符串
|
||||
*/
|
||||
m: () => String(r.n()).padStart(2, '0'),
|
||||
/**
|
||||
* @private
|
||||
* @returns {number} 返回年数字
|
||||
*/
|
||||
Y: () => date[`${prefix}FullYear`](),
|
||||
/**
|
||||
* @private
|
||||
* @returns {string} 返回年后两位
|
||||
*/
|
||||
y: () => String(r.Y()).slice(-2),
|
||||
/**
|
||||
* @private
|
||||
* @returns {number} 返回日期当月总天数
|
||||
*/
|
||||
t: () => new Date(r.Y(), r.n(), 0).getDate(),
|
||||
/**
|
||||
* @private
|
||||
* @returns {('1' | '0')} 返回是否为闰年
|
||||
*/
|
||||
L() {
|
||||
const y = r.Y();
|
||||
return t % 4 === 0 && t % 100 !== 0 || t % 400 === 0 ? 1 : 0;
|
||||
},
|
||||
/**
|
||||
* @private
|
||||
* @returns {number} 返回小时数字
|
||||
*/
|
||||
G: () => date[`${prefix}Hours`](),
|
||||
/**
|
||||
* @private
|
||||
* @returns {number} 返回 12 小时制的数字
|
||||
*/
|
||||
g: () => r.G() % 12 || 12,
|
||||
/**
|
||||
* @private
|
||||
* @returns {string} 返回格式化成两位的小时字符串
|
||||
*/
|
||||
H: () => String(r.G()).padStart(2, '0'),
|
||||
/**
|
||||
* @private
|
||||
* @returns {string} 返回格式化成两位的 12 小时制的字符串
|
||||
*/
|
||||
h: () => String(r.g()).padStart(2, '0'),
|
||||
/**
|
||||
* @private
|
||||
* @returns {string} 返回上下午
|
||||
*/
|
||||
A: () => ['AM', 'PM'][r.G() < 12 ? 0 : 1],
|
||||
/**
|
||||
* @private
|
||||
* @returns {string} 返回小写的上下午
|
||||
*/
|
||||
a: () => r.A().toLowerCase(),
|
||||
/**
|
||||
* @private
|
||||
* @returns {string} 返回格式化成两位的分钟字符串
|
||||
*/
|
||||
i: () => String(date[`${prefix}Minutes`]()).padStart(2, '0'),
|
||||
/**
|
||||
* @private
|
||||
* @returns {string} 返回格式化成两位的秒字符串
|
||||
*/
|
||||
s: () => String(date[`${prefix}Seconds`]()).padStart(2, '0'),
|
||||
/**
|
||||
* @private
|
||||
* @returns {string} 返回格式化成六位的毫秒字符串
|
||||
*/
|
||||
u: () => String(1e3 * date[`${prefix}Milliseconds`]()).padStart(6, '0'),
|
||||
/**
|
||||
* @private
|
||||
* @returns {string} 返回时区描述字符串
|
||||
*/
|
||||
e: () => /\((.*)\)/.exec(String(date))[1] || 'Coordinated Universal Time',
|
||||
/**
|
||||
* @private
|
||||
* @returns {string} 返回时区偏移字符串
|
||||
*/
|
||||
O() {
|
||||
const t = date.getTimezoneOffset();
|
||||
const r = Math.abs(t);
|
||||
return (t > 0 ? '-' : '+') + String(100 * Math.floor(r / 60) + r % 60).padStart(4, '0');
|
||||
},
|
||||
/**
|
||||
* @private
|
||||
* @returns {string} 返回 +08:00 这种格式的时区偏移字符串
|
||||
*/
|
||||
P() {
|
||||
const t = r.O();
|
||||
return t.substring(0, 3) + ':' + t.substring(3, 5);
|
||||
}
|
||||
};
|
||||
return r;
|
||||
}
|
||||
|
||||
/**
|
||||
* 格式化日期为 M/d/yyyy 格式的字符串
|
||||
* @param {Date | number | string} date - 需要格式化的日期值，支持的格式如下：
|
||||
@ -54,16 +177,41 @@ export function toDateValue(dt, local) {
|
||||
* * `"1/26/2024"`
|
||||
* * `"638418240000000000"`
|
||||
* * `new Date('2024-01-26')`
|
||||
* @param {string} [formatter] - 格式化格式，默认为 `"m/d/Y"`
|
||||
*
|
||||
* * Y - 年，例如 `2024`
|
||||
* * y - 年的后两位，例如 `"24"`
|
||||
* * n - 月，例如 `2`
|
||||
* * m - 格式化成两位的月，例如 `"02"`
|
||||
* * j - 日，例如 `4`
|
||||
* * d - 格式化成两位的日，例如 `"04"`
|
||||
* * t - 日期当月总天数，例如 `29`
|
||||
* * L - 是否为闰年，例如 `1`
|
||||
* * G - 小时，例如 `15`
|
||||
* * g - 12 小时制的小时，例如 `3`
|
||||
* * H - 格式化成两位的小时，例如 `"15"`
|
||||
* * h - 格式化成两位的 12 小时制的小时，例如 `"03"`
|
||||
* * A - 上下午，例如 `"PM"`
|
||||
* * a - 小写的上下午，例如 `"pm"`
|
||||
* * i - 格式化成两位的分钟，例如 `"39"`
|
||||
* * s - 格式化成两位的秒，例如 `"20"`
|
||||
* * u - 格式化成六位的毫秒，例如 `"023040"`
|
||||
* * e - 时区描述字符串，例如 `"China Standard Time"`
|
||||
* * O - 时区偏移字符串，例如 `"+0800"`
|
||||
* * P - `"+08:00"` 这种格式的时区偏移字符串
|
||||
* @returns {string} 返回格式化后的日期字符串
|
||||
*/
|
||||
export function formatDate(date) {
|
||||
export function formatDate(date, formatter) {
|
||||
formatter ??= 'm/d/Y';
|
||||
if (date instanceof Date) {
|
||||
return `${date.getMonth() + 1}/${date.getDate()}/${date.getFullYear()}`;
|
||||
const f = getFormatter(date, false);
|
||||
return formatter.replace(/\\?(.?)/gi, (k, v) => f[k] ? f[k]() : v);
|
||||
}
|
||||
const ticks = Number(date);
|
||||
if (!isNaN(ticks) && ticks > 0) {
|
||||
date = new Date((ticks - 621355968e9) / 1e4);
|
||||
return `${date.getUTCMonth() + 1}/${date.getUTCDate()}/${date.getUTCFullYear()}`;
|
||||
const f = getFormatter(date);
|
||||
return formatter.replace(/\\?(.?)/gi, (k, v) => f[k] ? f[k]() : v);
|
||||
}
|
||||
return date;
|
||||
}
|
||||
|
||||
@ -805,10 +805,32 @@ export class GridDateColumn extends GridColumn {
|
||||
* * `"1/26/2024"`
|
||||
* * `"638418240000000000"`
|
||||
* * `new Date('2024-01-26')`
|
||||
* @param {string} [formatter] - 格式化格式，默认为 `"m/d/Y"`
|
||||
*
|
||||
* * Y - 年，例如 `2024`
|
||||
* * y - 年的后两位，例如 `"24"`
|
||||
* * n - 月，例如 `2`
|
||||
* * m - 格式化成两位的月，例如 `"02"`
|
||||
* * j - 日，例如 `4`
|
||||
* * d - 格式化成两位的日，例如 `"04"`
|
||||
* * t - 日期当月总天数，例如 `29`
|
||||
* * L - 是否为闰年，例如 `1`
|
||||
* * G - 小时，例如 `15`
|
||||
* * g - 12 小时制的小时，例如 `3`
|
||||
* * H - 格式化成两位的小时，例如 `"15"`
|
||||
* * h - 格式化成两位的 12 小时制的小时，例如 `"03"`
|
||||
* * A - 上下午，例如 `"PM"`
|
||||
* * a - 小写的上下午，例如 `"pm"`
|
||||
* * i - 格式化成两位的分钟，例如 `"39"`
|
||||
* * s - 格式化成两位的秒，例如 `"20"`
|
||||
* * u - 格式化成六位的毫秒，例如 `"023040"`
|
||||
* * e - 时区描述字符串，例如 `"China Standard Time"`
|
||||
* * O - 时区偏移字符串，例如 `"+0800"`
|
||||
* * P - `"+08:00"` 这种格式的时区偏移字符串
|
||||
* @returns {string} 格式化为 M/d/yyyy 的日期字符串
|
||||
*/
|
||||
static formatDate(date) {
|
||||
return formatDate(date);
|
||||
static formatDate(date, formatter) {
|
||||
return formatDate(date, formatter);
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@ -2260,6 +2260,12 @@ export class Grid {
|
||||
return (a, b) => {
|
||||
a = this._getItemProp(a.values, true, col);
|
||||
b = this._getItemProp(b.values, true, col);
|
||||
if (typeof a === 'boolean') {
|
||||
a = a ? 2 : 1;
|
||||
}
|
||||
if (typeof b === 'boolean') {
|
||||
b = b ? 2 : 1;
|
||||
}
|
||||
if (a == null && typeof b === 'number') {
|
||||
a = 0;
|
||||
} else if (typeof a === 'number' && b == null) {
|
||||
@ -3499,6 +3505,8 @@ export class Grid {
|
||||
}
|
||||
}
|
||||
const filterAsValue = col.filterAsValue;
|
||||
const type = this._var.colTypes[col.key];
|
||||
const isDateColumn = type === GridDateColumn || type instanceof GridDateColumn;
|
||||
array = Object.values(dict)
|
||||
.sort((itemA, itemB) => {
|
||||
let a = itemA.Value;
|
||||
@ -3512,7 +3520,7 @@ export class Grid {
|
||||
} else if (a != null && b == null) {
|
||||
return 1;
|
||||
} else {
|
||||
if (!filterAsValue) {
|
||||
if (!filterAsValue && !isDateColumn) {
|
||||
a = itemA.DisplayValue;
|
||||
b = itemB.DisplayValue;
|
||||
}
|
||||
@ -3654,7 +3662,7 @@ export class Grid {
|
||||
const display = Object.prototype.hasOwnProperty.call(item, 'DisplayValue') ? item.DisplayValue : item;
|
||||
div.appendChild(createCheckbox({
|
||||
checked: item.__checked,
|
||||
label: display && String(display).replace(/(\r\n|\n|<br[ \t]*\/?>)/g, '\u00a0'),
|
||||
label: display && String(display).replace(/( |\r\n|\n|<br[ \t]*\/?>)/g, '\u00a0'),
|
||||
title: display,
|
||||
onchange: e => {
|
||||
item.__checked = e.target.checked;
|
||||
|
||||
1647
lib/ui/icon.js
1647
lib/ui/icon.js
File diff suppressed because one or more lines are too long
Loading…
x
Reference in New Issue
Block a user