react-date-picker
Advanced tools
Comparing version 0.1.4 to 1.0.0
@@ -5,8 +5,6 @@ 'use strict' | ||
var React = require('react') | ||
var moment = require('moment') | ||
var React = require('react') | ||
var DatePicker = require('./src/index') | ||
var DATE = Date.now() - 1000*60*60*24 * 200 | ||
var DATE = Date.now() | ||
var VALUE | ||
@@ -19,11 +17,11 @@ | ||
render: function(){ | ||
console.log(moment(DATE).format('YYYY MM DD')) | ||
var v = VALUE || Date.now() | ||
return <div style={{margin: 10}}> | ||
<DatePicker minDate='2014-04-04' maxDate='2014-10-10' date={v} viewDate={DATE} onChange={this.onChange}/></div> | ||
<DatePicker minDate='2014-04-04' maxDate='2015-10-10' date={v} hideFooter={true} viewDate={DATE} onChange={this.onChange}/></div> | ||
}, | ||
onChange: function(date) { | ||
DATE = date | ||
VALUE = date | ||
onChange: function(date, dateString) { | ||
DATE = dateString | ||
VALUE = dateString | ||
this.setState({}) | ||
@@ -30,0 +28,0 @@ } |
{ | ||
"name": "react-date-picker", | ||
"version": "0.1.4", | ||
"version": "1.0.0", | ||
"description": "React Date Picker", | ||
"main": "src/index.jsx", | ||
"main": "lib/index.js", | ||
"scripts": { | ||
@@ -13,3 +13,8 @@ "test": "make", | ||
"build-script": "./node_modules/.bin/webpack --progress --colors --config build-script.config.js", | ||
"build": "npm run build-style | npm run build-script" | ||
"dist": "./node_modules/.bin/webpack --progress --colors --config dist.config.js", | ||
"dist.min": "./node_modules/.bin/webpack --progress --colors --optimize-minimize --optimize-occurence-order --optimize-dedupe --config dist.min.config.js", | ||
"dist-nomoment": "./node_modules/.bin/webpack --progress --colors --config dist.nomoment.config.js", | ||
"dist-nomoment.min": "./node_modules/.bin/webpack --progress --colors --optimize-minimize --optimize-occurence-order --optimize-dedupe --config dist.nomoment.min.config.js", | ||
"lib": "./node_modules/.bin/gulp", | ||
"build": "npm run build-style && npm run dist && npm run dist-nomoment && npm run dist.min && npm run dist-nomoment.min && npm run lib" | ||
}, | ||
@@ -33,14 +38,16 @@ "repository": { | ||
"devDependencies": { | ||
"css-loader": "~0.9.0", | ||
"extract-text-webpack-plugin": "~0.3.3", | ||
"file-loader": "~0.8.1", | ||
"gulp": "^3.8.9", | ||
"gulp-react": "^2.0.0", | ||
"http-server": "~0.7.2", | ||
"json-loader": "~0.5.1", | ||
"jsx-loader": "~0.11.2", | ||
"style-loader": "~0.8.1", | ||
"css-loader": "~0.9.0", | ||
"stylus-loader": "~0.4.0", | ||
"jsx-loader": "~0.11.2", | ||
"webpack-dev-server": "~1.6.5", | ||
"url-loader": "~0.5.5", | ||
"webpack": "~1.4.8", | ||
"file-loader": "~0.8.1", | ||
"url-loader": "~0.5.5", | ||
"extract-text-webpack-plugin": "~0.3.3", | ||
"json-loader": "~0.5.1" | ||
"webpack-dev-server": "~1.6.5" | ||
} | ||
} |
@@ -12,1 +12,39 @@ react-date-picker | ||
## Usage | ||
##### NOTE: Don't forget to include index.css or index.styl! ( require('react-date-picker/index.css') ) | ||
```jsx | ||
var date = '2014-10-10' //or Date.now() | ||
function onChange(moment, dateString){ | ||
//... | ||
} | ||
<DatePicker | ||
minDate='2014-04-04' | ||
maxDate='2015-10-10' | ||
date={date} | ||
onChange={onChange} | ||
/> | ||
``` | ||
## Options | ||
* hideFooter: Boolean - by default footer is shown, so specify this to true if you don't want the footer | ||
* date : Date / String / Moment / Number | ||
* viewDate: Date / String / Moment / Number | ||
* minDate : Date / String / Moment / Number | ||
* maxDate : Date / String / Moment / Number | ||
* onChange: Function | ||
## Other | ||
`react-date-picker` uses the awesome `moment.js` library ( Big thanks!) | ||
If you don't use npm you can include any of the following: | ||
* `dist/react-color-picker.js` - the full sources. NOTE: You'll need to include `React` separately | ||
* `dist/react-color-picker.min.js` - minified & optimized version. NOTE: You'll need to include `React` separately | ||
* `dist/react-color-picker.nomoment.js` - the full sources. NOTE: You'll need to include `React` AND `moment.js` separately | ||
* `dist/react-color-picker.nomoment.min.js` - minified & optimized version. NOTE: You'll need to include `React` AND `moment.js` separately | ||
@@ -85,4 +85,2 @@ 'use strict' | ||
// console.log('value',moment(this.props.value).format('YYYY MM DD')) | ||
return React.DOM.div(copy({ | ||
@@ -106,3 +104,7 @@ className: (this.props.className || '') + ' date-picker' | ||
renderFooter: function() { | ||
var todayText = this.props.today || 'Today' | ||
if (this.props.hideFooter){ | ||
return | ||
} | ||
var todayText = this.props.today || 'Today' | ||
var gotoSelected = this.props.gotoSelected || 'Go to selected' | ||
@@ -226,3 +228,6 @@ | ||
handleChange: function(date, event) { | ||
;(this.props.onChange || emptyFn)(moment(date), event) | ||
date = moment(date) | ||
var text = date.format(this.props.dateFormat) | ||
;(this.props.onChange || emptyFn)(date, text, event) | ||
}, | ||
@@ -229,0 +234,0 @@ |
'use strict' | ||
var CONFIG = require('../config') | ||
var CONFIG = require('../config') | ||
var toMoment = require('../toMoment') | ||
@@ -5,0 +5,0 @@ |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
1238853
51
25164
50
13
3