Skip to content

Commit 542514e

Browse files
calixtemancalixteman
authored
Merge pull request #20116 from calixteman/add_date_picker
Use a HTML date/time input when a field requires a date or a time.
2 parents aee4f2d + 57ce4f8 commit 542514e

File tree

14 files changed

+317
-26
lines changed

14 files changed

+317
-26
lines changed

‎src/core/annotation.js‎

Lines changed: 65 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2804,19 +2804,72 @@ class TextWidgetAnnotation extends WidgetAnnotation {
28042804
const {
28052805
data: { actions },
28062806
} = this;
2807-
for (const keystrokeAction of actions?.Keystroke || []) {
2808-
const m = keystrokeAction
2809-
.trim()
2810-
.match(/^AF(Date|Time)_Keystroke(?:Ex)?\(['"]?([^'"]+)['"]?\);$/);
2811-
if (m) {
2812-
let format = m[2];
2813-
const num = parseInt(format, 10);
2814-
if (!isNaN(num) && Math.floor(Math.log10(num)) + 1 === m[2].length) {
2815-
format = (m[1] === "Date" ? DateFormats : TimeFormats)[num] ?? format;
2807+
2808+
if (!actions) {
2809+
return;
2810+
}
2811+
2812+
const AFDateTime =
2813+
/^AF(Date|Time)_(?:Keystroke|Format)(?:Ex)?\(['"]?([^'"]+)['"]?\);$/;
2814+
let canUseHTMLDateTime = false;
2815+
if (
2816+
(actions.Format?.length === 1 &&
2817+
actions.Keystroke?.length === 1 &&
2818+
AFDateTime.test(actions.Format[0]) &&
2819+
AFDateTime.test(actions.Keystroke[0])) ||
2820+
(actions.Format?.length === 0 &&
2821+
actions.Keystroke?.length === 1 &&
2822+
AFDateTime.test(actions.Keystroke[0])) ||
2823+
(actions.Keystroke?.length === 0 &&
2824+
actions.Format?.length === 1 &&
2825+
AFDateTime.test(actions.Format[0]))
2826+
) {
2827+
// If the Format and Keystroke actions are the same, we can just use
2828+
// the Format action.
2829+
canUseHTMLDateTime = true;
2830+
}
2831+
const actionsToVisit = [];
2832+
if (actions.Format) {
2833+
actionsToVisit.push(...actions.Format);
2834+
}
2835+
if (actions.Keystroke) {
2836+
actionsToVisit.push(...actions.Keystroke);
2837+
}
2838+
if (canUseHTMLDateTime) {
2839+
delete actions.Keystroke;
2840+
actions.Format = actionsToVisit;
2841+
}
2842+
2843+
for (const formatAction of actionsToVisit) {
2844+
const m = formatAction.match(AFDateTime);
2845+
if (!m) {
2846+
continue;
2847+
}
2848+
const isDate = m[1] === "Date";
2849+
let format = m[2];
2850+
const num = parseInt(format, 10);
2851+
if (!isNaN(num) && Math.floor(Math.log10(num)) + 1 === m[2].length) {
2852+
format = (isDate ? DateFormats : TimeFormats)[num] ?? format;
2853+
}
2854+
this.data.datetimeFormat = format;
2855+
if (!canUseHTMLDateTime) {
2856+
// The datetime format will just be used as a tooltip.
2857+
break;
2858+
}
2859+
if (isDate) {
2860+
// We can have a date and a time so we'll use a time input in this
2861+
// case.
2862+
if (/HH|MM|ss|h/.test(format)) {
2863+
this.data.datetimeType = "datetime-local";
2864+
this.data.timeStep = /ss/.test(format) ? 1 : 60;
2865+
} else {
2866+
this.data.datetimeType = "date";
28162867
}
2817-
this.data[m[1] === "Date" ? "dateFormat" : "timeFormat"] = format;
28182868
break;
28192869
}
2870+
this.data.datetimeType = "time";
2871+
this.data.timeStep = /ss/.test(format) ? 1 : 60;
2872+
break;
28202873
}
28212874
}
28222875

@@ -3013,6 +3066,8 @@ class TextWidgetAnnotation extends WidgetAnnotation {
30133066
strokeColor: this.data.borderColor,
30143067
fillColor: this.data.backgroundColor,
30153068
rotation: this.rotation,
3069+
datetimeFormat: this.data.datetimeFormat,
3070+
hasDatetimeHTML: !!this.data.datetimeType,
30163071
type: "text",
30173072
};
30183073
}

‎src/core/core_utils.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -429,7 +429,7 @@ function _collectJS(entry, xref, list, parents) {
429429
/* keepEscapeSequence = */ true
430430
).replaceAll("\x00", "");
431431
if (code) {
432-
list.push(code);
432+
list.push(code.trim());
433433
}
434434
}
435435
_collectJS(entry.getRaw("Next"), xref, list, parents);

‎src/display/annotation_layer.js‎

Lines changed: 65 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@ import { XfaLayer } from "./xfa_layer.js";
4545

4646
const DEFAULT_FONT_SIZE = 9;
4747
const GetElementsByNameSet = new WeakSet();
48+
const TIMEZONE_OFFSET = new Date().getTimezoneOffset() * 60 * 1000;
4849

4950
/**
5051
* @typedef {Object} AnnotationElementParameters
@@ -1354,9 +1355,10 @@ class TextWidgetAnnotationElement extends WidgetAnnotationElement {
13541355
element.disabled = this.data.readOnly;
13551356
element.name = this.data.fieldName;
13561357
element.tabIndex = 0;
1357-
const format = this.data.dateFormat || this.data.timeFormat;
1358-
if (format) {
1359-
element.title = format;
1358+
const { datetimeFormat, datetimeType, timeStep } = this.data;
1359+
const hasDateOrTime = !!datetimeType && this.enableScripting;
1360+
if (datetimeFormat) {
1361+
element.title = datetimeFormat;
13601362
}
13611363

13621364
this._setRequired(element, this.data.required);
@@ -1397,8 +1399,34 @@ class TextWidgetAnnotationElement extends WidgetAnnotationElement {
13971399
return;
13981400
}
13991401
const { target } = event;
1402+
if (hasDateOrTime) {
1403+
target.type = datetimeType;
1404+
if (timeStep) {
1405+
target.step = timeStep;
1406+
}
1407+
}
1408+
14001409
if (elementData.userValue) {
1401-
target.value = elementData.userValue;
1410+
const value = elementData.userValue;
1411+
if (hasDateOrTime) {
1412+
if (datetimeType === "time") {
1413+
const date = new Date(value);
1414+
const parts = [
1415+
date.getHours(),
1416+
date.getMinutes(),
1417+
date.getSeconds(),
1418+
];
1419+
target.value = parts
1420+
.map(v => v.toString().padStart(2, "0"))
1421+
.join(":");
1422+
} else {
1423+
target.value = new Date(value - TIMEZONE_OFFSET)
1424+
.toISOString()
1425+
.split(datetimeType === "date" ? "T" : ".", 1)[0];
1426+
}
1427+
} else {
1428+
target.value = value;
1429+
}
14021430
}
14031431
elementData.lastCommittedValue = target.value;
14041432
elementData.commitKey = 1;
@@ -1412,7 +1440,11 @@ class TextWidgetAnnotationElement extends WidgetAnnotationElement {
14121440
const actions = {
14131441
value(event) {
14141442
elementData.userValue = event.detail.value ?? "";
1415-
storage.setValue(id, { value: elementData.userValue.toString() });
1443+
if (!hasDateOrTime) {
1444+
storage.setValue(id, {
1445+
value: elementData.userValue.toString(),
1446+
});
1447+
}
14161448
event.target.value = elementData.userValue;
14171449
},
14181450
formattedValue(event) {
@@ -1426,9 +1458,16 @@ class TextWidgetAnnotationElement extends WidgetAnnotationElement {
14261458
// Input hasn't the focus so display formatted string
14271459
event.target.value = formattedValue;
14281460
}
1429-
storage.setValue(id, {
1461+
const data = {
14301462
formattedValue,
1431-
});
1463+
};
1464+
if (hasDateOrTime) {
1465+
// If the field is a date or time, we store the formatted value
1466+
// in the `value` property, so that it can be used by the
1467+
// `Keystroke` action.
1468+
data.value = formattedValue;
1469+
}
1470+
storage.setValue(id, data);
14321471
},
14331472
selRange(event) {
14341473
event.target.setSelectionRange(...event.detail.selRange);
@@ -1516,7 +1555,25 @@ class TextWidgetAnnotationElement extends WidgetAnnotationElement {
15161555
if (!this.data.actions?.Blur) {
15171556
elementData.focused = false;
15181557
}
1519-
const { value } = event.target;
1558+
const { target } = event;
1559+
let { value } = target;
1560+
if (hasDateOrTime) {
1561+
if (value && datetimeType === "time") {
1562+
const parts = value.split(":").map(v => parseInt(v, 10));
1563+
value = new Date(
1564+
2000,
1565+
0,
1566+
1,
1567+
parts[0],
1568+
parts[1],
1569+
parts[2] || 0
1570+
).valueOf();
1571+
target.step = "";
1572+
} else {
1573+
value = new Date(value).valueOf();
1574+
}
1575+
target.type = "text";
1576+
}
15201577
elementData.userValue = value;
15211578
if (elementData.lastCommittedValue !== value) {
15221579
this.linkService.eventBus?.dispatch("dispatcheventinsandbox", {

‎src/scripting_api/console.js‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,9 +25,14 @@ class Console extends PDFObject {
2525
}
2626

2727
println(msg) {
28-
if (typeof msg === "string") {
29-
this._send({ command: "println", value: "PDF.js Console:: " + msg });
28+
if (typeof msg !== "string") {
29+
try {
30+
msg = JSON.stringify(msg);
31+
} catch {
32+
msg = msg.toString?.() || "[Unserializable object]";
33+
}
3034
}
35+
this._send({ command: "println", value: "PDF.js Console:: " + msg });
3136
}
3237

3338
show() {

‎src/scripting_api/doc.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -104,6 +104,20 @@ class Doc extends PDFObject {
104104
}
105105

106106
_initActions() {
107+
for (const { obj } of this._fields.values()) {
108+
// Some fields may have compute their values so we need to send them
109+
// to the view.
110+
const initialValue = obj._initialValue;
111+
if (initialValue) {
112+
this._send({
113+
id: obj._id,
114+
siblings: obj._siblings,
115+
value: initialValue,
116+
formattedValue: obj.value.toString(),
117+
});
118+
}
119+
}
120+
107121
const dontRun = new Set([
108122
"WillClose",
109123
"WillSave",

‎src/scripting_api/field.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,9 @@ class Field extends PDFObject {
8686
this._fieldType = getFieldType(this._actions);
8787
this._siblings = data.siblings || null;
8888
this._rotation = data.rotation || 0;
89+
this._datetimeFormat = data.datetimeFormat || null;
90+
this._hasDateOrTime = !!data.hasDatetimeHTML;
91+
this._util = data.util;
8992

9093
this._globalEval = data.globalEval;
9194
this._appObjects = data.appObjects;
@@ -246,6 +249,16 @@ class Field extends PDFObject {
246249
return;
247250
}
248251

252+
if (this._hasDateOrTime && value) {
253+
const date = this._util.scand(this._datetimeFormat, value);
254+
if (date) {
255+
this._originalValue = date.valueOf();
256+
value = this._util.printd(this._datetimeFormat, date);
257+
this._value = !isNaN(value) ? parseFloat(value) : value;
258+
return;
259+
}
260+
}
261+
249262
if (
250263
value === "" ||
251264
typeof value !== "string" ||
@@ -262,6 +275,10 @@ class Field extends PDFObject {
262275
this._value = !isNaN(_value) ? parseFloat(_value) : value;
263276
}
264277

278+
get _initialValue() {
279+
return (this._hasDateOrTime && this._originalValue) || null;
280+
}
281+
265282
_getValue() {
266283
return this._originalValue ?? this.value;
267284
}

‎src/scripting_api/initialization.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -95,6 +95,7 @@ function initSandbox(params) {
9595
obj.doc = _document;
9696
obj.fieldPath = name;
9797
obj.appObjects = appObjects;
98+
obj.util = util;
9899

99100
const otherFields = annotations.slice(1);
100101

‎src/scripting_api/util.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -619,10 +619,10 @@ class Util extends PDFObject {
619619
}
620620

621621
const data = {
622-
year: new Date().getFullYear(),
622+
year: 2000, // 2000 because it's 00 in yy format.
623623
month: 0,
624624
day: 1,
625-
hours: 12,
625+
hours: 0,
626626
minutes: 0,
627627
seconds: 0,
628628
am: null,

0 commit comments

Comments
 (0)