Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Socket
Sign inDemoInstall

react-datepicker

Package Overview
Dependencies
Maintainers
2
Versions
187
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-datepicker - npm Package Compare versions

Comparing version 0.15.2 to 0.16.0

.babelrc
docs/bundle.js
docs/images/logo.png
docs/index.html
docs/publish.sh
docs/src/boot.jsx
docs/src/breakpoint.scss
docs/src/example_components.jsx
docs/src/examples.scss
docs/src/examples/clear_input.jsx
docs/src/examples/custom_class_name.jsx
docs/src/examples/custom_date_format.jsx
docs/src/examples/custom_start_date.jsx
docs/src/examples/date_range.jsx
docs/src/examples/default.jsx
docs/src/examples/disabled.jsx
docs/src/examples/exclude_dates.jsx
docs/src/examples/include_dates.jsx
docs/src/examples/on_blur_callbacks.jsx
docs/src/examples/placeholder_text.jsx
docs/src/examples/placement.jsx
docs/src/examples/specific_date_range.jsx
docs/src/examples/weekdays.jsx
docs/src/hero_example.jsx
docs/src/hero.scss
docs/src/higlight.scss
docs/src/reset.scss
docs/src/root.jsx
docs/src/style.scss
docs/style.css
server.js
src/.npmignore
src/year_dropdown.jsx
test/year_dropdown_test.js
webpack.docs.config.js

2

bower.json
{
"name": "react-date-picker",
"version": "0.15.2",
"version": "0.16",
"authors": [

@@ -5,0 +5,0 @@ "Remon Oldenbeuving <remon@hackerone.com>",

77

gruntfile.js
"use strict";
var _ = require( "lodash" );
var webpack = require( "webpack" );
var _ = require("lodash");
var webpack = require("webpack");
var mergeWebpackConfig = function( config ) {
var mergeWebpackConfig = function(config) {
// Load webpackConfig only when using `grunt:webpack`
// load of grunt tasks is faster
var webpackConfig = require( "./webpack.config" );
return _.merge( {}, webpackConfig, config, function( a, b ) {
if ( _.isArray( a ) ) {
return a.concat( b );
var webpackConfig = require("./webpack.config");
return _.merge({}, webpackConfig, config, function(a, b) {
if (_.isArray(a)) {
return a.concat(b);
}
} );
});
};
module.exports = function( grunt ) {
grunt.initConfig( {
pkg: grunt.file.readJSON( "package.json" ),
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON("package.json"),
sass: {

@@ -45,7 +45,6 @@ min: {

files: [
"{src,test}/**/*.{js,jsx}",
"gruntfile.js",
"karma.conf.js"
"{src,test,docs/src}/**/*.{js,jsx}",
"*.js"
],
tasks: [ "jscs" ]
tasks: ["jscs"]
},

@@ -55,3 +54,3 @@

files: "**/*.scss",
tasks: [ "sass" ]
tasks: ["sass"]
},

@@ -66,8 +65,8 @@

],
tasks: [ "karma" ]
tasks: ["karma"]
},
webpack: {
files: [ "src/**/*.js", "src/**/*.jsx" ],
tasks: [ "webpack" ]
files: ["src/**/*.js", "src/**/*.jsx"],
tasks: ["webpack"]
}

@@ -93,5 +92,4 @@ },

files: [
"{src,test}/**/*.{js,jsx}",
"gruntfile.js",
"karma.conf.js"
"{src,test,docs/src}/**/*.{js,jsx}",
"*.js"
],

@@ -101,3 +99,3 @@ options: {

verbose: true,
fix: grunt.option( "fix" ) || false
fix: grunt.option("fix") || false
}

@@ -107,8 +105,8 @@ },

webpack: {
unmin: mergeWebpackConfig( {
unmin: mergeWebpackConfig({
output: {
filename: "react-datepicker.js"
}
} ),
min: mergeWebpackConfig( {
}),
min: mergeWebpackConfig({
output: {

@@ -118,22 +116,23 @@ filename: "react-datepicker.min.js"

plugins: [
new webpack.optimize.UglifyJsPlugin( {
new webpack.optimize.UglifyJsPlugin({
compressor: {
warnings: false
}
} )
})
]
} )
}),
docs: require("./webpack.docs.config")
}
} );
});
grunt.loadNpmTasks( "grunt-contrib-sass" );
grunt.loadNpmTasks( "grunt-scss-lint" );
grunt.loadNpmTasks( "grunt-contrib-watch" );
grunt.loadNpmTasks( "grunt-webpack" );
grunt.loadNpmTasks( "grunt-karma" );
grunt.loadNpmTasks( "grunt-jscs" );
grunt.loadNpmTasks("grunt-contrib-sass");
grunt.loadNpmTasks("grunt-scss-lint");
grunt.loadNpmTasks("grunt-contrib-watch");
grunt.loadNpmTasks("grunt-webpack");
grunt.loadNpmTasks("grunt-karma");
grunt.loadNpmTasks("grunt-jscs");
grunt.registerTask( "default", [ "watch", "scsslint" ] );
grunt.registerTask( "travis", [ "jscs", "karma", "scsslint" ] );
grunt.registerTask( "build", [ "scsslint", "webpack", "sass" ] );
grunt.registerTask("default", ["watch", "scsslint"]);
grunt.registerTask("travis", ["jscs", "karma", "scsslint"]);
grunt.registerTask("build", ["scsslint", "webpack", "sass"]);
};

52

karma.conf.js
// Karma configuration
// Generated on Tue Jul 28 2015 16:29:51 GMT+0200 (CEST)
var webpack = require( "webpack" );
var webpack = require("webpack");
var CONTINUOUS_INTEGRATION = process.env.CONTINUOUS_INTEGRATION === "true";
var SAUCE_LABS_BROWSERS = {
sl_chrome: {
base: "SauceLabs",
browserName: "chrome"
},
sl_firefox: {
base: "SauceLabs",
browserName: "firefox"
},
sl_ie_11: {
base: "SauceLabs",
browserName: "internet explorer",
platform: "Windows 8.1",
version: "11"
},
sl_ie_10: {
base: "SauceLabs",
browserName: "internet explorer",
platform: "Windows 7",
version: "10"
}
};
module.exports = function( config ) {
config.set( {
frameworks: [ "mocha", "sinon", "chai" ],
module.exports = function(config) {
config.set({
frameworks: ["mocha", "sinon", "chai"],
customLaunchers: CONTINUOUS_INTEGRATION ? SAUCE_LABS_BROWSERS : null,
browsers: [CONTINUOUS_INTEGRATION ? "Firefox" : "Chrome"],
browsers: CONTINUOUS_INTEGRATION ? Object.keys( SAUCE_LABS_BROWSERS ) : [ "Chrome" ],
singleRun: CONTINUOUS_INTEGRATION,

@@ -44,13 +20,7 @@

preprocessors: {
"test/index.js": [ "webpack", "sourcemap" ]
"test/index.js": ["webpack", "sourcemap"]
},
reporters: CONTINUOUS_INTEGRATION ? [ "dots", "saucelabs" ] : [ "dots" ],
reporters: ["dots"],
sauceLabs: {
testName: "React Date Picker JavaScript tests"
},
captureTimeout: 120000,
webpack: {

@@ -68,5 +38,5 @@ devtool: "inline-source-map",

plugins: [
new webpack.DefinePlugin( {
"process.env.NODE_ENV": JSON.stringify( "test" )
} )
new webpack.DefinePlugin({
"process.env.NODE_ENV": JSON.stringify("test")
})
]

@@ -78,3 +48,3 @@ },

}
} );
});
};

32

package.json

