You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@myfaces.apache.org by lo...@apache.org on 2022/08/03 13:51:53 UTC
[myfaces-tobago] branch main updated: demo: example for custom date field with quick typing
This is an automated email from the ASF dual-hosted git repository.
lofwyr pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/myfaces-tobago.git
The following commit(s) were added to refs/heads/main by this push:
new 59c56bc093 demo: example for custom date field with quick typing
new 6a7c47ce40 Merge pull request #3047 from lofwyr14/main-quick-date
59c56bc093 is described below
commit 59c56bc093647e22005cfa7abdb8f1d0bd0699cd
Author: Udo Schnurpfeil <ud...@irian.eu>
AuthorDate: Wed Aug 3 15:44:35 2022 +0200
demo: example for custom date field with quick typing
---
.../tobago/example/demo/DateController.java | 10 ++++
.../tobago-example-demo/src/main/ts/demo-all.ts | 1 +
.../tobago-example-demo/src/main/ts/demo-date.ts | 68 ++++++++++++++++++++++
.../webapp/content/010-input/40-date/Date.xhtml | 41 ++++++++++++-
.../src/main/webapp/js/demo-all.js | 1 +
.../src/main/webapp/js/demo-all.js.map | 2 +-
.../tobago-example-demo/src/main/webapp/js/demo.js | 62 ++++++++++++++++++++
.../src/main/webapp/js/demo.js.map | 2 +-
8 files changed, 184 insertions(+), 3 deletions(-)
diff --git a/tobago-example/tobago-example-demo/src/main/java/org/apache/myfaces/tobago/example/demo/DateController.java b/tobago-example/tobago-example-demo/src/main/java/org/apache/myfaces/tobago/example/demo/DateController.java
index bbe726507f..45f0feec10 100644
--- a/tobago-example/tobago-example-demo/src/main/java/org/apache/myfaces/tobago/example/demo/DateController.java
+++ b/tobago-example/tobago-example-demo/src/main/java/org/apache/myfaces/tobago/example/demo/DateController.java
@@ -58,6 +58,8 @@ public class DateController implements Serializable {
private final LocalDate today = LocalDate.now();
+ private LocalDate quick;
+
private LocalDate party;
private final LocalDate partyMin = today.plusDays(3);
private final LocalDate partyMax = today.plusDays(10);
@@ -148,6 +150,14 @@ public class DateController implements Serializable {
return today;
}
+ public LocalDate getQuick() {
+ return quick;
+ }
+
+ public void setQuick(LocalDate quick) {
+ this.quick = quick;
+ }
+
public LocalDate getParty() {
return party;
}
diff --git a/tobago-example/tobago-example-demo/src/main/ts/demo-all.ts b/tobago-example/tobago-example-demo/src/main/ts/demo-all.ts
index b456af3fd8..13b138a25a 100644
--- a/tobago-example/tobago-example-demo/src/main/ts/demo-all.ts
+++ b/tobago-example/tobago-example-demo/src/main/ts/demo-all.ts
@@ -17,6 +17,7 @@
import "./demo-alert";
import "./demo-copy-to-clipboard";
+import "./demo-date";
import "./demo-highlight";
import "./demo-inspect";
import "./demo-login";
diff --git a/tobago-example/tobago-example-demo/src/main/ts/demo-date.ts b/tobago-example/tobago-example-demo/src/main/ts/demo-date.ts
new file mode 100644
index 0000000000..316b2aa285
--- /dev/null
+++ b/tobago-example/tobago-example-demo/src/main/ts/demo-date.ts
@@ -0,0 +1,68 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ simple example of a quick typing extra input date field.
+*/
+document.addEventListener("DOMContentLoaded", function (event: Event): void {
+ document.querySelectorAll("tobago-date input[data-quick-pattern]").forEach(input => {
+ console.debug("quick-pattern found for id=", input.id);
+ const quickPattern = (input as HTMLInputElement).dataset.quickPattern as string;
+ let regexp;
+ switch (quickPattern) {
+ case "ddmm":
+ regexp = "[0-3][0-9][0-1][0-9]";
+ break;
+ case "mmdd":
+ regexp = "[0-1][0-9][0-3][0-9]";
+ break;
+ default:
+ console.error("Unsupported patten", quickPattern);
+ return;
+ }
+ const quick = document.createElement("input") as HTMLInputElement;
+ quick.id = input.id + "::quick";
+ quick.type = "text";
+ quick.className = "form-control";
+ quick.style.maxWidth = "5em";
+ quick.placeholder = quickPattern;
+ quick.pattern = regexp;
+ quick.setAttribute("targetId", input.id);
+ input.insertAdjacentElement("beforebegin", quick);
+
+ quick.addEventListener("blur", (event => {
+ const quick = event.currentTarget as HTMLInputElement;
+ let value = quick.value;
+ let day, month, year;
+
+ if (value.length == 4) {
+ day = Number.parseInt(value.substring(0, 2));
+ month = Number.parseInt(value.substring(2, 4));
+ year = new Date().getFullYear();
+ }
+ if (value.length == 6) {
+ }
+
+ let string = `${year}-${month < 10 ? "0" + month : month}-${day < 10 ? "0" + day : day}`;
+ console.info("date ->", string);
+ const input = document.getElementById(quick.getAttribute("targetId")) as HTMLInputElement;
+ input.value = string;
+
+ }));
+
+ });
+});
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/010-input/40-date/Date.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/010-input/40-date/Date.xhtml
index 649861e1ab..6b1c551923 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/010-input/40-date/Date.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/010-input/40-date/Date.xhtml
@@ -42,13 +42,42 @@
<tc:date id="d3" label="Disabled" disabled="true" value="#{dateController.now}"/>
<tc:date id="d4" value="#{dateController.now}"/>
</tc:section>
+
<tc:section label="Focus">
<p>The following date should be selected after reloading the page. This can be done with the attribute
<code>focus</code>.</p>
- <demo-highlight language="markup"><tc:date label="Date (focus)" focus="true"/>></demo-highlight>
+ <demo-highlight language="markup"><tc:date label="Date (focus)" focus="true"/></demo-highlight>
<tc:date id="d5" label="Date (focus)" focus="true"/>
</tc:section>
+ <tc:section label="Custom: Quick Typing">
+ <p>
+ For advanced business application users,
+ browser-based date-picker might be too slow to use, because they are used to typing fast.
+ </p>
+ <p>
+ In this demo is an script file <code>demo-date.ts</code> to
+ show a second input field for shortcuts.
+ Just type e.g. 0212 for December, 2nd in the current year.
+ The next input field will filled automatically and the date-picker can be used.
+ This is activated by
+ </p>
+ <demo-highlight language="markup"><tc:dataAttribute name="quick-pattern" value="ddmm"/></demo-highlight>
+ <p>
+ This script is just an showcase.
+ A real application may use specially adjusted shortcuts. E.g. using also a 2-digit year or
+ creating the special quick input field by a keyboard shortcut, or button.
+ </p>
+ <tc:date id="quick" label="Quick" value="#{dateController.quick}">
+ <tc:dataAttribute name="quick-pattern" value="ddmm"/>
+ </tc:date>
+ If the users typing the <TAB> key to jump to the next field, it might be
+ helpful to set <code>tabIndex="-1"</code> to skip the normal date field.
+ <tc:date id="quickST" label="Skip Tab" value="#{dateController.quick}" tabIndex="-1">
+ <tc:dataAttribute name="quick-pattern" value="ddmm"/>
+ </tc:date>
+ </tc:section>
+
<tc:section label="Types">
<p><tc:badge value="New!" markup="info"/>
It is NOT recommended to use <code><f:convertDateTime></code>,
@@ -155,6 +184,7 @@
<f:convertDateTime dateStyle="full" timeStyle="full" type="both"/>
</tc:out>
</tc:section>
+
<tc:section label="Min and Max">
<p>
To define the earliest or latest acceptable date, the attributes <code>min</code>
@@ -170,6 +200,15 @@
<tc:date id="minmax" label="Party" value="#{dateController.party}" tip="Pick a date in the next 3 to 10 days"
min="#{dateController.partyMin}" max="#{dateController.partyMax}"/>
</tc:section>
+
+ <tc:section label="Now Button">
+ <p>
+ To define the earliest or latest acceptable date, the attributes <code>min</code>
+ and <code>max</code> can be used.
+ </p>
+ <tc:date id="now" label="Now Button" todayButton="true"/>
+ </tc:section>
+
<tc:section label="Submit">
<tc:form id="formSubmit">
<p>Press the button to submit the date to the server. The output field show the current value.
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/js/demo-all.js b/tobago-example/tobago-example-demo/src/main/webapp/js/demo-all.js
index b36826c4fe..e24d327e17 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/js/demo-all.js
+++ b/tobago-example/tobago-example-demo/src/main/webapp/js/demo-all.js
@@ -16,6 +16,7 @@
*/
import "./demo-alert";
import "./demo-copy-to-clipboard";
+import "./demo-date";
import "./demo-highlight";
import "./demo-inspect";
import "./demo-login";
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/js/demo-all.js.map b/tobago-example/tobago-example-demo/src/main/webapp/js/demo-all.js.map
index ea19dcc343..47afcb8399 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/js/demo-all.js.map
+++ b/tobago-example/tobago-example-demo/src/main/webapp/js/demo-all.js.map
@@ -1 +1 @@
-{"version":3,"file":"demo-all.js","sourceRoot":"","sources":["../../ts/demo-all.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,cAAc,CAAC;AACtB,OAAO,0BAA0B,CAAC;AAClC,OAAO,kBAAkB,CAAC;AAC1B,OAAO,gBAAgB,CAAC;AACxB,OAAO,cAAc,CAAC;AACtB,OAAO,eAAe,CAAC;AACvB,OAAO,aAAa,CAAC"}
\ No newline at end of file
+{"version":3,"file":"demo-all.js","sourceRoot":"","sources":["../../ts/demo-all.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,cAAc,CAAC;AACtB,OAAO,0BAA0B,CAAC;AAClC,OAAO,aAAa,CAAC;AACrB,OAAO,kBAAkB,CAAC;AAC1B,OAAO,gBAAgB,CAAC;AACxB,OAAO,cAAc,CAAC;AACtB,OAAO,eAAe,CAAC;AACvB,OAAO,aAAa,CAAC"}
\ No newline at end of file
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/js/demo.js b/tobago-example/tobago-example-demo/src/main/webapp/js/demo.js
index bc8034fe70..592214f06a 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/js/demo.js
+++ b/tobago-example/tobago-example-demo/src/main/webapp/js/demo.js
@@ -94,6 +94,68 @@
}
});
+ /*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ /*
+ simple example of a quick typing extra input date field.
+ */
+ document.addEventListener("DOMContentLoaded", function (event) {
+ document.querySelectorAll("tobago-date input[data-quick-pattern]").forEach(input => {
+ console.debug("quick-pattern found for id=", input.id);
+ const quickPattern = input.dataset.quickPattern;
+ let regexp;
+ switch (quickPattern) {
+ case "ddmm":
+ regexp = "[0-3][0-9][0-1][0-9]";
+ break;
+ case "mmdd":
+ regexp = "[0-1][0-9][0-3][0-9]";
+ break;
+ default:
+ console.error("Unsupported patten", quickPattern);
+ return;
+ }
+ const quick = document.createElement("input");
+ quick.id = input.id + "::quick";
+ quick.type = "text";
+ quick.className = "form-control";
+ quick.style.maxWidth = "5em";
+ quick.placeholder = quickPattern;
+ quick.pattern = regexp;
+ quick.setAttribute("targetId", input.id);
+ input.insertAdjacentElement("beforebegin", quick);
+ quick.addEventListener("blur", (event => {
+ const quick = event.currentTarget;
+ let value = quick.value;
+ let day, month, year;
+ if (value.length == 4) {
+ day = Number.parseInt(value.substring(0, 2));
+ month = Number.parseInt(value.substring(2, 4));
+ year = new Date().getFullYear();
+ }
+ if (value.length == 6) ;
+ let string = `${year}-${month < 10 ? "0" + month : month}-${day < 10 ? "0" + day : day}`;
+ console.info("date ->", string);
+ const input = document.getElementById(quick.getAttribute("targetId"));
+ input.value = string;
+ }));
+ });
+ });
+
/* **********************************************
Begin prism-core.js
********************************************** */
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/js/demo.js.map b/tobago-example/tobago-example-demo/src/main/webapp/js/demo.js.map
index c619ad7fa2..a07753917c 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/js/demo.js.map
+++ b/tobago-example/tobago-example-demo/src/main/webapp/js/demo.js.map
@@ -1 +1 @@
-{"version":3,"file":"demo.js","sources":["demo-alert.js","demo-copy-to-clipboard.js","../../../../node_modules/prismjs/prism.js","demo-highlight.js","demo-inspect.js","demo-login.js","demo-search.js","demo-test.js"],"sourcesContent":["/*\n * Licensed to the Apache Software Foundation (ASF) under one or more\n * contributor license agreements. See the NOTICE file distributed with\n * this work for additional information regarding copyright ownership.\n * The ASF licenses this file to You [...]
\ No newline at end of file
+{"version":3,"file":"demo.js","sources":["demo-alert.js","demo-copy-to-clipboard.js","demo-date.js","../../../../node_modules/prismjs/prism.js","demo-highlight.js","demo-inspect.js","demo-login.js","demo-search.js","demo-test.js"],"sourcesContent":["/*\n * Licensed to the Apache Software Foundation (ASF) under one or more\n * contributor license agreements. See the NOTICE file distributed with\n * this work for additional information regarding copyright ownership.\n * The ASF licenses t [...]
\ No newline at end of file