Fixes rjsf-team#142: Added DateWidget. r=@leplatrem

Author: n1k0

README.md

@@ -218,6 +218,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`: Six `select` elements are used to select the year, the month, the day, the hour, the minute and the second;
+ * If you don't want to deal with time, a `"ui:widget": "date"` uiSchema widget is alternatively available, exposing three selects for year, month and day only;
 - `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/widgets.js

@@ -50,6 +50,10 @@ module.exports = {
  datetime: {
  type: "string",
  format: "date-time"
+ },
+ date: {
+ type: "string",
+ format: "date-time"
  }
  }
  },
@@ -73,6 +77,11 @@ module.exports = {
  "ui:widget": "textarea"
  }
  },
+ stringFormats: {
+ date: {
+ "ui:widget": "date"
+ }
+ },
  secret: {
  "ui:widget": "hidden"
  }
@@ -90,7 +99,6 @@ module.exports = {
  stringFormats: {
  email: "chuck@norris.net",
  uri: "http://chucknorris.com/",
- datetime: new Date().toJSON(),
  },
  secret: "I'm a hidden string."
  }

src/components/widgets/DateTimeWidget.js

@@ -1,82 +1,10 @@
-import React, { Component, PropTypes } from "react";
+import React, { PropTypes } from "react";
 
-import { shouldRender, parseDateString, toDateString, pad } from "../../utils";
-import SelectWidget from "../widgets/SelectWidget";
+import DateWidget from "./DateWidget";
 
 
-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 (
- <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);
- }
-
- componentWillReceiveProps(nextProps) {
- this.setState(parseDateString(nextProps.value));
- }
-
- 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>
- );
- }
+function DateTimeWidget(props) {
+ return <DateWidget time {...props} />;
 }
 
 if (process.env.NODE_ENV !== "production") {

src/components/widgets/DateWidget.js

@@ -0,0 +1,98 @@
+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 (
+ <span>
+ <SelectWidget
+ schema={{type: "integer"}}
+ id={id}
+ className="form-control"
+ options={rangeOptions(range[0], range[1])}
+ value={value}
+ onChange={(value) => select(type, value)} />
+ <p className="text-center help-block">
+ <label htmlFor={id}><small>{type}</small></label>
+ </p>
+ </span>
+ );
+}
+
+class DateWidget extends Component {
+ defaultProps = {
+ time: false
+ };
+
+ constructor(props) {
+ super(props);
+ this.state = parseDateString(props.value, !!props.time);
+ }
+
+ componentWillReceiveProps(nextProps) {
+ this.setState(parseDateString(nextProps.value, !!nextProps.time));
+ }
+
+ shouldComponentUpdate(nextProps, nextState) {
+ return shouldRender(this, nextProps, nextState);
+ }
+
+ onChange = (property, value) => {
+ this.setState({[property]: value}, () => {
+ this.props.onChange(toDateString(this.state));
+ });
+ };
+
+ get dateElements() {
+ const {id, time} = this.props;
+ const {year, month, day, hour, minute, second} = this.state;
+ const data = [
+ {type: "year", range: [1900, 2020], value: year},
+ {type: "month", range: [1, 12], value: month},
+ {type: "day", range: [1, 31], value: day},
+ ];
+ if (time) {
+ data.push(
+ {type: "hour", range: [0, 23], value: hour},
+ {type: "minute", range: [0, 59], value: minute},
+ {type: "second", range: [0, 59], value: second}
+ );
+ }
+ return data.map(props => {
+ return <DateElement rootId={id} select={this.onChange} {...props} />;
+ });
+ }
+
+ render() {
+ return (
+ <ul className="list-inline">{
+ this.dateElements.map((elem, i) => <li key={i}>{elem}</li>)
+ }</ul>
+ );
+ }
+}
+
+if (process.env.NODE_ENV !== "production") {
+ DateWidget.propTypes = {
+ schema: PropTypes.object.isRequired,
+ id: PropTypes.string.isRequired,
+ placeholder: PropTypes.string,
+ value: React.PropTypes.string,
+ required: PropTypes.bool,
+ onChange: PropTypes.func,
+ time: PropTypes.bool,
+ };
+}
+
+export default DateWidget;

src/utils.js

@@ -7,6 +7,7 @@ import UpDownWidget from "./components/widgets/UpDownWidget";
 import RangeWidget from "./components/widgets/RangeWidget";
 import SelectWidget from "./components/widgets/SelectWidget";
 import TextWidget from "./components/widgets/TextWidget";
+import DateWidget from "./components/widgets/DateWidget";
 import DateTimeWidget from "./components/widgets/DateTimeWidget";
 import EmailWidget from "./components/widgets/EmailWidget";
 import URLWidget from "./components/widgets/URLWidget";
