Fixes rjsf-team#150: Using native date widgets by default. (rjsf-team#158)

Author: n1k0

README.md

@@ -23,6 +23,7 @@ A [live playground](https://mozilla-services.github.io/react-jsonschema-form/) i
  - [Alternative widgets](#alternative-widgets)
  - [For boolean fields](#for-boolean-fields)
  - [For string fields](#for-string-fields)
+ - [String formats](#string-formats)
  - [For number and integer fields](#for-number-and-integer-fields)
  - [Hidden widgets](#hidden-widgets)
  - [Object fields ordering](#object-fields-ordering)
@@ -215,13 +216,22 @@ Here's a list of supported alternative widgets for different JSONSchema data typ
  * `password`: an `input[type=password]` element is used;
  * by default, a regular `input[type=text]` element is used.
 
-The built-in string field also supports the JSONSchema `format` property, and will render an appropriate widget by default for the following formats:
+##### String formats
+
+The built-in string field also supports the JSONSchema `format` property, and will render an appropriate widget by default for the following string 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!
+- `date-time`: By default, an `input[type=datetime-local]` element is used; if you solely want to rely on a date, a `date` uiSchema alternative widget is available:
+
+![](http://i.imgur.com/xqu6Lcp.png)
+
+Please note that while standardized, `datetime-local` and `date` input elements are not yet supported by Firefox and IE. If you plan on targetting these platforms, two alternative widgets are available:
+
+- `alt-datetime`: Six `select` elements are used to select the year, the month, the day, the hour, the minute and the second;
+- `alt-date`: Three `select` elements are used to select the year, month and the day.
+
+![](http://i.imgur.com/VF5tY60.png)
 
 #### For `number` and `integer` fields
 

playground/samples/date.js

@@ -0,0 +1,54 @@
+module.exports = {
+ schema: {
+ title: "Date and time widgets",
+ type: "object",
+ properties: {
+ native: {
+ title: "Native",
+ description: "May not work on some browsers, notably Firefox Desktop and IE.",
+ type: "object",
+ properties: {
+ "datetime": {
+ type: "string",
+ format: "date-time"
+ },
+ "date": {
+ type: "string",
+ format: "date-time"
+ }
+ }
+ },
+ alternative: {
+ title: "Alternative",
+ description: "These work on every platform.",
+ type: "object",
+ properties: {
+ "alt-datetime": {
+ type: "string",
+ format: "date-time"
+ },
+ "alt-date": {
+ type: "string",
+ format: "date-time"
+ }
+ }
+ }
+ }
+ },
+ uiSchema: {
+ native: {
+ date: {
+ "ui:widget": "date"
+ }
+ },
+ alternative: {
+ "alt-datetime": {
+ "ui:widget": "alt-datetime"
+ },
+ "alt-date": {
+ "ui:widget": "alt-date"
+ }
+ }
+ },
+ formData: {}
+};

playground/samples/index.js

@@ -8,6 +8,7 @@ import references from "./references";
 import custom from "./custom";
 import errors from "./errors";
 import large from "./large";
+import date from "./date";
 
 export const samples = {
  Simple: simple,
@@ -20,4 +21,5 @@ export const samples = {
  Custom: custom,
  Errors: errors,
  Large: large,
+ "Date & time": date,
 };

playground/samples/simple.js

@@ -24,11 +24,6 @@ module.exports = {
  type: "string",
  title: "Password",
  minLength: 3
- },
- date: {
- type: "string",
- format: "date-time",
- title: "Subscription date"
  }
  }
  },
@@ -42,14 +37,16 @@ module.exports = {
  password: {
  "ui:widget": "password",
  "ui:help": "Hint: Make it strong!"
+ },
+ date: {
+ "ui:widget": "alt-datetime"
  }
  },
  formData: {
  firstName: "Chuck",
  lastName: "Norris",
  age: 75,
  bio: "Roundhouse kicking asses since 1940",
- password: "noneed",
- date: new Date().toJSON()
+ password: "noneed"
  }
 };

playground/samples/widgets.js

@@ -14,14 +14,6 @@ module.exports = {
  uri: {
  type: "string",
  format: "uri"
- },
- datetime: {
- type: "string",
- format: "date-time"
- },
- date: {
- type: "string",
- format: "date-time"
  }
  }
  },
@@ -77,11 +69,6 @@ module.exports = {
  "ui:widget": "textarea"
  }
  },
- stringFormats: {
- date: {
- "ui:widget": "date"
- }
- },
  secret: {
  "ui:widget": "hidden"
  }

src/components/widgets/AltDateTimeWidget.js

@@ -0,0 +1,21 @@
+import React, { PropTypes } from "react";
+
+import AltDateWidget from "./AltDateWidget";
+
+
+function AltDateTimeWidget(props) {
+ return <AltDateWidget time {...props} />;
+}
+
+if (process.env.NODE_ENV !== "production") {
+ AltDateTimeWidget.propTypes = {
+ schema: PropTypes.object.isRequired,
+ id: PropTypes.string.isRequired,
+ placeholder: PropTypes.string,
+ value: React.PropTypes.string,
+ required: PropTypes.bool,
+ onChange: PropTypes.func,
+ };
+}
+
+export default AltDateTimeWidget;

src/components/widgets/AltDateWidget.js

@@ -0,0 +1,125 @@
+import React, { Component, PropTypes } from "react";
+
+import { shouldRender, parseDateString, toDateString, pad } from "../../utils";
+import SelectWidget from "../widgets/SelectWidget";
+
+
+function rangeOptions(type, start, stop) {
+ let options = [{value: -1, label: type}];
+ for (let i=start; i<= stop; i++) {
+ options.push({value: i, label: pad(i, 2)});
+ }
+ return options;
+}
+
+function valid(state) {
+ return Object.keys(state).every(key => state[key] !== -1);
+}
+
+function DateElement({type, range, value, select, rootId}) {
+ const id = rootId + "_" + type;
+ return (
+ <SelectWidget
+ schema={{type: "integer"}}
+ id={id}
+ className="form-control"
+ options={rangeOptions(type, range[0], range[1])}
+ value={value}
+ onChange={(value) => select(type, value)} />
+ );
+}
+
+class AltDateWidget extends Component {
+ static 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}, () => {
+ // Only propagate to parent state if we have a complete date{time}
+ if (valid(this.state)) {
+ this.props.onChange(toDateString(this.state));
+ }
+ });
+ };
+
+ setNow = (event) => {
+ event.preventDefault();
+ const {time, onChange} = this.props;
+ const nowDateObj = parseDateString(new Date().toJSON(), time);
+ this.setState(nowDateObj, () => onChange(toDateString(this.state)));
+ };
+
+ clear = (event) => {
+ event.preventDefault();
+ const {time, onChange} = this.props;
+ this.setState(parseDateString("", time), () => onChange(undefined));
+ };
+
+ get dateElementProps() {
+ const {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;
+ }
+
+ render() {
+ const {id} = this.props;
+ return (
+ <ul className="list-inline">{
+ this.dateElementProps.map((props, i) => (
+ <li key={i}>
+ <DateElement rootId={id} select={this.onChange} {...props} />
+ </li>
+ ))
+ }
+ <li>
+ <a href="#" className="btn btn-info btn-now"
+ onClick={this.setNow}>Now</a>
+ </li>
+ <li>
+ <a href="#" className="btn btn-warning btn-clear"
+ onClick={this.clear}>Clear</a>
+ </li>
+ </ul>
+ );
+ }
+}
+
+if (process.env.NODE_ENV !== "production") {
+ AltDateWidget.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 AltDateWidget;

src/components/widgets/DateTimeWidget.js

@@ -1,18 +1,39 @@
 import React, { PropTypes } from "react";
 
-import DateWidget from "./DateWidget";
 
+function fromJSONDate(jsonDate) {
+ return jsonDate ? jsonDate.slice(0, 19) : "";
+}
+
+function toJSONDate(dateString) {
+ if (dateString) {
+ return new Date(dateString).toJSON();
+ }
+}
 
-function DateTimeWidget(props) {
- return <DateWidget time {...props} />;
+function DateTimeWidget({
+ schema,
+ id,
+ value,
+ required,
+ onChange
+}) {
+ return (
+ <input type="datetime-local"
+ id={id}
+ className="form-control"
+ value={fromJSONDate(value)}
+ required={required}
+ onChange={(event) => onChange(toJSONDate(event.target.value))} />
+ );
 }
 
 if (process.env.NODE_ENV !== "production") {
  DateTimeWidget.propTypes = {
  schema: PropTypes.object.isRequired,
  id: PropTypes.string.isRequired,
  placeholder: PropTypes.string,
- value: React.PropTypes.string,
+ value: PropTypes.string,
  required: PropTypes.bool,
  onChange: PropTypes.func,
  };