@@ -5,3 +5,3 @@ {

"description": "A simple and reusable datepicker component for React",
"version": "0.15.2",
"version": "0.16.0",
"license": "MIT",

@@ -26,7 +26,11 @@ "homepage": "https://github.com/Hacker0x01/react-datepicker",

"devDependencies": {
"babel": "^5.6.4",
"babel-core": "^5.6.4",
"babel-jest": "^5.3.0",
"babel-loader": "^5.3.2",
"babel-core": "^6.3.15",
"babel-loader": "^6.2.0",
"babel-plugin-react-transform": "^2.0.0-beta1",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"chai": "^3.2.0",
"css-loader": "^0.23.0",
"express": "^4.13.3",
"extract-text-webpack-plugin": "^0.9.1",
"grunt": "0.4.5",

@@ -39,2 +43,3 @@ "grunt-contrib-sass": "0.9.2",

"grunt-webpack": "^1.0.8",
"highlight.js": "^9.0.0",
"karma": "^0.13.3",

@@ -45,3 +50,2 @@ "karma-chai": "^0.1.0",

"karma-mocha": "^0.2.0",
"karma-sauce-launcher": "^0.3.0",
"karma-sinon": "^1.0.4",

@@ -51,8 +55,15 @@ "karma-sourcemap-loader": "^0.3.5",

"mocha": "^2.2.5",
"node-sass": "^3.4.2",
"phantomjs": "^1.9.17",
"react-addons-test-utils": "^0.14.0",
"react-dom": "^0.14.0",
"react-transform-catch-errors": "^1.0.0",
"react-transform-hmr": "^1.0.1",
"redbox-react": "^1.2.0",
"sass-loader": "^3.1.2",
"sinon": "^1.15.4",
"style-loader": "^0.13.0",
"webpack": "^1.7.2",
"webpack-dev-server": "^1.7.0"
"webpack-dev-middleware": "^1.4.0",
"webpack-hot-middleware": "^2.6.0"
},

@@ -65,8 +76,11 @@ "peerDependencies": {

"moment": "^2.10",
"react-onclickoutside": "^4.0.1",
"react-onclickoutside": "4.0.1 - 4.1.1",
"tether": "^1.1.0"
},
"scripts": {
"test": "grunt travis"
"build": "NODE_ENV=production grunt build",
"start": "node server.js",
"test": "NODE_ENV=test grunt travis",
"prepublish": "npm run build"
}
}

51

README.md

@@ -18,8 +18,8 @@ # React Date Picker

