Fixes rjsf-team#122: Better DateTimeWidget.

Author: n1k0

README.md

@@ -212,7 +212,7 @@ Here's a list of supported alternative widgets for different JSONSchema data typ
 
 The built-in string field also supports the JSONSchema `format` property, and will render an appropriate widget by default for the following formats:
 
-- `date-time`: An `input[type=datetime-local]` element is used;
+- `date-time`: Six `select` elements are used to select the year, the month, the day, the hour, the minute and the second;
 - `email`: An `input[type=email]` element is used;
 - `uri`: An `input[type=url]` element is used;
 - More formats could be supported in a near future, feel free to help us going faster!

playground/samples/simple.js

@@ -24,6 +24,11 @@ module.exports = {
  type: "string",
  title: "Password",
  minLength: 3
+ },
+ date: {
+ type:"string",
+ format: "date-time",
+ title: "Subscription date"
  }
  }
  },
@@ -45,5 +50,6 @@ module.exports = {
  age: 75,
  bio: "Roundhouse kicking asses since 1940",
  password: "noneed",
+ date: new Date().toJSON()
  }
 };

src/components/widgets/DateTimeWidget.js

@@ -1,27 +1,84 @@
-import React, { PropTypes } from "react";
-
-
-function DateTimeWidget({
- schema,
- id,
- placeholder,
- value,
- defaultValue,
- required,
- onChange
-}) {
+import React, { Component, PropTypes } from "react";
+
+import { shouldRender, parseDateString, toDateString, pad } from "../../utils";
+import SelectWidget from "../widgets/SelectWidget";
+
+
+function rangeOptions(start, stop) {
+ let options = [];
+ for (let i=start; i<= stop; i++) {
+ options.push({value: i, label: pad(i, 2)});
+ }
+ return options;
+}
+
+function DateElement({type, range, value, select, rootId}) {
+ const id = rootId + "_" + type;
  return (
- <input type="datetime-local"
- id={id}
- className="form-control"
- value={value}
- defaultValue={defaultValue}
- placeholder={placeholder}
- required={required}
- onChange={(event) => onChange(event.target.value)} />
+ <li>
+ <SelectWidget
+ schema={{type: "integer"}}
+ id={id}
+ className="form-control"
+ options={rangeOptions(range[0], range[1])}
+ value={value}
+ onChange={select} />
+ <p className="text-center help-block">
+ <label htmlFor={id}><small>{type}</small></label>
+ </p>
+ </li>
  );
 }
 
+class DateTimeWidget extends Component {
+ constructor(props) {
+ super(props);
+ this.state = parseDateString(props.value || props.defaultValue);
+ }
+
+ componentWillReceiveProps(nextProps) {
+ this.setState(parseDateString(nextProps.value || nextProps.defaultValue));
+ }
+
+ shouldComponentUpdate(nextProps, nextState) {
+ return shouldRender(this, nextProps, nextState);
+ }
+
+ onChange = (property, value) => {
+ this.setState({[property]: value}, () => {
+ this.props.onChange(toDateString(this.state));
+ });
+ };
+
+ onYearChange = (value) => this.onChange("year", value);
+ onMonthChange = (value) => this.onChange("month", value);
+ onDayChange = (value) => this.onChange("day", value);
+ onHourChange = (value) => this.onChange("hour", value);
+ onMinuteChange = (value) => this.onChange("minute", value);
+ onSecondChange = (value) => this.onChange("second", value);
+
+ render() {
+ const {id} = this.props;
+ const {year, month, day, hour, minute, second} = this.state;
+ return (
+ <ul className="list-inline">
+ <DateElement type="year" rootId={id} range={[1900, 2020]}
+ value={year} select={this.onYearChange} />
+ <DateElement type="month" rootId={id} range={[1, 12]}
+ value={month} select={this.onMonthChange} />
+ <DateElement type="day" rootId={id} range={[1, 31]}
+ value={day} select={this.onDayChange} />
+ <DateElement type="hour" rootId={id} range={[0, 23]}
+ value={hour} select={this.onHourChange} />
+ <DateElement type="minute" rootId={id} range={[0, 59]}
+ value={minute} select={this.onMinuteChange} />
+ <DateElement type="second" rootId={id} range={[0, 59]}
+ value={second} select={this.onSecondChange} />
+ </ul>
+ );
+ }
+}
+
 if (process.env.NODE_ENV !== "production") {
  DateTimeWidget.propTypes = {
  schema: PropTypes.object.isRequired,

src/utils.js

@@ -49,19 +49,25 @@ const stringFormatWidgets = {
  "uri": URLWidget,
 };
 
-export function defaultTypeValue(type) {
+export function defaultTypeValue(schema) {
+ const {type} = schema;
  switch (type) {
  case "array": return [];
  case "boolean": return false;
  case "number": return 0;
  case "object": return {};
- case "string": return "";
+ case "string": {
+ if (schema.format === "date-time") {
+ return new Date().toJSON();
+ }
+ return "";
+ }
  default: return undefined;
  }
 }
 
 export function defaultFieldValue(formData, schema) {
- return formData === null ? defaultTypeValue(schema.type) : formData;
+ return formData === null ? defaultTypeValue(schema) : formData;
 }
 
 export function getAlternativeWidget(schema, widget, registeredWidgets={}) {
@@ -108,7 +114,7 @@ function computeDefaults(schema, parentDefaults, definitions={}) {
  }
  // Not defaults defined for this node, fallback to generic typed ones.
  if (typeof(defaults) === "undefined") {
- defaults = defaultTypeValue(schema.type);
+ defaults = defaultTypeValue(schema);
  }
  // We need to recur for object schema inner default values.
  if (schema.type === "object") {
@@ -288,3 +294,35 @@ export function toIdSchema(schema, id, definitions) {
  }
  return idSchema;
 }
+
+export function parseDateString(dateString) {
+ if (!dateString) {
+ dateString = new Date().toJSON();
+ }
+ const date = new Date(dateString);
+ if (Number.isNaN(date.getTime())) {
+ throw new Error("Unable to parse date " + dateString);
+ }
+ return {
+ year: date.getUTCFullYear(),
+ month: date.getUTCMonth() + 1, // oh you, javascript.
+ day: date.getUTCDate(),
+ hour: date.getUTCHours(),
+ minute: date.getUTCMinutes(),
+ second: date.getUTCSeconds(),
+ };
+}
+
+export function toDateString(dateObj) {
+ const {year, month, day, hour, minute, second} = dateObj;
+ const utcTime = Date.UTC(year, month - 1, day, hour, minute, second);
+ return new Date(utcTime).toJSON();
+}
+
+export function pad(num, size) {
+ let s = String(num);
+ while (s.length < size) {
+ s = "0" + s;
+ }
+ return s;
+}

test/StringField_test.js

@@ -171,11 +171,11 @@ describe("StringField", () => {
  format: "date-time",
  }});
 
- expect(node.querySelectorAll(".field [type=datetime-local]"))
- .to.have.length.of(1);
+ expect(node.querySelectorAll(".field select"))
+ .to.have.length.of(6);
  });
 
- it("should render a string field with a label", () => {
+ it("should render a string field with a main label", () => {
  const {node} = createFormComponent({schema: {
  type: "string",
  format: "date-time",
@@ -186,17 +186,6 @@ describe("StringField", () => {
  .eql("foo");
  });
 
- it("should render a select field with a placeholder", () => {
- const {node} = createFormComponent({schema: {
- type: "string",
- format: "date-time",
- description: "baz",
- }});
-
- expect(node.querySelector(".field [type=datetime-local]").getAttribute("placeholder"))
- .eql("baz");
- });
-
  it("should assign a default value", () => {
  const datetime = new Date().toJSON();
  const {comp} = createFormComponent({schema: {
@@ -209,17 +198,19 @@ describe("StringField", () => {
  });
 
  it("should reflect the change into the dom", () => {
- const {node} = createFormComponent({schema: {
+ const {comp, node} = createFormComponent({schema: {
  type: "string",
  format: "date-time",
  }});
 
- const newDatetime = new Date().toJSON();
- Simulate.change(node.querySelector("[type=datetime-local]"), {
- target: {value: newDatetime}
- });
+ Simulate.change(node.querySelector("#root_year"), {target: {value: "2010"}});
+ Simulate.change(node.querySelector("#root_month"), {target: {value: "12"}});
+ Simulate.change(node.querySelector("#root_day"), {target: {value: "1"}});
+ Simulate.change(node.querySelector("#root_hour"), {target: {value: "0"}});
+ Simulate.change(node.querySelector("#root_minute"), {target: {value: "0"}});
+ Simulate.change(node.querySelector("#root_second"), {target: {value: "0"}});
 
- expect(node.querySelector("[type=datetime-local]").value).eql(newDatetime);
+ expect(comp.state.formData).eql("2010-12-01T00:00:00.000Z");
  });
 
  it("should fill field with data", () => {
@@ -232,27 +223,22 @@ describe("StringField", () => {
  expect(comp.state.formData).eql(datetime);
  });
 
- it("should render the widget with the expected id", () => {
+ it("should render the widgets with the expected ids", () => {
  const {node} = createFormComponent({schema: {
  type: "string",
  format: "date-time",
  }});
 
- expect(node.querySelector("[type=datetime-local]").id)
- .eql("root");
- });
+ const ids = [].map.call(node.querySelectorAll("select"), node => node.id);
 
- it("should reject an invalid entered datetime", () => {
- const {comp, node} = createFormComponent({schema: {
- type: "string",
- format: "date-time",
- }, liveValidate: true});
-
- Simulate.change(node.querySelector("[type=datetime-local]"), {
- target: {value: "invalid"}
- });
-
- expect(comp.state.errors).to.have.length.of(1);
+ expect(ids).eql([
+ "root_year",
+ "root_month",
+ "root_day",
+ "root_hour",
+ "root_minute",
+ "root_second",
+ ]);
  });
  });
 

test/utils_test.js

@@ -7,7 +7,8 @@ import {
  mergeObjects,
  retrieveSchema,
  shouldRender,
- toIdSchema
+ toIdSchema,
+ parseDateString
 } from "../src/utils";
 
 
@@ -470,4 +471,23 @@ describe("utils", () => {
  });
  });
  });
+
+ describe("parseDateString()", () => {
+ it("should parse a valid JSON datetime string", () => {
+ expect(parseDateString("2016-04-05T14:01:30.182Z"))
+ .eql({
+ "year": 2016,
+ "month": 4,
+ "day": 5,
+ "hour": 14,
+ "minute": 1,
+ "second": 30,
+ });
+ });
+
+ it("should raise on invalid JSON datetime", () => {
+ expect(() => parseDateString("plop"))
+ .to.Throw(Error, "Unable to parse");
+ });
+ });
 });