@@ -27,6 +28,7 @@ const altWidgetMap = {
  select: SelectWidget,
  textarea: TextareaWidget,
  hidden: HiddenWidget,
+ date: DateWidget,
  },
  number: {
  updown: UpDownWidget,
@@ -244,7 +246,7 @@ function errorPropertyToPath(property) {
  return property.split(".").reduce((path, node) => {
  const match = node.match(RE_ERROR_ARRAY_PATH);
  if (match) {
- const nodeName = node.slice(0, node.indexOf('['));
+ const nodeName = node.slice(0, node.indexOf("["));
  const indices = match.map(str => parseInt(str.slice(1, -1), 10));
  path = path.concat(nodeName, indices);
  } else {
@@ -312,7 +314,7 @@ export function toIdSchema(schema, id, definitions) {
  return idSchema;
 }
 
-export function parseDateString(dateString) {
+export function parseDateString(dateString, includeTime = true) {
  if (!dateString) {
  dateString = new Date().toJSON();
  }
@@ -324,9 +326,9 @@ export function parseDateString(dateString) {
  year: date.getUTCFullYear(),
  month: date.getUTCMonth() + 1, // oh you, javascript.
  day: date.getUTCDate(),
- hour: date.getUTCHours(),
- minute: date.getUTCMinutes(),
- second: date.getUTCSeconds(),
+ hour: includeTime ? date.getUTCHours() : 0,
+ minute: includeTime ? date.getUTCMinutes() : 0,
+ second: includeTime ? date.getUTCSeconds() : 0,
  };
 }
 

test/StringField_test.js

@@ -293,6 +293,111 @@ describe("StringField", () => {
  });
  });
 
+ describe("DateWidget", () => {
+ const uiSchema = {"ui:widget": "date"};
+
+ it("should render a date field", () => {
+ const {node} = createFormComponent({schema: {
+ type: "string",
+ format: "date-time",
+ }, uiSchema});
+
+ expect(node.querySelectorAll(".field select"))
+ .to.have.length.of(3);
+ });
+
+ it("should render a string field with a main label", () => {
+ const {node} = createFormComponent({schema: {
+ type: "string",
+ format: "date-time",
+ title: "foo",
+ }, uiSchema});
+
+ expect(node.querySelector(".field label").textContent)
+ .eql("foo");
+ });
+
+ it("should assign a default value", () => {
+ const datetime = new Date().toJSON();
+ const {comp} = createFormComponent({schema: {
+ type: "string",
+ format: "date-time",
+ default: datetime,
+ }, uiSchema});
+
+ expect(comp.state.formData).eql(datetime);
+ });
+
+ it("should reflect the change into the dom", () => {
+ const {comp, node} = createFormComponent({schema: {
+ type: "string",
+ format: "date-time",
+ }, uiSchema});
+
+ Simulate.change(node.querySelector("#root_year"), {target: {value: "2012"}});
+ Simulate.change(node.querySelector("#root_month"), {target: {value: "10"}});
+ Simulate.change(node.querySelector("#root_day"), {target: {value: "2"}});
+
+ expect(comp.state.formData).eql("2012-10-02T00:00:00.000Z");
+ });
+
+ it("should fill field with data", () => {
+ const datetime = new Date().toJSON();
+ const {comp} = createFormComponent({schema: {
+ type: "string",
+ format: "date-time",
+ }, uiSchema, formData: datetime});
+
+ expect(comp.state.formData).eql(datetime);
+ });
+
+ it("should render the widgets with the expected ids", () => {
+ const {node} = createFormComponent({schema: {
+ type: "string",
+ format: "date-time",
+ }, uiSchema});
+
+ const ids = [].map.call(node.querySelectorAll("select"), node => node.id);
+
+ expect(ids).eql([
+ "root_year",
+ "root_month",
+ "root_day",
+ ]);
+ });
+
+ it("should render the widgets with the expected options' values", () => {
+ const {node} = createFormComponent({schema: {
+ type: "string",
+ format: "date-time",
+ }, uiSchema});
+
+ const lengths = [].map.call(node.querySelectorAll("select"), node => node.length);
+
+ expect(lengths).eql([
+ 121, // from 1900 to 2020
+ 12,
+ 31,
+ ]);
+ const monthOptions = node.querySelectorAll("select#root_month option");
+ const monthOptionsValues = [].map.call(monthOptions, option => option.value);
+ expect(monthOptionsValues).eql([
+ "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"]);
+ });
+
+ it("should render the widgets with the expected options' labels", () => {
+ const {node} = createFormComponent({schema: {
+ type: "string",
+ format: "date-time",
+ }, uiSchema});
+
+ const monthOptions = node.querySelectorAll("select#root_month option");
+ const monthOptionsLabels = [].map.call(monthOptions, option => option.text);
+ expect(monthOptionsLabels).eql([
+ "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"]);
+ });
+ });
+
  describe("EmailWidget", () => {
  it("should render an email field", () => {
  const {node} = createFormComponent({schema: {