You’ll need to install React and Moment.js separate since those dependencies aren’t included in the package. Below is a simple example on how to use the Datepicker in a React view. You will also need to require the css file from this package (or provide your own). The example below shows how to include the css from this package if your build system supports requiring css files (webpack is one that does).
You’ll need to install React and Moment.js separately since those dependencies aren’t included in the package. Below is a simple example on how to use the Datepicker in a React view. You will also need to require the css file from this package (or provide your own). The example below shows how to include the css from this package if your build system supports requiring css files (webpack is one that does).
```
var React = require(‘react’);
var DatePicker = require(‘react-datepicker’);
var moment = require(‘moment’);
var React = require('react');
var DatePicker = require('react-datepicker');
var moment = require('moment');

@@ -29,3 +29,3 @@ require('react-datepicker/dist/react-datepicker.css');

var Example = React.createClass({
displayName: ‘Example’,
displayName: 'Example',

@@ -65,33 +65,32 @@ getInitialState: function() {

- Change date format by passing a different date format in the props: `dateFormat: “YYYY/MM/DD”`
- Add placeholder text: `placeholderText: ‘Click to select a date’` (Defaults to the selected date when no placeholder text is added)
- Give users a predefined date range: `minDate: moment()` & `maxDate: moment().add(5, ‘days’)` (this gives users the ability to select a date between today and 5 days in the future)
- Exclude a set of dates from those that are selectable: `excludeDates: [ moment(), moment(‘2015-01-01’) ]` (prevent users from selecting today or Jan 1st, 2015)
- Set custom moment.js instance (could have defined custom locale settings): `moment: require(‘./foo/moment’)`
- Set custom locale settings for locale: `locale: “cs”`
- Set date format for calendar: `dateFormatCalendar: “YYYY/MM/DD”`
- Set custom weekdays (for locale days): `weekdays: [‘Ne’, ‘Po’, ‘Út’, ‘St’, ‘Čt’, ‘Pá’, ‘So’]`
- Set custom calendar week start day: `weekStart: ‘0’` would start the week on Sunday
- Add placeholder text: `placeholderText: 'Click to select a date'` (Defaults to the selected date when no placeholder text is added)
- Give users a predefined date range: `minDate: moment()` & `maxDate: moment().add(5, 'days')` (this gives users the ability to select a date between today and 5 days in the future)
- Exclude a set of dates from those that are selectable: `excludeDates: [ moment(), moment('2015-01-01') ]` (prevent users from selecting today or Jan 1st, 2015)
- Include a set of dates from those that are selectable: `includeDates: [ moment(), moment(‘2015-01-01’) ]` (allow users selecting only today or Jan 1st, 2015)
- Set custom moment.js instance (could have defined custom locale settings): `moment: require('./foo/moment')`
- Set custom locale settings for locale: `locale: 'cs'`
- Set date format for calendar: `dateFormatCalendar: 'YYYY/MM/DD'`
- Set custom weekdays (for locale days): `weekdays: ['Ne', 'Po', 'Út', 'St', 'Čt', 'Pá', 'So']`
- Set custom calendar week start day: `weekStart: '0'` would start the week on Sunday
More information about the different ways of customisation can on https://hacker0x01.github.io/react-datepicker.
More information about the different ways to customise available at https://hacker0x01.github.io/react-datepicker.
## Local Development
## Compatibility
To help developing this Datepicker, there are two important branches. The `master` branch contains the latest version of the Datepicker component and the `gh-pages` branch contains the examples used on https://hacker0x01.github.io/react-datepicker.
We're always trying to stay compatible with the latest version of React. We can't support all older versions of React, since React is still < 1.0 and introducing breaking changes every release.
# The component
To help you developing the component we’ve set up some tests that covers the basic functionality (can be found in `/tests`). Although, we’re a big fan of tests, this only covers a small piece of the component. We highly recommend you to add a tests when you’re adding new functionality.
Latest compatible versions:
- React 0.14 or newer: All above React-datepicker v0.13.0
- React 0.13: React-datepicker v0.13.0
- pre React 0.13: React-datepicker v0.6.2
While developing, you can run `grunt watch` to compile your changes, run linters and tests.
## Local Development
# The examples
The example site is a simple app that uses the Datepicker by simply requiring the latest published version. This makes it the ideal real world example for every other website that wants to use the component.
The `master` branch contains the latest version of the Datepicker component. To start your example app, you can run `npm start`. This starts a simple webserver on http://localhost:8080. The server will automatically compile your changes, run tests and execute linters. To help you develop the component we’ve set up some tests that covers the basic functionality (can be found in `/tests`). Even though we’re big fans of testing, this only covers a small piece of the component. We highly recommend you add tests when you’re adding new functionality.
To extend the examples with a new example, you can simply duplicate one of the existing examples and change the unique properties of your example.
### The examples
The examples are hosted within the docs folder and are ran in the simple add that loads the Datepicker. To extend the examples with a new example, you can simply duplicate one of the existing examples and change the unique properties of your example.
To start your example app, you can run `npm start`. This starts a simple webserver on http://localhost:8080. You changes will be automatically reloaded in the browser.
To compile your changes for the gh-pages branch you need to run `npm run webpack` when you’re done.
## License
Copyright (c) 2015 HackerOne Inc. and individual contributors. Licensed under MIT license, see [LICENSE](LICENSE) for the full license.

143

src/calendar.jsx

@@ -1,9 +0,10 @@

var React = require( "react" );
var Day = require( "./day" );
var DateUtil = require( "./util/date" );
var map = require( "lodash/collection/map" );
var some = require( "lodash/collection/some" );
import some from "lodash/collection/some";
import map from "lodash/collection/map";
import DateUtil from "./util/date";
import YearDropdown from "./year_dropdown";
import Day from "./day";
import React from "react";
var Calendar = React.createClass( {
mixins: [ require( "react-onclickoutside" ) ],
var Calendar = React.createClass({
mixins: [require("react-onclickoutside")],

@@ -16,2 +17,3 @@ propTypes: {

onSelect: React.PropTypes.func.isRequired,
handleClick: React.PropTypes.func.isRequired,
hideCalendar: React.PropTypes.func.isRequired,

@@ -23,16 +25,17 @@ minDate: React.PropTypes.object,

excludeDates: React.PropTypes.array,
includeDates: React.PropTypes.array,
weekStart: React.PropTypes.string.isRequired
},
handleClickOutside: function() {
handleClickOutside() {
this.props.hideCalendar();
},
getInitialState: function() {
getInitialState() {
return {
date: new DateUtil( this.props.selected ).safeClone( this.props.moment() )
date: new DateUtil(this.props.selected).safeClone(this.props.moment())
};
},
getDefaultProps: function() {
getDefaultProps() {
return {

@@ -43,22 +46,22 @@ weekStart: "1"

componentWillMount: function() {
componentWillMount() {
this.initializeMomentLocale();
},
componentWillReceiveProps: function( nextProps ) {
if ( nextProps.selected === null ) { return; }
componentWillReceiveProps(nextProps) {
if (nextProps.selected === null) { return; }
// When the selected date changed
if ( nextProps.selected !== this.props.selected ) {
this.setState( {
date: new DateUtil( nextProps.selected ).clone()
} );
if (nextProps.selected !== this.props.selected) {
this.setState({
date: new DateUtil(nextProps.selected).clone()
});
}
},
initializeMomentLocale: function() {
var weekdays = this.props.weekdays.slice( 0 );
weekdays = weekdays.concat( weekdays.splice( 0, this.props.weekStart ) );
initializeMomentLocale() {
var weekdays = this.props.weekdays.slice(0);
weekdays = weekdays.concat(weekdays.splice(0, this.props.weekStart));
this.props.moment.locale( this.props.locale, {
this.props.moment.locale(this.props.locale, {
week: {

@@ -68,27 +71,33 @@ dow: this.props.weekStart

weekdaysMin: weekdays
} );
});
},
increaseMonth: function() {
this.setState( {
increaseMonth() {
this.setState({
date: this.state.date.addMonth()
} );
});
},
decreaseMonth: function() {
this.setState( {
decreaseMonth() {
this.setState({
date: this.state.date.subtractMonth()
} );
});
},
weeks: function() {
return this.state.date.mapWeeksInMonth( this.renderWeek );
weeks() {
return this.state.date.mapWeeksInMonth(this.renderWeek);
},
handleDayClick: function( day ) {
this.props.onSelect( day );
handleDayClick(day) {
this.props.onSelect(day);
},
renderWeek: function( weekStart, key ) {
if ( !weekStart.weekInMonth( this.state.date ) ) {
changeYear(year) {
this.setState({
date: this.state.date.changeYear(year)
});
},
renderWeek(weekStart, key) {
if (!weekStart.weekInMonth(this.state.date)) {
return;

@@ -99,3 +108,3 @@ }

<div key={key}>
{this.days( weekStart )}
{this.days(weekStart)}
</div>

@@ -105,18 +114,30 @@ );

renderDay: function( day, key ) {
var minDate = new DateUtil( this.props.minDate ).safeClone(),
maxDate = new DateUtil( this.props.maxDate ).safeClone(),
renderDay(day, key) {
var minDate = new DateUtil(this.props.minDate).safeClone(),
maxDate = new DateUtil(this.props.maxDate).safeClone(),
excludeDates,
includeDates,
disabled,
inRange = day.inRange( this.props.startDate, this.props.endDate );
inRange;
if ( this.props.excludeDates && Array.isArray( this.props.excludeDates ) ) {
excludeDates = map( this.props.excludeDates, function( date ) {
return new DateUtil( date ).safeClone();
} );
if (this.props.excludeDates && Array.isArray(this.props.excludeDates)) {
excludeDates = map(this.props.excludeDates, function(date) {
return new DateUtil(date).safeClone();
});
}
disabled = day.isBefore( minDate ) || day.isAfter( maxDate ) ||
some( excludeDates, function( xDay ) { return day.sameDay( xDay ); } );
if (this.props.includeDates && Array.isArray(this.props.includeDates)) {
includeDates = map(this.props.includeDates, function(date) {
return new DateUtil(date).safeClone();
});
}
disabled = day.isBefore(minDate) || day.isAfter(maxDate) ||
some(excludeDates, function(xDay) { return day.sameDay(xDay); }) ||
(includeDates && !some(includeDates, function(xDay) { return day.sameDay(xDay); }));
if (this.props.startDate && this.props.endDate) {
inRange = day.inRange(new DateUtil(this.props.startDate), new DateUtil(this.props.endDate));
}
return (

@@ -127,4 +148,4 @@ <Day

date={this.state.date}
onClick={this.handleDayClick.bind( this, day )}
selected={new DateUtil( this.props.selected )}
onClick={this.handleDayClick.bind(this, day)}
selected={new DateUtil(this.props.selected)}
inRange={inRange}

@@ -135,15 +156,15 @@ disabled={disabled} />

days: function( weekStart ) {
return weekStart.mapDaysInWeek( this.renderDay );
days(weekStart) {
return weekStart.mapDaysInWeek(this.renderDay);
},
header: function() {
return this.props.moment.weekdaysMin().map( function( day, key ) {
header() {
return this.props.moment.weekdaysMin().map(function(day, key) {
return <div className="datepicker__day" key={key}>{day}</div>;
} );
});
},
render: function() {
render() {
return (
<div className="datepicker">
<div className="datepicker" onClick={this.props.handleClick}>
<div className="datepicker__triangle"></div>

@@ -154,5 +175,9 @@ <div className="datepicker__header">

</a>
<span className="datepicker__current-month">
{this.state.date.localeFormat( this.props.locale, this.props.dateFormat )}
</span>
<h2 className="datepicker__current-month">
{this.state.date.localeFormat(this.props.locale, this.props.dateFormat)}
</h2>
<YearDropdown
onChange={this.changeYear}
year={this.state.date.year()}
/>
<a className="datepicker__navigation datepicker__navigation--next"

@@ -171,4 +196,4 @@ onClick={this.increaseMonth}>

}
} );
});
module.exports = Calendar;

78

src/date_input.jsx

@@ -1,25 +0,40 @@

var React = require( "react" );
var ReactDOM = require( "react-dom" );
var DateUtil = require( "./util/date" );
var moment = require( "moment" );
var DateInput = React.createClass( {
import moment from "moment";
import DateUtil from "./util/date";
import ReactDOM from "react-dom";
import React from "react";
var DateInput = React.createClass({
getDefaultProps: function() {
getDefaultProps() {
return {
dateFormat: "YYYY-MM-DD",
className: "datepicker__input",
onBlur: function() {}
onBlur() {}
};
},
componentDidMount: function() {
this.toggleFocus( this.props.focus );
componentWillMount() {
this.setState({
maybeDate: this.safeDateFormat(this.props.date)
});
},
componentWillReceiveProps: function( newProps ) {
this.toggleFocus( newProps.focus );
componentDidMount() {
this.toggleFocus(this.props.focus);
},
toggleFocus: function( focus ) {
if ( focus ) {
componentWillReceiveProps(newProps) {
this.toggleFocus(newProps.focus);
// If we're receiving a different date then apply it.
// If we're receiving a null date continue displaying the
// value currently in the textbox.
if (newProps.date != null && newProps.date != this.props.date) {
this.setState({
maybeDate: this.safeDateFormat(newProps.date)
});
}
},
toggleFocus(focus) {
if (focus) {
this.refs.input.focus();

@@ -31,19 +46,23 @@ } else {

handleChange: function( event ) {
handleChange(event) {
var value = event.target.value;
var date = moment( value, this.props.dateFormat, true );
var date = moment(value, this.props.dateFormat, true);
if ( date.isValid() ) {
this.props.setSelected( new DateUtil( date ) );
} else if ( value === "" ) {
this.props.clearSelected();
if (date.isValid()) {
this.props.setSelected(new DateUtil(date));
} else {
this.props.invalidateSelected();
}
this.setState({
maybeDate: value
});
},
safeDateFormat: function( date ) {
return !!date ? date.format( this.props.dateFormat ) : null;
safeDateFormat(date) {
return !!date ? date.format(this.props.dateFormat) : null;
},
handleKeyDown: function( event ) {
switch ( event.key ) {
handleKeyDown(event) {
switch (event.key) {
case "Enter":

@@ -60,14 +79,15 @@ event.preventDefault();

handleClick: function( event ) {
if ( !this.props.disabled ) {
this.props.handleClick( event );
handleClick(event) {
if (!this.props.disabled) {
this.props.handleClick(event);
}
},
render: function() {
render() {
return <input
ref="input"
type="text"
id={this.props.id}
name={this.props.name}
value={this.safeDateFormat( this.props.date )}
value={this.state.maybeDate}
onClick={this.handleClick}

@@ -84,4 +104,4 @@ onKeyDown={this.handleKeyDown}

}
} );
});
module.exports = DateInput;

148

src/datepicker.jsx

@@ -1,15 +0,17 @@

var React = require( "react" );
var Popover = require( "./popover" );
var DateUtil = require( "./util/date" );
var Calendar = require( "./calendar" );
var DateInput = require( "./date_input" );
var moment = require( "moment" );
var isEqual = require( "lodash/lang/isEqual" );
import isEqual from "lodash/lang/isEqual";
import moment from "moment";
import DateInput from "./date_input";
import Calendar from "./calendar";
import DateUtil from "./util/date";
import Popover from "./popover";
import React from "react";
var DatePicker = React.createClass( {
var DatePicker = React.createClass({
propTypes: {
weekdays: React.PropTypes.arrayOf( React.PropTypes.string ),
weekdays: React.PropTypes.arrayOf(React.PropTypes.string),
locale: React.PropTypes.string,
dateFormatCalendar: React.PropTypes.string,
disabled: React.PropTypes.bool,
id: React.PropTypes.string,
popoverAttachment: React.PropTypes.string,

@@ -24,15 +26,15 @@ popoverTargetAttachment: React.PropTypes.string,

getDefaultProps: function() {
getDefaultProps() {
return {
weekdays: [ "Su", "Mo", "Tu", "We", "Th", "Fr", "Sa" ],
weekdays: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"],
locale: "en",
dateFormatCalendar: "MMMM YYYY",
dateFormatCalendar: "MMMM",
moment: moment,
onChange: function() {},
onChange() {},
disabled: false,
onFocus: function() {}
onFocus() {}
};
},
getInitialState: function() {
getInitialState() {
return {

@@ -45,83 +47,88 @@ focus: false,

componentWillReceiveProps: function( nextProps ) {
this.setState( {
componentWillReceiveProps(nextProps) {
this.setState({
selected: nextProps.selected
} );
});
},
shouldComponentUpdate: function( nextProps, nextState ) {
return !( isEqual( nextProps, this.props ) && isEqual( nextState, this.state ) );
shouldComponentUpdate(nextProps, nextState) {
return !(isEqual(nextProps, this.props) && isEqual(nextState, this.state));
},
getValue: function() {
getValue() {
return this.state.selected;
},
handleFocus: function() {
handleFocus() {
this.props.onFocus();
this.setState( {
this.setState({
focus: true
} );
});
},
handleBlur: function() {
this.setState( { virtualFocus: false }, function() {
setTimeout( function() {
if ( !this.state.virtualFocus && typeof this.props.onBlur === "function" ) {
this.props.onBlur( this.state.selected );
handleBlur() {
this.setState({ virtualFocus: false }, () => {
setTimeout(() => {
if (!this.state.virtualFocus && typeof this.props.onBlur === "function") {
this.props.onBlur(this.state.selected);
this.hideCalendar();
}
}.bind( this ), 200 );
}.bind( this ) );
}, 200);
});
},
hideCalendar: function() {
setTimeout( function() {
this.setState( {
hideCalendar() {
setTimeout(() => {
this.setState({
focus: false
} );
}.bind( this ), 0 );
});
}, 0);
},
handleSelect: function( date ) {
this.setSelected( date );
handleSelect(date) {
this.setSelected(date);
setTimeout( function() {
setTimeout(() => {
this.hideCalendar();
}.bind( this ), 200 );
}, 200);
},
setSelected: function( date ) {
this.setState( {
selected: date.moment(),
virtualFocus: true
}, function() {
this.props.onChange( this.state.selected );
}.bind( this ) );
setSelected(date) {
this.setState({
selected: date.moment()
}, () => {
this.props.onChange(this.state.selected);
});
},
clearSelected: function() {
if ( this.state.selected === null ) return; //Due to issues with IE onchange events sometimes this gets noisy, so skip if we've already cleared
this.setState( {
selected: null
}, function() {
this.props.onChange( null );
}.bind( this ) );
invalidateSelected() {
if (this.state.selected === null) return;
this.props.onChange(null);
},
onInputClick: function() {
this.setState( {
focus: true,
virtualFocus: true
} );
onInputClick() {
if (!this.state.virtualFocus) {
return this.setState({
focus: true,
virtualFocus: true
});
}
this.setState({ virtualFocus: false });
},
onClearClick: function( event ) {
onClearClick(event) {
event.preventDefault();
this.clearSelected();
// Due to issues with IE onchange events sometimes this gets noisy, so skip if we've already cleared
if (this.state.selected === null) return;
this.setState({
selected: null
}, () => {
this.props.onChange(null);
});
},
calendar: function() {
if ( this.state.focus ) {
calendar() {
if (this.state.focus) {
return (

@@ -135,2 +142,3 @@ <Popover

<Calendar
ref="calendar"
weekdays={this.props.weekdays}

@@ -148,2 +156,4 @@ locale={this.props.locale}

excludeDates={this.props.excludeDates}
handleClick={this.onInputClick}
includeDates={this.props.includeDates}
weekStart={this.props.weekStart} />

@@ -155,5 +165,5 @@ </Popover>

render: function() {
render() {
var clearButton = null;
if ( this.props.isClearable && this.state.selected != null ) {
if (this.props.isClearable && this.state.selected != null) {
clearButton = (

@@ -167,2 +177,4 @@ <a className="close-icon" href="#" onClick={this.onClearClick}></a>

<DateInput
ref="input"
id={this.props.id}
name={this.props.name}

@@ -177,3 +189,3 @@ date={this.state.selected}

setSelected={this.setSelected}
clearSelected={this.clearSelected}
invalidateSelected={this.invalidateSelected}
hideCalendar={this.hideCalendar}

@@ -191,4 +203,4 @@ placeholderText={this.props.placeholderText}

}
} );
});
module.exports = DatePicker;

42

src/day.jsx

@@ -1,12 +0,12 @@

var React = require( "react" );
var moment = require( "moment" );
import moment from "moment";
import React from "react";
var Day = React.createClass( {
handleClick: function( event ) {
if ( this.props.disabled ) return;
var Day = React.createClass({
handleClick(event) {
if (this.props.disabled) return;
this.props.onClick( event );
this.props.onClick(event);
},
isWeekend: function() {
isWeekend() {
var weekday = this.props.day.moment().weekday();

@@ -16,22 +16,22 @@ return weekday === 5 || weekday === 6;

render: function() {
var classes = [ "datepicker__day" ];
render() {
var classes = ["datepicker__day"];
if ( this.props.disabled )
classes.push( "datepicker__day--disabled" );
if (this.props.disabled)
classes.push("datepicker__day--disabled");
if ( this.props.day.sameDay( this.props.selected ) )
classes.push( "datepicker__day--selected" );
if (this.props.day.sameDay(this.props.selected))
classes.push("datepicker__day--selected");
if ( this.props.inRange )
classes.push( "datepicker__day--in-range" );
if (this.props.inRange)
classes.push("datepicker__day--in-range");
if ( this.props.day.sameDay( moment() ) )
classes.push( "datepicker__day--today" );
if (this.props.day.sameDay(moment()))
classes.push("datepicker__day--today");
if ( this.isWeekend() )
classes.push( "datepicker__day--weekend" );
if (this.isWeekend())
classes.push("datepicker__day--weekend");
return (
<div className={classes.join( " " )} onClick={this.handleClick}>
<div className={classes.join(" ")} onClick={this.handleClick}>
{this.props.day.day()}

@@ -41,4 +41,4 @@ </div>

}
} );
});
module.exports = Day;

52

src/popover.jsx

@@ -1,5 +0,5 @@

var React = require( "react" );
var ReactDOM = require( "react-dom" );
import React from "react";
import ReactDOM from "react-dom";
var Popover = React.createClass( {
var Popover = React.createClass({
displayName: "Popover",

@@ -13,3 +13,3 @@

getDefaultProps: function() {
getDefaultProps() {
return {

@@ -28,4 +28,4 @@ attachment: "top left",

componentWillMount: function() {
var popoverContainer = document.createElement( "span" );
componentWillMount() {
var popoverContainer = document.createElement("span");
popoverContainer.className = "datepicker__container";

@@ -35,14 +35,14 @@

document.querySelector( "body" ).appendChild( this._popoverElement );
document.querySelector("body").appendChild(this._popoverElement);
},
componentDidMount: function() {
componentDidMount() {
this._renderPopover();
},
componentDidUpdate: function() {
componentDidUpdate() {
this._renderPopover();
},
_popoverComponent: function() {
_popoverComponent() {
var className = this.props.className;

@@ -56,6 +56,6 @@ return (

_tetherOptions: function() {
_tetherOptions() {
return {
element: this._popoverElement,
target: this.refs.span.parentElement.querySelector( "input" ),
target: this.refs.span.parentElement.querySelector("input"),
attachment: this.props.attachment,

@@ -65,3 +65,3 @@ targetAttachment: this.props.targetAttachment,

optimizations: {
moveElement: false // always moves to <body> anyway!
moveElement: false // Always moves to <body> anyway!
},

@@ -72,26 +72,26 @@ constraints: this.props.constraints

_renderPopover: function() {
ReactDOM.render( this._popoverComponent(), this._popoverElement );
_renderPopover() {
ReactDOM.render(this._popoverComponent(), this._popoverElement);
if ( this._tether != null ) {
this._tether.setOptions( this._tetherOptions() );
} else if ( window && document ) {
var Tether = require( "tether" );
this._tether = new Tether( this._tetherOptions() );
if (this._tether != null) {
this._tether.setOptions(this._tetherOptions());
} else if (window && document) {
var Tether = require("tether");
this._tether = new Tether(this._tetherOptions());
}
},
componentWillUnmount: function() {
componentWillUnmount() {
this._tether.destroy();
ReactDOM.unmountComponentAtNode( this._popoverElement );
if ( this._popoverElement.parentNode ) {
this._popoverElement.parentNode.removeChild( this._popoverElement );
ReactDOM.unmountComponentAtNode(this._popoverElement);
if (this._popoverElement.parentNode) {
this._popoverElement.parentNode.removeChild(this._popoverElement);
}
},
render: function() {
render() {
return <span ref="span"/>;
}
} );
});
module.exports = Popover;

82

src/util/date.js

@@ -1,26 +0,26 @@

function DateUtil( date ) {
function DateUtil(date) {
this._date = date;
}
DateUtil.prototype.isBefore = function( other ) {
return this._date.isBefore( other._date, "day" );
DateUtil.prototype.isBefore = function(other) {
return this._date.isBefore(other._date, "day");
};
DateUtil.prototype.isAfter = function( other ) {
return this._date.isAfter( other._date, "day" );
DateUtil.prototype.isAfter = function(other) {
return this._date.isAfter(other._date, "day");
};
DateUtil.prototype.sameDay = function( other ) {
return this._date.isSame( other._date, "day" );
DateUtil.prototype.sameDay = function(other) {
return this._date.isSame(other._date, "day");
};
DateUtil.prototype.sameMonth = function( other ) {
return this._date.isSame( other._date, "month" );
DateUtil.prototype.sameMonth = function(other) {
return this._date.isSame(other._date, "month");
};
DateUtil.prototype.inRange = function( startDate, endDate ) {
if ( !startDate || !endDate ) return false;
var before = startDate._date.startOf( "day" ).subtract( 1, "seconds" );
var after = endDate._date.startOf( "day" ).add( 1, "seconds" );
return this._date.isBetween( before, after );
DateUtil.prototype.inRange = function(startDate, endDate) {
if (!startDate || !endDate) return false;
var before = startDate._date.startOf("day").subtract(1, "seconds");
var after = endDate._date.startOf("day").add(1, "seconds");
return this._date.isBetween(before, after);
};

@@ -32,10 +32,14 @@

DateUtil.prototype.mapDaysInWeek = function( callback ) {
DateUtil.prototype.year = function() {
return this._date.clone().year();
};
DateUtil.prototype.mapDaysInWeek = function(callback) {
var week = [];
var firstDay = this._date.clone();
for ( var i = 0; i < 7; i++ ) {
var day = new DateUtil( firstDay.clone().add( i, "days" ) );
for (var i = 0; i < 7; i++) {
var day = new DateUtil(firstDay.clone().add(i, "days"));
week[ i ] = callback( day, i );
week[i] = callback(day, i);
}

@@ -46,10 +50,10 @@

DateUtil.prototype.mapWeeksInMonth = function( callback ) {
DateUtil.prototype.mapWeeksInMonth = function(callback) {
var month = [];
var firstDay = this._date.clone().startOf( "month" ).startOf( "week" );
var firstDay = this._date.clone().startOf("month").startOf("week");
for ( var i = 0; i < 6; i++ ) {
var weekStart = new DateUtil( firstDay.clone().add( i, "weeks" ) );
for (var i = 0; i < 6; i++) {
var weekStart = new DateUtil(firstDay.clone().add(i, "weeks"));
month[ i ] = callback( weekStart, i );
month[i] = callback(weekStart, i);
}

@@ -60,37 +64,41 @@

DateUtil.prototype.weekInMonth = function( other ) {
DateUtil.prototype.weekInMonth = function(other) {
var firstDayInWeek = this._date.clone();
var lastDayInWeek = this._date.clone().weekday( 7 );
var lastDayInWeek = this._date.clone().weekday(7);
return firstDayInWeek.isSame( other._date, "month" ) ||
lastDayInWeek.isSame( other._date, "month" );
return firstDayInWeek.isSame(other._date, "month") ||
lastDayInWeek.isSame(other._date, "month");
};
DateUtil.prototype.format = function() {
return this._date.format.apply( this._date, arguments );
return this._date.format.apply(this._date, arguments);
};
DateUtil.prototype.localeFormat = function() {
var args = Array.prototype.slice.call( arguments );
var args = Array.prototype.slice.call(arguments);
var locale = args.shift();
return this._date.locale( locale ).format.apply( this._date, args );
return this._date.locale(locale).format.apply(this._date, args);
};
DateUtil.prototype.addMonth = function() {
return new DateUtil( this._date.clone().add( 1, "month" ) );
return new DateUtil(this._date.clone().add(1, "month"));
};
DateUtil.prototype.subtractMonth = function() {
return new DateUtil( this._date.clone().subtract( 1, "month" ) );
return new DateUtil(this._date.clone().subtract(1, "month"));
};
DateUtil.prototype.changeYear = function(year) {
return new DateUtil(this._date.clone().set("year", year));
};
DateUtil.prototype.clone = function() {
return new DateUtil( this._date.clone() );
return new DateUtil(this._date.clone());
};
DateUtil.prototype.safeClone = function( alternative ) {
if ( !!this._date ) return this.clone();
DateUtil.prototype.safeClone = function(alternative) {
if (!!this._date) return this.clone();
if ( alternative === undefined ) alternative = null;
return new DateUtil( alternative );
if (alternative === undefined) alternative = null;
return new DateUtil(alternative);
};

@@ -97,0 +105,0 @@

30

test/date_input_test.js

@@ -1,8 +0,8 @@

var React = require( "react" );
var ReactDOM = require( "react-dom" );
var TestUtils = require( "react-addons-test-utils" );
var DateInput = require( "../src/date_input.jsx" );
import React from "react";
import ReactDOM from "react-dom";
import TestUtils from "react-addons-test-utils";
import DateInput from "../src/date_input.jsx";
describe( "DateInput", function() {
it( "triggers an event handler when the Enter key is pressed", function( done ) {
describe("DateInput", function() {
it("triggers an event handler when the Enter key is pressed", function(done) {
var dateMock = { format: function() {} };

@@ -15,6 +15,6 @@ var handlerCalled = false;

TestUtils.Simulate.keyDown( ReactDOM.findDOMNode( dateInput ), { key: "Enter" } );
} );
TestUtils.Simulate.keyDown(ReactDOM.findDOMNode(dateInput), { key: "Enter" });
});
it( "adds disabled attribute to input field when disabled is passed as prop", function() {
it("adds disabled attribute to input field when disabled is passed as prop", function() {
var dateInput = TestUtils.renderIntoDocument(

@@ -24,6 +24,6 @@ <DateInput disabled={true} />

expect( dateInput.disabled ).to.not.equal( null );
} );
expect(dateInput.disabled).to.not.equal(null);
});
it( "uses a custom className if provided", function() {
it("uses a custom className if provided", function() {
var dateInput = TestUtils.renderIntoDocument(

@@ -33,4 +33,4 @@ <DateInput className="datepicker__custom-input" />

expect( ReactDOM.findDOMNode( dateInput ).className ).to.equal( "datepicker__custom-input" );
} );
} );
expect(ReactDOM.findDOMNode(dateInput).className).to.equal("datepicker__custom-input");
});
});

32

test/day_test.js

@@ -1,11 +0,11 @@

var React = require( "react" );
var ReactDOM = require( "react-dom" );
var TestUtils = require( "react-addons-test-utils" );
var moment = require( "moment" );
var DateUtil = require( "../src/util/date" );
var Day = require( "../src/day.jsx" );
import React from "react";
import ReactDOM from "react-dom";
import TestUtils from "react-addons-test-utils";
import moment from "moment";
import DateUtil from "../src/util/date";
import Day from "../src/day.jsx";
describe( "Day", function() {
it( "should apply the in-range class if in range", function() {
var day = new DateUtil( moment() );
describe("Day", function() {
it("should apply the in-range class if in range", function() {
var day = new DateUtil(moment());
var dayComponent = TestUtils.renderIntoDocument(

@@ -18,7 +18,7 @@ <Day

expect( ReactDOM.findDOMNode( dayComponent ).className ).to.contain( "datepicker__day--in-range" );
} );
expect(ReactDOM.findDOMNode(dayComponent).className).to.contain("datepicker__day--in-range");
});
it( "should not apply the in-range class if not in range", function() {
var day = new DateUtil( moment() );
it("should not apply the in-range class if not in range", function() {
var day = new DateUtil(moment());
var dayComponent = TestUtils.renderIntoDocument(

@@ -31,4 +31,4 @@ <Day

expect( ReactDOM.findDOMNode( dayComponent ).className ).to.not.contain( "datepicker__day--in-range" );
} );
} );
expect(ReactDOM.findDOMNode(dayComponent).className).to.not.contain("datepicker__day--in-range");
});
});

4

test/index.js

@@ -1,2 +0,2 @@

var context = require.context( ".", true, /_test$/ );
context.keys().forEach( context );
var context = require.context(".", true, /_test$/);
context.keys().forEach(context);

318

test/util/date_test.js

@@ -1,155 +0,173 @@

var moment = require( "moment" );
var DateUtil = require( "../../src/util/date" );
import moment from "moment";
import DateUtil from "../../src/util/date";
describe( "DateUtil", function() {
describe( "#isBefore", function() {
it( "returns true when the date is before the passed date", function() {
var date = new DateUtil( moment( "2014-02-08" ) );
var other_date = new DateUtil( moment( "2014-02-09" ) );
describe("DateUtil", function() {
describe("#isBefore", function() {
it("returns true when the date is before the passed date", function() {
var date = new DateUtil(moment("2014-02-08"));
var otherDate = new DateUtil(moment("2014-02-09"));
expect( date.isBefore( other_date ) ).to.eq( true );
} );
expect(date.isBefore(otherDate)).to.eq(true);
});
it( "returns false when the date is after the passed date", function() {
var date = new DateUtil( moment( "2014-02-08" ) );
var other_date = new DateUtil( moment( "2014-02-05" ) );
it("returns false when the date is after the passed date", function() {
var date = new DateUtil(moment("2014-02-08"));
var otherDate = new DateUtil(moment("2014-02-05"));
expect( date.isBefore( other_date ) ).to.eq( false );
} );
expect(date.isBefore(otherDate)).to.eq(false);
});
it( "returns false when the passed date is the same day", function() {
var date = new DateUtil( moment( "2014-02-08" ) );
var other_date = new DateUtil( moment( "2014-02-08" ) );
it("returns false when the passed date is the same day", function() {
var date = new DateUtil(moment("2014-02-08"));
var otherDate = new DateUtil(moment("2014-02-08"));
expect( date.isBefore( other_date ) ).to.eq( false );
} );
} );
expect(date.isBefore(otherDate)).to.eq(false);
});
});
describe( "#isAfter", function() {
it( "returns true when the date is after the passed date", function() {
var date = new DateUtil( moment( "2014-02-09" ) );
var other_date = new DateUtil( moment( "2014-02-08" ) );
describe("#isAfter", function() {
it("returns true when the date is after the passed date", function() {
var date = new DateUtil(moment("2014-02-09"));
var otherDate = new DateUtil(moment("2014-02-08"));
expect( date.isAfter( other_date ) ).to.eq( true );
} );
expect(date.isAfter(otherDate)).to.eq(true);
});
it( "returns false when the date is before the passed date", function() {
var date = new DateUtil( moment( "2014-02-05" ) );
var other_date = new DateUtil( moment( "2014-02-08" ) );
it("returns false when the date is before the passed date", function() {
var date = new DateUtil(moment("2014-02-05"));
var otherDate = new DateUtil(moment("2014-02-08"));
expect( date.isAfter( other_date ) ).to.eq( false );
} );
expect(date.isAfter(otherDate)).to.eq(false);
});
it( "returns false when the passed date is the same day", function() {
var date = new DateUtil( moment( "2014-02-08" ) );
var other_date = new DateUtil( moment( "2014-02-08" ) );
it("returns false when the passed date is the same day", function() {
var date = new DateUtil(moment("2014-02-08"));
var otherDate = new DateUtil(moment("2014-02-08"));
expect( date.isAfter( other_date ) ).to.eq( false );
} );
} );
expect(date.isAfter(otherDate)).to.eq(false);
});
});
describe( "#sameDay", function() {
it( "returns true when the passed date is the same date", function() {
var date = new DateUtil( moment( "2014-02-08" ) );
var other_date = new DateUtil( moment( "2014-02-08" ) );
describe("#sameDay", function() {
it("returns true when the passed date is the same date", function() {
var date = new DateUtil(moment("2014-02-08"));
var otherDate = new DateUtil(moment("2014-02-08"));
expect( date.sameDay( other_date ) ).to.eq( true );
} );
expect(date.sameDay(otherDate)).to.eq(true);
});
it( "returns true when the passed date is within the same day", function() {
var date = new DateUtil( moment( "2014-02-08 03:30" ) );
var other_date = new DateUtil( moment( "2014-02-08 09:30" ) );
it("returns true when the passed date is within the same day", function() {
var date = new DateUtil(moment("2014-02-08 03:30"));
var otherDate = new DateUtil(moment("2014-02-08 09:30"));
expect( date.sameDay( other_date ) ).to.eq( true );
} );
expect(date.sameDay(otherDate)).to.eq(true);
});
it( "returns false when the passed date is not the same day", function() {
var date = new DateUtil( moment( "2014-02-08" ) );
var other_date = new DateUtil( moment( "2014-02-09" ) );
it("returns false when the passed date is not the same day", function() {
var date = new DateUtil(moment("2014-02-08"));
var otherDate = new DateUtil(moment("2014-02-09"));
expect( date.sameDay( other_date ) ).to.eq( false );
} );
} );
expect(date.sameDay(otherDate)).to.eq(false);
});
});
describe( "#sameMonth", function() {
it( "returns true when the passed date is the same date", function() {
var date = new DateUtil( moment( "2014-02-08" ) );
var other_date = new DateUtil( moment( "2014-02-08" ) );
describe("#sameMonth", function() {
it("returns true when the passed date is the same date", function() {
var date = new DateUtil(moment("2014-02-08"));
var otherDate = new DateUtil(moment("2014-02-08"));
expect( date.sameMonth( other_date ) ).to.eq( true );
} );
expect(date.sameMonth(otherDate)).to.eq(true);
});
it( "returns true when the passed date is within the same month", function() {
var date = new DateUtil( moment( "2014-02-08 03:30" ) );
var other_date = new DateUtil( moment( "2014-02-10 09:30" ) );
it("returns true when the passed date is within the same month", function() {
var date = new DateUtil(moment("2014-02-08 03:30"));
var otherDate = new DateUtil(moment("2014-02-10 09:30"));
expect( date.sameMonth( other_date ) ).to.eq( true );
} );
expect(date.sameMonth(otherDate)).to.eq(true);
});
it( "returns false when the passed date is not the same day", function() {
var date = new DateUtil( moment( "2014-02-08" ) );
var other_date = new DateUtil( moment( "2014-03-08" ) );
it("returns false when the passed date is not the same day", function() {
var date = new DateUtil(moment("2014-02-08"));
var otherDate = new DateUtil(moment("2014-03-08"));
expect( date.sameMonth( other_date ) ).to.eq( false );
} );
} );
expect(date.sameMonth(otherDate)).to.eq(false);
});
});
describe( "#inRange", function() {
it( "returns true when the date is in range the passed date", function() {
var date = new DateUtil( moment( "2014-02-09" ) );
var start_date = new DateUtil( moment( "2014-02-08" ) );
var end_date = new DateUtil( moment( "2014-02-10" ) );
describe("#inRange", function() {
it("returns true when the date is in range the passed date", function() {
var date = new DateUtil(moment("2014-02-09"));
var startDate = new DateUtil(moment("2014-02-08"));
var endDate = new DateUtil(moment("2014-02-10"));
expect( date.inRange( start_date, end_date ) ).to.eq( true );
} );
expect(date.inRange(startDate, endDate)).to.eq(true);
});
it( "returns false when the date is not in range the passed date", function() {
var date = new DateUtil( moment( "2014-02-08" ) );
var start_date = new DateUtil( moment( "2014-02-09" ) );
var end_date = new DateUtil( moment( "2014-02-10" ) );
it("returns false when the date is not in range the passed date", function() {
var date = new DateUtil(moment("2014-02-08"));
var startDate = new DateUtil(moment("2014-02-09"));
var endDate = new DateUtil(moment("2014-02-10"));
expect( date.inRange( start_date, end_date ) ).to.eq( false );
} );
expect(date.inRange(startDate, endDate)).to.eq(false);
});
it( "returns true when the passed date is the same day as start of range", function() {
var date = new DateUtil( moment( "2014-02-09" ) );
var start_date = new DateUtil( moment( "2014-02-09" ) );
var end_date = new DateUtil( moment( "2014-02-10" ) );
it("returns true when the passed date is the same day as start of range", function() {
var date = new DateUtil(moment("2014-02-09"));
var startDate = new DateUtil(moment("2014-02-09"));
var endDate = new DateUtil(moment("2014-02-10"));
expect( date.inRange( start_date, end_date ) ).to.eq( true );
} );
expect(date.inRange(startDate, endDate)).to.eq(true);
});
it( "returns true when the passed date is the same day as end of range", function() {
var date = new DateUtil( moment( "2014-02-10" ) );
var start_date = new DateUtil( moment( "2014-02-09" ) );
var end_date = new DateUtil( moment( "2014-02-10" ) );
it("returns true when the passed date is the same day as end of range", function() {
var date = new DateUtil(moment("2014-02-10"));
var startDate = new DateUtil(moment("2014-02-09"));
var endDate = new DateUtil(moment("2014-02-10"));
expect( date.inRange( start_date, end_date ) ).to.eq( true );
} );
expect(date.inRange(startDate, endDate)).to.eq(true);
});
it( "returns false when the start of range is missing", function() {
var date = new DateUtil( moment( "2014-02-09" ) );
var end_date = new DateUtil( moment( "2014-02-10" ) );
it("returns false when the start of range is missing", function() {
var date = new DateUtil(moment("2014-02-09"));
var endDate = new DateUtil(moment("2014-02-10"));
expect( date.inRange( null, end_date ) ).to.eq( false );
} );
expect(date.inRange(null, endDate)).to.eq(false);
});
it( "returns false when the end of range is missing", function() {
var date = new DateUtil( moment( "2014-02-09" ) );
var start_date = new DateUtil( moment( "2014-02-09" ) );
it("returns false when the end of range is missing", function() {
var date = new DateUtil(moment("2014-02-09"));
var startDate = new DateUtil(moment("2014-02-09"));
expect( date.inRange( start_date, null ) ).to.eq( false );
} );
} );
expect(date.inRange(startDate, null)).to.eq(false);
});
});
describe( "#day", function() {
it( "returns the day of the month", function() {
var date = new DateUtil( moment( "2014-02-08" ) );
describe("#day", function() {
it("returns the day of the month", function() {
var date = new DateUtil(moment("2014-02-08"));
expect( date.day() ).to.eq( 8 );
} );
} );
expect(date.day()).to.eq(8);
});
});
describe( "#mapDaysInWeek", function() {
describe( "calls the callback method for every day in the week", function() {
describe("#year", function() {
it("returns the year", function() {
var date = new DateUtil(moment("2014-02-08"));
expect(date.year()).to.equal(2014);
});
});
describe("#changeYear", function() {
it("changes the year", function() {
var expectedDate = moment("2020-02-08");
var date = new DateUtil(moment("2014-02-08"));
var newDate = date.changeYear("2020");
expect(newDate._date.isSame(expectedDate)).to.be.true;
});
});
describe("#mapDaysInWeek", function() {
describe("calls the callback method for every day in the week", function() {
var daysOfTheWeek = [

@@ -159,11 +177,11 @@ "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"

it( "when the date is a monday", function( done ) {
var date = new DateUtil( moment( "2014-10-13" ) );
it("when the date is a monday", function(done) {
var date = new DateUtil(moment("2014-10-13"));
var callbackCounter = 0;
var callback = function( dayOfTheWeek ) {
expect( dayOfTheWeek.moment().format( "ddd" ) )
.to.eq( daysOfTheWeek[ callbackCounter ] );
var callback = function(dayOfTheWeek) {
expect(dayOfTheWeek.moment().format("ddd"))
.to.eq(daysOfTheWeek[callbackCounter]);
callbackCounter++;
if ( callbackCounter === 7 ) {
if (callbackCounter === 7) {
done();

@@ -173,14 +191,14 @@ }

date.mapDaysInWeek( callback );
} );
date.mapDaysInWeek(callback);
});
it( "when the date is a sunday", function( done ) {
var date = new DateUtil( moment( "2014-10-20" ) );
it("when the date is a sunday", function(done) {
var date = new DateUtil(moment("2014-10-20"));
var callbackCounter = 0;
var callback = function( dayOfTheWeek ) {
expect( dayOfTheWeek.moment().format( "ddd" ) )
.to.eq( daysOfTheWeek[ callbackCounter ] );
var callback = function(dayOfTheWeek) {
expect(dayOfTheWeek.moment().format("ddd"))
.to.eq(daysOfTheWeek[callbackCounter]);
callbackCounter++;
if ( callbackCounter === 7 ) {
if (callbackCounter === 7) {
done();

@@ -190,31 +208,31 @@ }

date.mapDaysInWeek( callback );
} );
} );
} );
date.mapDaysInWeek(callback);
});
});
});
describe( "#safeClone", function() {
it( "should return a cloned version of _date if date is a valid moment object", function() {
var date = moment( "2014-02-08" );
var clonedDate = new DateUtil( date ).safeClone();
describe("#safeClone", function() {
it("should return a cloned version of _date if date is a valid moment object", function() {
var date = moment("2014-02-08");
var clonedDate = new DateUtil(date).safeClone();
expect( clonedDate._date ).to.not.eq( date );
expect( clonedDate._date._i ).to.eq( date._i );
} );
expect(clonedDate._date).to.not.eq(date);
expect(clonedDate._date._i).to.eq(date._i);
});
it( "should return a null _date if original date is undefined and no alternative is provided", function() {
it("should return a null _date if original date is undefined and no alternative is provided", function() {
var date = undefined;
var clonedDate = new DateUtil( date ).safeClone();
var clonedDate = new DateUtil(date).safeClone();
expect( clonedDate._date ).to.eq( null );
} );
expect(clonedDate._date).to.eq(null);
});
it( "should return an alternative _date if original date is undefined and an alternative is provided", function() {
it("should return an alternative _date if original date is undefined and an alternative is provided", function() {
var date = undefined;
var alternative = moment();
var clonedDate = new DateUtil( date ).safeClone( alternative );
var clonedDate = new DateUtil(date).safeClone(alternative);
expect( clonedDate._date ).to.eq( alternative );
} );
} );
} );
expect(clonedDate._date).to.eq(alternative);
});
});
});

78

webpack.config.js

@@ -1,9 +0,9 @@

var webpack = require('webpack');
var webpack = require("webpack");
module.exports = {
entry: './src/datepicker',
entry: "./src/datepicker",
output: {
libraryTarget: 'umd',
library: 'DatePicker',
path: './dist/'
libraryTarget: "umd",
library: "DatePicker",
path: "./dist/"
},

@@ -14,3 +14,3 @@ module: {

test: /\.jsx?$/,
loaders: ['babel'],
loader: "babel",
exclude: /node_modules/

@@ -21,61 +21,61 @@ }

resolve: {
extensions: ['', '.js', '.jsx']
extensions: ["", ".js", ".jsx"]
},
externals: [
{
'react-dom': {
root: 'ReactDOM',
commonjs2: 'react-dom',
commonjs: 'react-dom',
amd: 'react-dom'
"react-dom": {
root: "ReactDOM",
commonjs2: "react-dom",
commonjs: "react-dom",
amd: "react-dom"
}
},
{
'react': {
root: 'React',
commonjs2: 'react',
commonjs: 'react',
amd: 'react'
"react": {
root: "React",
commonjs2: "react",
commonjs: "react",
amd: "react"
}
},
{
'moment': {
root: 'moment',
commonjs2: 'moment',
commonjs: 'moment',
amd: 'moment'
"moment": {
root: "moment",
commonjs2: "moment",
commonjs: "moment",
amd: "moment"
}
},
{
'react-onclickoutside': {
root: 'OnClickOutside',
commonjs2: 'react-onclickoutside',
commonjs: 'react-onclickoutside',
amd: 'react-onclickoutside'
"react-onclickoutside": {
root: "OnClickOutside",
commonjs2: "react-onclickoutside",
commonjs: "react-onclickoutside",
amd: "react-onclickoutside"
}
},
{
'tether': {
root: 'Tether',
commonjs2: 'tether',
commonjs: 'tether',
amd: 'tether'
"tether": {
root: "Tether",
commonjs2: "tether",
commonjs: "tether",
amd: "tether"
}
},
{
'lodash': {
root: '_',
commonjs2: 'lodash',
commonjs: 'lodash',
amd: 'lodash'
"lodash": {
root: "_",
commonjs2: "lodash",
commonjs: "lodash",
amd: "lodash"
}
}
],
node: {Buffer: false},
node: { Buffer: false },
plugins: [
new webpack.optimize.DedupePlugin(),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
"process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV)
})
]
};
dist/react-datepicker.css
dist/react-datepicker.js
dist/react-datepicker.min.css
dist/react-datepicker.min.js
.jscsrc

Sorry, the diff of this file is not supported yet

.npmignore

Sorry, the diff of this file is not supported yet

.scss-lint.yml

Sorry, the diff of this file is not supported yet

.travis.yml

Sorry, the diff of this file is not supported yet

LICENSE

Sorry, the diff of this file is not supported yet

src/stylesheets/datepicker.scss

Sorry, the diff of this file is not supported yet

src/stylesheets/mixins.scss

Sorry, the diff of this file is not supported yet

src/stylesheets/variables.scss

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc