Merge branch 'update-readme' of https://github.com/simeg/react-datetime int...

marquex

2016-07-14 0408bd350f18349e9037dad77434ce3e4fbe174f

Merge branch 'update-readme' of https://github.com/simeg/react-datetime into simeg-update-readme

 README.md

@@ -12,9 +12,9 @@
Usage
===============================

Installation :
Installation:
```
npm install react-datetime
npm install --save react-datetime
```

[React.js](http://facebook.github.io/react/) and [Moment.js](http://momentjs.com/) are peer dependencies for react-datetime. These dependencies are not installed along with react-datetime automatically, but your project needs to have them installed in order to make the datetime picker work.
@@ -29,9 +29,19 @@
  return <Datetime />;
}
```
[See this example working](http://codepen.io/arqex/pen/BoqgaG).
[See this example working](http://codepen.io/simeg/pen/mEmQmP).

Don't forget to add the [CSS stylesheet](https://github.com/arqex/react-datetime/blob/master/css/react-datetime.css) to make it work out of the box.
**Don't forget to add the [CSS stylesheet](https://github.com/arqex/react-datetime/blob/master/css/react-datetime.css) to make it work out of the box.**

Build the component (Mac / Linux):
```
npm run build:mac
```

Build the component (Windows):
```
npm run build:windows
```

API
===============================

 css/react-datetime.css

@@ -3,11 +3,11 @@
 */

.rdt {
    position: relative;
  position: relative;
}
.rdtPicker {
    display: none;
    position: absolute;
  display: none;
  position: absolute;
  width: 250px;
  padding: 4px;
  margin-top: 1px;
@@ -17,15 +17,15 @@
  border: 1px solid #f9f9f9;
}
.rdtOpen .rdtPicker {
    display: block;
  display: block;
}
.rdtStatic .rdtPicker {
    box-shadow: none;
    position: static;
  box-shadow: none;
  position: static;
}

.rdtPicker .rdtTimeToggle {
    text-align: center;
  text-align: center;
}

.rdtPicker table {
@@ -91,7 +91,7 @@
  cursor: not-allowed;
}
.rdtPicker th {
    border-bottom: 1px solid #f9f9f9;
  border-bottom: 1px solid #f9f9f9;
}
.rdtPicker .dow {
  width: 14.2857%;
@@ -108,8 +108,8 @@

.rdtPrev span,
.rdtNext span {
    display: block;
    -webkit-touch-callout: none; /* iOS Safari */
  display: block;
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Chrome/Safari/Opera */
  -khtml-user-select: none;    /* Konqueror */
  -moz-user-select: none;      /* Firefox */
@@ -130,62 +130,62 @@
  background: #eeeeee;
}

.rdtPicker tfoot{
    border-top: 1px solid #f9f9f9;
.rdtPicker tfoot {
  border-top: 1px solid #f9f9f9;
}

.rdtPicker button {
    border: none;
    background: none;
    cursor: pointer;
  border: none;
  background: none;
  cursor: pointer;
}
.rdtPicker button:hover {
    background-color: #eee;
  background-color: #eee;
}

.rdtPicker thead button {
    width: 100%;
    height: 100%;
  width: 100%;
  height: 100%;
}

td.rdtMonth,
td.rdtYear {
    height: 50px;
    width: 25%;
    cursor: pointer;
  height: 50px;
  width: 25%;
  cursor: pointer;
}
td.rdtMonth:hover,
td.rdtYear:hover {
    background: #eee;
  background: #eee;
}

.rdtCounters {
    display: inline-block;
  display: inline-block;
}

.rdtCounters > div{
    float: left;
.rdtCounters > div {
  float: left;
}

.rdtCounter {
    height: 100px;
  height: 100px;
}

.rdtCounter {
    width: 40px;
  width: 40px;
}

.rdtCounterSeparator {
    line-height: 100px;
  line-height: 100px;
}

.rdtCounter .rdtBtn {
    height: 40%;
    line-height: 40px;
    cursor: pointer;
    display: block;
  height: 40%;
  line-height: 40px;
  cursor: pointer;
  display: block;

    -webkit-touch-callout: none; /* iOS Safari */
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Chrome/Safari/Opera */
  -khtml-user-select: none;    /* Konqueror */
  -moz-user-select: none;      /* Firefox */
@@ -193,25 +193,25 @@
  user-select: none;
}
.rdtCounter .rdtBtn:hover {
    background: #eee;
  background: #eee;
}
.rdtCounter .rdtCount {
    height: 20%;
    font-size: 1.2em;
  height: 20%;
  font-size: 1.2em;
}

.rdtMilli {
    vertical-align: middle;
    padding-left: 8px;
    width: 48px;
  vertical-align: middle;
  padding-left: 8px;
  width: 48px;
}

.rdtMilli input {
    width: 100%;
    font-size: 1.2em;
    margin-top: 37px;
  width: 100%;
  font-size: 1.2em;
  margin-top: 37px;
}

.rdtDayPart {
    margin-top: 43px;
  margin-top: 43px;
}

 example/example.js

@@ -1,7 +1,8 @@
var DateTime = require('../DateTime.js');
var React = require('react');
var ReactDOM = require('react-dom');

React.render(
ReactDOM.render(
  React.createElement(DateTime, { timeFormat: true }),
  document.getElementById('datetime')
);

 example/react-datetime.css

@@ -3,11 +3,16 @@
 */

.rdt {
    position: relative;
  position: relative;
}

.rdt > input {
  border: 1px solid #000;
}

.rdtPicker {
    display: none;
    position: absolute;
  display: none;
  position: absolute;
  width: 250px;
  padding: 4px;
  margin-top: 1px;
@@ -17,15 +22,15 @@
  border: 1px solid #f9f9f9;
}
.rdtOpen .rdtPicker {
    display: block;
  display: block;
}
.rdtStatic .rdtPicker {
    box-shadow: none;
    position: static;
  box-shadow: none;
  position: static;
}

.rdtPicker .rdtTimeToggle {
    text-align: center;
  text-align: center;
}

.rdtPicker table {
@@ -36,6 +41,9 @@
.rdtPicker th {
  text-align: center;
  height: 28px;
}
.rdtPicker td {
  cursor: pointer;
}
.rdtPicker td.rdtToday:hover,
.rdtPicker td.rdtHour:hover,
@@ -88,7 +96,7 @@
  cursor: not-allowed;
}
.rdtPicker th {
    border-bottom: 1px solid #f9f9f9;
  border-bottom: 1px solid #f9f9f9;
}
.rdtPicker .dow {
  width: 14.2857%;
@@ -102,6 +110,18 @@
  font-size: 21px;
  vertical-align: top;
}

.rdtPrev span,
.rdtNext span {
  display: block;
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Chrome/Safari/Opera */
  -khtml-user-select: none;    /* Konqueror */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* Internet Explorer/Edge */
  user-select: none;
}

.rdtPicker th.rdtDisabled,
.rdtPicker th.rdtDisabled:hover {
  background: none;
@@ -115,76 +135,88 @@
  background: #eeeeee;
}

.rdtPicker tfoot{
    border-top: 1px solid #f9f9f9;
.rdtPicker tfoot {
  border-top: 1px solid #f9f9f9;
}

.rdtPicker button {
    border: none;
    background: none;
    cursor: pointer;
  border: none;
  background: none;
  cursor: pointer;
}
.rdtPicker button:hover {
    background-color: #eee;
  background-color: #eee;
}

.rdtPicker thead button {
    width: 100%;
    height: 100%;
  width: 100%;
  height: 100%;
}

td.rdtMonth,
td.rdtYear {
    height: 50px;
    width: 25%;
    cursor: pointer;
  height: 50px;
  width: 25%;
  cursor: pointer;
}
td.rdtMonth:hover,
td.rdtYear:hover {
    background: #eee;
  background: #eee;
}

.rdtCounters {
    display: inline-block;
  display: inline-block;
}

.rdtCounters > div{
    float: left;
.rdtCounters > div {
  float: left;
}

.rdtCounter {
    height: 100px;
  height: 100px;
}

.rdtCounter {
    width: 40px;
  width: 40px;
}

.rdtCounterSeparator {
    line-height: 100px;
  line-height: 100px;
}

.rdtCounter .rdtBtn {
    height: 40%;
      line-height: 40px;
      cursor: pointer;
  height: 40%;
  line-height: 40px;
  cursor: pointer;
  display: block;

  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Chrome/Safari/Opera */
  -khtml-user-select: none;    /* Konqueror */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* Internet Explorer/Edge */
  user-select: none;
}
.rdtCounter .rdtBtn:hover {
    background: #eee;
  background: #eee;
}
.rdtCounter .rdtCount {
    height: 20%;
    font-size: 1.2em;
  height: 20%;
  font-size: 1.2em;
}

.rdtMilli {
    vertical-align: middle;
    padding-left: 8px;
    width: 48px;
  vertical-align: middle;
  padding-left: 8px;
  width: 48px;
}

.rdtMilli input {
    width: 100%;
    font-size: 1.2em;
    margin-top: 37px;
  width: 100%;
  font-size: 1.2em;
  margin-top: 37px;
}

.rdtDayPart {
  margin-top: 43px;
}

 package.json

@@ -9,7 +9,8 @@
  },
  "main": "./DateTime.js",
  "scripts": {
    "build": "./node_modules/.bin/gulp.cmd",
    "build:win": "./node_modules/.bin/gulp.cmd",
    "build:mac": "./node_modules/.bin/gulp",
    "test": "node node_modules/mocha/bin/mocha tests",
    "dev": "webpack-dev-server --config example/webpack.config.js --devtool eval --progress --colors --hot --content-base example"
  },