Add date validation examples #805

infor-design · Oct 12, 2022 · 3aea70e · 3aea70e
1 parent d09785d
commit 3aea70e
Show file tree

Hide file tree

Showing 7 changed files with 47 additions and 42 deletions.
diff --git a/doc/CHANGELOG.md b/doc/CHANGELOG.md
@@ -22,6 +22,7 @@
 - `[Form]` Fixed compact mode was not working with all components. ([#863](https://github.com/infor-design/enterprise-wc/issues/863))
 - `[Hierarchy]` Fixed hierarchy card submenus open in the wrong place. ([#832](https://github.com/infor-design/enterprise-wc/issues/832))
 - `[Input]` Fixed show/hide button for Safari browser. ([#923](https://github.com/infor-design/enterprise-wc/issues/923))
+- `[Input]` Fixed time validation. ([#805](https://github.com/infor-design/enterprise-wc/issues/805))
 - `[Lookup]` Fixed the dirty tacker was not able to reset. ([#871](https://github.com/infor-design/enterprise-wc/issues/871))
 - `[Pager]` Fixed the direction of the icons in RTL mode. ([#865](https://github.com/infor-design/enterprise-wc/issues/865))
 - `[Popup]` Added ability to place the popup at any side of the align target ([#748](https://github.com/infor-design/enterprise-wc/issues/748))

diff --git a/src/components/ids-input/README.md b/src/components/ids-input/README.md
@@ -147,6 +147,7 @@ setData();
 - `text-align` {string} set text-align to input, it will set `left` as defaults.
 - `type` {string} set the input type, it will set `text` as defaults.
 - `validate` {string} set the input validation rules, use `space` to add multiple validation rules.
+- `format` {string} if the validation rules include date/time, use the setting to set custom date/time format
 - `validationEvents` {string} set the input validation events, use `space` to add multiple validation rules, it will set `blur` as defaults.
 - `value` {string} set the input value.
 

diff --git a/src/components/ids-input/demos/index.yaml b/src/components/ids-input/demos/index.yaml
@@ -17,9 +17,9 @@
   - link: validation-custom.html
     type: Example
     description: Shows a custom validation message
-  - link: validation-types.html
+  - link: validation-date-time.html
     type: Example
-    description: Shows different validation types
+    description: Shows date/time validation and masks
   - link: label-state.html
     type: Test
     description: Showing an example with hidden labels

diff --git a/src/components/ids-input/demos/validation-date-time.html b/src/components/ids-input/demos/validation-date-time.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <title><%= htmlWebpackPlugin.options.title %></title>
+  <%= htmlWebpackPlugin.options.font %>
+</head>
+<body>
+  <ids-container role="main" padding="8" hidden>
+    <ids-theme-switcher mode="light"></ids-theme-switcher>
+    <ids-layout-grid cols="3" gap="md">
+      <ids-layout-grid-cell>
+        <ids-text font-size="12" type="h1">Input - Time Validation</ids-text>
+        <br>
+        <ids-input type="text" validate="time" format="hh:mm a" label="Time validation (hh:mm a)"></ids-input>
+        <ids-input type="text" validate="time" format="h:mm a" label="Time validation (h:mm a)"></ids-input>
+        <ids-input type="text" validate="time" format="HH:mm" label="Time validation (HH:mm)"></ids-input>
+        <ids-input type="text" validate="time" format="H:mm" label="Time validation (H:mm)"></ids-input>
+        <ids-input class="e2e-input-mask" type="text" validate="time" format="hh:mm a" mask="date" label="Time mask with validation (hh:mm a)"></ids-input>
+        <ids-input class="e2e-input-mask" type="text" validate="time" format="HH:mm" mask="date" label="Time mask with validation (HH:mm)"></ids-input>
+      </ids-layout-grid-cell>
+      <ids-layout-grid-cell>
+        <ids-text font-size="12" type="h1">Input - Date Validation</ids-text>
+        <br>
+        <ids-input type="text" validate="date" format="M/d/yyyy" label="Date validation (M/d/yyyy)"></ids-input>
+        <ids-input type="text" validate="date" format="d/M/yyyy" label="Date validation (d/M/yyyy)"></ids-input>
+        <ids-input type="text" validate="date" format="yyyy-MM-dd" label="Date validation (yyyy-MM-dd)"></ids-input>
+        <ids-input type="text" validate="date" format="dd.MM.yyyy" label="Date validation (dd.MM.yyyy)"></ids-input>
+        <ids-input class="e2e-input-mask" type="text" validate="date" format="M/d/yyyy" mask="date" label="Date mask with validation (M/d/yyyy)"></ids-input>
+        <ids-input class="e2e-input-mask" type="text" validate="date" format="yyyy-MM-dd" mask="date" label="Date mask with validation (yyyy-MM-dd)"></ids-input>
+      </ids-layout-grid-cell>
+    </ids-layout-grid>
+  </ids-container>
+</body>
+</html>
diff --git a/src/components/ids-input/demos/validation-date-time.ts b/src/components/ids-input/demos/validation-date-time.ts
@@ -0,0 +1,9 @@
+// Supporting components
+import '../ids-input';
+
+document.addEventListener('DOMContentLoaded', () => {
+  document.querySelectorAll('.e2e-input-mask')
+    .forEach((item: any) => {
+      item.maskOptions = { format: item.format };
+    });
+});
diff --git a/src/components/ids-input/demos/validation-types.html b/src/components/ids-input/demos/validation-types.html
diff --git a/src/components/ids-input/demos/validation-types.ts b/src/components/ids-input/demos/validation-types.ts