Date min max (#162)

* Pass min and max to Inputs.text

Addresses Issue # 158
Creating a text type=date input ignores the min and max parameters making writing a ranged date input difficult

* restore yarn.lock

This was  updated when I did a yarn update. It should not be changed as part of this pull request.

* tweaking yarn.lock

* Update yarn.lock

* Update yarn.lock

* Fixing Scratch.html

fixing typo

* fixed formatting

* Adding min and max to readme

* Update test/scratch.html

Co-authored-by: Philippe Rivière <fil@rezo.net>

* Update test/text-test.js

Co-authored-by: Philippe Rivière <fil@rezo.net>

* Update src/text.js

Co-authored-by: Philippe Rivière <fil@rezo.net>

* changed min max descriptions

* Update src/text.js

Co-authored-by: Philippe Rivière <fil@rezo.net>

* added export textDate to test inputs index

* Update README.md

Co-authored-by: Philippe Rivière <fil@rezo.net>

Co-authored-by: Philippe Rivière <fil@rezo.net>

README.md

@@ -306,6 +306,8 @@ The available *options* are:
 * *pattern* - the [pattern](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern) attribute.
 * *minlength* - [minimum length](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/minlength) attribute.
 * *maxlength* - [maximum length](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/maxlength) attribute.
+* *min* - [minimum value](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/min) attribute; formatted appropriately, *e.g.* yyyy-mm-dd for the date type.
+* *max* - [maximum value](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/max) attribute.
 * *required* - if true, the input must be non-empty; defaults to *minlength* > 0.
 * *validate* - a function to check whether the text input is valid.
 * *width* - the width of the input (not including the label).

src/text.js

@@ -55,6 +55,8 @@ export function text({
   placeholder,
   pattern,
   spellcheck,
+  min,
+  max,
   minlength,
   maxlength,
   required = minlength > 0,
@@ -65,7 +67,7 @@ export function text({
   ...options
 } = {}) {
   const [list, listId] = maybeDatalist(datalist);
-  const input = html`<input type=${type} name=text list=${listId} readonly=${readonly} disabled=${disabled} required=${required} minlength=${minlength} maxlength=${maxlength} pattern=${pattern} spellcheck=${spellcheck === undefined ? false : spellcheck + ""} placeholder=${placeholder}>`;
+  const input = html`<input type=${type} name=text list=${listId} readonly=${readonly} disabled=${disabled} required=${required} min=${min} max=${max} minlength=${minlength} maxlength=${maxlength} pattern=${pattern} spellcheck=${spellcheck === undefined ? false : spellcheck + ""} placeholder=${placeholder}>`;
   const form = html`<form class=__ns__ style=${maybeWidth(width)}>
     ${maybeLabel(label, input)}<div class=__ns__-input>
       ${input}

test/inputs/index.js

@@ -111,6 +111,7 @@ export {
 
 export {
   text,
+  textDate,
   textLabel,
   textLabelHtml,
   textValue,

test/inputs/texts.js

@@ -64,3 +64,7 @@ export async function textReadonly() {
 export async function textPassword() {
   return Inputs.text({type: "password"});
 }
+
+export async function textDate() {
+  return Inputs.text({type: "date"});
+}

test/output/textDate.html

@@ -0,0 +1,5 @@
+<form class="__ns__">
+  <div class="__ns__-input">
+    <input type="date" name="text">
+  </div>
+</form>

test/scratch.html

@@ -217,6 +217,13 @@
 import * as Inputs from "@observablehq/inputs";
 
 document.body.appendChild(Inputs.range());
+document.body.appendChild(Inputs.text({
+  type: "date",
+  label: "2020 Election Campaign Date",
+  min: "2020-01-01",
+  max: "2020-11-04",
+  value: "2020-07-07"
+}));
 
   </script>
 </body>

test/text-test.js

@@ -0,0 +1,43 @@
+import * as Inputs from "@observablehq/inputs";
+import tape from "./jsdom.js";
+
+tape("Inputs.text() test  initial value is set to ''", test => {
+  const t = Inputs.text();
+  test.equal(t.value, "");
+});
+
+tape("Inputs.text() test setting various text properties ", test => {
+  const t = Inputs.text({type: "password", label: "Name", placeholder: "Enter your name", value: "Anonymous"});
+  test.equal(t.value, "Anonymous");
+  test.equal(t.textContent.trim(), "Name");
+  test.equal(t.elements.text.placeholder, "Enter your name");
+  test.equal(t.elements.text.type, "password");
+});
+
+tape("Inputs.text() test type=date settings ", test => {
+  const t = Inputs.text({type: "date", label: "Date",  value: "1970-01-01"});
+  test.equal(t.value, "1970-01-01");
+  test.equal(t.textContent.trim(), "Date");
+  test.equal(t.elements.text.type, "date");
+});
+
+tape("Inputs.text() test type=date setting initial value ", test => {
+  const t = Inputs.text({type: "date", label: "Date",  value: "1970-01-01", min: "1970-01-01", max: "2021-07-11"});
+  test.equal(t.value, "1970-01-01");
+  test.equal(t.textContent.trim(), "Date");
+  test.equal(t.elements.text.type, "date");
+  test.equal(t.elements.text.min, "1970-01-01");
+  test.equal(t.elements.text.max, "2021-07-11");
+});
+
+tape("Inputs.text() test type=date settings for min and max", test => {
+  const t = Inputs.text({type: "date", label: "Date",  value: "2010-01-01", min: "2000-01-01", max: "2021-07-11"});
+  test.equal(t.value, "2010-01-01");
+  t.value = "2015-01-01";
+  test.equal(t.value, "2015-01-01");
+  t.value = "1999-01-01";
+  // We should not be able to the date to a value outside of the [min, max] range
+  test.notEqual(t.value, "1999-01-01");
+  // verify that trying to set an invalid date does not change the existing value
+  test.equal(t.value, "2015-01-01");
+});