Merge branch 'malliapi-ExamplesAndBuildFix'

chollier · chollier · commit 24b7d30aec89 · 2015-04-11T12:59:52.000-07:00
Closes #34
diff --git a/examples/README.md b/examples/README.md
@@ -3,4 +3,4 @@
 1. Clone this repo
 2. Run npm install
 3. Start dev server with `npm run examples`
-4. Browse `http://localhost:8080
+4. Browse `http://localhost:8080`
diff --git a/examples/basic/basic.jsx b/examples/basic/basic.jsx
@@ -3,10 +3,55 @@ var DateTimeField = require('react-bootstrap-datetimepicker');
 
 var Basic = React.createClass({
 
-  render () {
-    return <DateTimeField />;
-  }
+	render: function() {
+		return <div className="container">
+						<div className="row">
+							<div className="col-xs-12">
+								<h1>React Bootstrap DateTimePicker</h1>
+								This project is a port of <a href="https://github.com/Eonasdan/bootstrap-datetimepicker">https://github.com/Eonasdan/bootstrap-datetimepicker</a> for React.js
+							</div>
+						</div>
+						<div className="row">
+							<div className="col-xs-12">
+								Default Basic Example
+								<DateTimeField />
+								<pre> {'<DateTimeField />'} </pre>
+							</div>
+						</div>
+						<div className="row">
+							<div className="col-xs-12">
+								Example with default Text
+								<DateTimeField
+									defaultText="Please select a date"
+								/>
+								<pre> {'<DateTimeField defaultText="Please select a date" />'} </pre>
+							</div>
+						</div>
+						<div className="row">
+							<div className="col-xs-12">
+							ViewMode set to years view with custom inputFormat
+							<DateTimeField
+								inputFormat='DD-MM-YYYY'
+								viewMode='years'
+							/>
+							<pre> {'<DateTimeField viewMode="years" inputFormat="DD-MM-YYYY" />'} </pre>
+							</div>
+						</div>
+						<div className="row">
+							<div className="col-xs-12">
+							daysOfWeekDisabled
+							<DateTimeField
+								daysOfWeekDisabled={[0,1,2]}
+							/>
+							<pre> {'<DateTimeField daysOfWeekDisabled={[0,1,2]} />'} </pre>
+							
+						</div>
+						</div>
+					</div>;
+	}
 
 });
 
+
+
 React.render(React.createFactory(Basic)(), document.getElementById('example'));
diff --git a/examples/basic/index.html b/examples/basic/index.html
@@ -3,7 +3,18 @@
 <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
 <link href="../bootstrap-datetimepicker.min.css" rel="stylesheet">
 <body>
-<div style="width: 300px; position: relative;">
+<style>
+  .container {
+    max-width: 500px;
+    margin-left:auto;
+    margin-right:auto;
+  }
+
+  .row {
+    padding-top: 50px;
+  }
+</style>
+<div>
   <div id="example" />
 </div>
 <script src="/basic.js"></script>
diff --git a/examples/webpack.config.js b/examples/webpack.config.js
@@ -1,3 +1,5 @@
+var HtmlWebpackPlugin = require('html-webpack-plugin');
+
 module.exports = {
 
   entry: {
@@ -31,6 +33,9 @@ module.exports = {
     stats: {colors: true},
   },
 
-  devtool: "eval-source-map"
+  devtool: "eval-source-map",
+  plugins: [new HtmlWebpackPlugin({
+    template: __dirname + '/basic/index.html'
+  })]
 
 };
diff --git a/package.json b/package.json
@@ -40,6 +40,7 @@
     "grunt-contrib-watch": "~0.5.3",
     "grunt-react": "~0.10.0",
     "grunt-shell": "~0.6.4",
+    "html-webpack-plugin": "^1.1.0",
     "jsx-loader": "^0.12.2",
     "react": ">=0.12",
     "react-tools": "^0.12.2",
diff --git a/test/coffee/DateTimePickerHoursSpec.jsx.coffee b/test/coffee/DateTimePickerHoursSpec.jsx.coffee
