From 35e77d4c16cedf71b89724862787eec71fd93561 Mon Sep 17 00:00:00 2001 From: Alejandro Sellero Date: Thu, 23 Apr 2015 17:00:18 +0200 Subject: [PATCH 01/16] - Scoped version for npm --- package.json | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 225cab7f..4f03147d 100644 --- a/package.json +++ b/package.json @@ -1,11 +1,10 @@ { - "name": "react-bootstrap-datetimepicker", - "version": "0.0.14", + "name": "@alex1712/react-bootstrap-datetimepicker", + "version": "0.0.15", "description": "A bootstrap datetime picker component for React.js", - "homepage": "http://dev.quri.com/react-bootstrap-datetimepicker/", "repository": { "type": "git", - "url": "http://github.com/quri/react-bootstrap-datetimepicker" + "url": "http://github.com/alex1712/react-bootstrap-datetimepicker" }, "main": "./lib/DateTimeField.js", "scripts": { @@ -23,7 +22,7 @@ "datetimepicker", "datetime" ], - "author": "Loïc CHOLLIER ", + "author": "Alex", "license": "MIT", "peerDependencies": { "react": ">=0.12" From 7db3fb291c81197e4ed620f95b6ae364846bd85f Mon Sep 17 00:00:00 2001 From: Alejandro Sellero Date: Fri, 22 May 2015 12:38:44 +0200 Subject: [PATCH 02/16] - mnq named project --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 4f03147d..bd309717 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "@alex1712/react-bootstrap-datetimepicker", + "name": "mnq-react-bootstrap-datetimepicker", "version": "0.0.15", "description": "A bootstrap datetime picker component for React.js", "repository": { From 6244725c6e76a5d30e0a6abbfa13c63a7b61f70b Mon Sep 17 00:00:00 2001 From: Alejandro Sellero Date: Fri, 22 May 2015 13:43:04 +0200 Subject: [PATCH 03/16] New version --- package.json | 2 +- src/DateTimeField.jsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index bd309717..fe9e38ff 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "mnq-react-bootstrap-datetimepicker", - "version": "0.0.15", + "version": "0.0.16", "description": "A bootstrap datetime picker component for React.js", "repository": { "type": "git", diff --git a/src/DateTimeField.jsx b/src/DateTimeField.jsx index 5939bdde..6990b212 100644 --- a/src/DateTimeField.jsx +++ b/src/DateTimeField.jsx @@ -18,7 +18,7 @@ DateTimeField = React.createClass({ inputProps: React.PropTypes.object, inputFormat: React.PropTypes.string, defaultText: React.PropTypes.string, - mode: React.PropTypes.oneOf([Constants.MODE_DATE, Constants.MODE_DATETIME, Constants.MODE_TIME]) + mode: React.PropTypes.oneOf([Constants.MODE_DATE, Constants.MODE_DATETIME, Constants.MODE_TIME]), minDate: React.PropTypes.object, maxDate: React.PropTypes.object }, From 79dd38ac2d0443623a39ae3a2eea3e3612f7c25e Mon Sep 17 00:00:00 2001 From: Alejandro Sellero Date: Fri, 22 May 2015 15:08:05 +0200 Subject: [PATCH 04/16] Target in variable --- src/DateTimeField.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/DateTimeField.jsx b/src/DateTimeField.jsx index 6990b212..f7fee41b 100644 --- a/src/DateTimeField.jsx +++ b/src/DateTimeField.jsx @@ -88,7 +88,7 @@ DateTimeField = React.createClass({ }, setSelectedDate: function(e) { var target = e.target; - if (e.target.className && !e.target.className.match(/disabled/g)) { + if (target.className && !target.className.match(/disabled/g)) { var month; if(target.className.includes("new")) month = this.state.viewDate.month() + 1; else if(target.className.includes("old")) month = this.state.viewDate.month() - 1; From e492cb40c8364e9619b1884c63ca096b646437ab Mon Sep 17 00:00:00 2001 From: Alejandro Sellero Date: Fri, 22 May 2015 17:38:44 +0200 Subject: [PATCH 05/16] Adding class placeholder when showing the defaultText --- src/DateTimeField.jsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/DateTimeField.jsx b/src/DateTimeField.jsx index f7fee41b..fb87c53c 100644 --- a/src/DateTimeField.jsx +++ b/src/DateTimeField.jsx @@ -290,6 +290,10 @@ DateTimeField = React.createClass({ } }, render: function() { + var inputClasses = React.addons.classSet({ + 'form-control': true, + placeholder: this.props.defaultText === this.state.inputValue + }); return (
{this.renderOverlay()} @@ -325,7 +329,7 @@ DateTimeField = React.createClass({ togglePeriod={this.togglePeriod} />
- +
From b6a6eedb19478e94a3e78a76db463bd348795437 Mon Sep 17 00:00:00 2001 From: Alejandro Sellero Date: Tue, 26 May 2015 14:34:17 +0200 Subject: [PATCH 06/16] - First draft being able to clear the field or to have the field empty --- dist/react-bootstrap-datetimepicker.js | 448 ++++++++++++--------- dist/react-bootstrap-datetimepicker.min.js | 2 +- examples/basic/basic.jsx | 20 +- package.json | 3 +- src/DateTimeField.jsx | 88 ++-- src/DateTimePicker.jsx | 5 +- src/DateTimePickerDate.jsx | 2 +- src/DateTimePickerDays.jsx | 19 +- src/DateTimePickerMonths.jsx | 12 +- src/DateTimePickerTime.jsx | 8 +- src/DateTimePickerYears.jsx | 7 +- 11 files changed, 369 insertions(+), 245 deletions(-) diff --git a/dist/react-bootstrap-datetimepicker.js b/dist/react-bootstrap-datetimepicker.js index b8689fc7..5a95891c 100644 --- a/dist/react-bootstrap-datetimepicker.js +++ b/dist/react-bootstrap-datetimepicker.js @@ -71,14 +71,17 @@ return /******/ (function(modules) { // webpackBootstrap Glyphicon = __webpack_require__(4).Glyphicon; + Constants = __webpack_require__(6); + DateTimeField = React.createClass({displayName: "DateTimeField", propTypes: { dateTime: React.PropTypes.string, onChange: React.PropTypes.func, format: React.PropTypes.string, - inputFormat: React.PropTypes.string, inputProps: React.PropTypes.object, + inputFormat: React.PropTypes.string, defaultText: React.PropTypes.string, + mode: React.PropTypes.oneOf([Constants.MODE_DATE, Constants.MODE_DATETIME, Constants.MODE_TIME]), minDate: React.PropTypes.object, maxDate: React.PropTypes.object }, @@ -86,19 +89,30 @@ return /******/ (function(modules) { // webpackBootstrap return { dateTime: moment().format('x'), format: 'x', - inputFormat: "MM/DD/YY h:mm A", showToday: true, viewMode: 'days', daysOfWeekDisabled: [], - onChange: function (x) { - console.log(x); - } + mode: Constants.MODE_DATETIME, + onChange: function (x) {} }; }, + resolvePropsInputFormat: function() { + if(this.props.inputFormat) return this.props.inputFormat; + switch(this.props.mode) { + case Constants.MODE_TIME: + return "h:mm A"; + case Constants.MODE_DATE: + return "MM/DD/YY"; + default: + return "MM/DD/YY h:mm A"; + } + }, getInitialState: function() { return { - showDatePicker: true, - showTimePicker: false, + showDatePicker: this.props.mode !== Constants.MODE_TIME, + showTimePicker: this.props.mode === Constants.MODE_TIME, + inputFormat: this.resolvePropsInputFormat(), + buttonIcon: this.props.mode === Constants.MODE_TIME ? "time" : "calendar", widgetStyle: { display: 'block', position: 'absolute', @@ -107,7 +121,7 @@ return /******/ (function(modules) { // webpackBootstrap }, viewDate: moment(this.props.dateTime, this.props.format, true).startOf("month"), selectedDate: moment(this.props.dateTime, this.props.format, true), - inputValue: typeof this.props.defaultText != 'undefined' ? this.props.defaultText : moment(this.props.dateTime, this.props.format, true).format(this.props.inputFormat) + inputValue: typeof this.props.defaultText != 'undefined' ? this.props.defaultText : moment(this.props.dateTime, this.props.format, true).format(this.resolvePropsInputFormat()) }; }, componentWillReceiveProps: function(nextProps) { @@ -121,29 +135,34 @@ return /******/ (function(modules) { // webpackBootstrap }, onChange: function(event) { var value = event.target == null ? event : event.target.value; - if (moment(value, this.props.inputFormat, true).isValid()) { + if (moment(value, this.state.inputFormat, true).isValid()) { this.setState({ - selectedDate: moment(value, this.props.inputFormat, true), - viewDate: moment(value, this.props.inputFormat, true).startOf("month") + selectedDate: moment(value, this.state.inputFormat, true), + viewDate: moment(value, this.state.inputFormat, true).startOf("month") }); } return this.setState({ inputValue: value }, function() { - return this.props.onChange(moment(this.state.inputValue, this.props.inputFormat, true).format(this.props.format)); + return this.props.onChange(moment(this.state.inputValue, this.state.inputFormat, true).format(this.props.format)); }); }, setSelectedDate: function(e) { - if (e.target.className && !e.target.className.match(/disabled/g)) { + var target = e.target; + if (target.className && !target.className.match(/disabled/g)) { + var month; + if(target.className.includes("new")) month = this.state.viewDate.month() + 1; + else if(target.className.includes("old")) month = this.state.viewDate.month() - 1; + else month = this.state.viewDate.month(); return this.setState({ - selectedDate: this.state.viewDate.clone().date(parseInt(e.target.innerHTML)).hour(this.state.selectedDate.hours()).minute(this.state.selectedDate.minutes()) - }, function () { + selectedDate: this.state.viewDate.clone().month(month).date(parseInt(e.target.innerHTML)).hour(this.state.selectedDate.hours()).minute(this.state.selectedDate.minutes()) + }, function() { this.closePicker(); this.props.onChange(this.state.selectedDate.format(this.props.format)); return this.setState({ - inputValue: this.state.selectedDate.format(this.props.inputFormat) + inputValue: this.state.selectedDate.format(this.state.inputFormat) }); }); } @@ -155,7 +174,7 @@ return /******/ (function(modules) { // webpackBootstrap this.closePicker(); this.props.onChange(this.state.selectedDate.format(this.props.format)); return this.setState({ - inputValue: this.state.selectedDate.format(this.props.inputFormat) + inputValue: this.state.selectedDate.format(this.state.inputFormat) }); }); }, @@ -166,7 +185,7 @@ return /******/ (function(modules) { // webpackBootstrap this.closePicker(); this.props.onChange(this.state.selectedDate.format(this.props.format)); return this.setState({ - inputValue: this.state.selectedDate.format(this.props.inputFormat) + inputValue: this.state.selectedDate.format(this.state.inputFormat) }); }); }, @@ -252,9 +271,9 @@ return /******/ (function(modules) { // webpackBootstrap }, togglePeriod: function() { if (this.state.selectedDate.hour() > 12) { - return this.onChange(this.state.selectedDate.clone().subtract(12, 'hours').format(this.props.inputFormat)); + return this.onChange(this.state.selectedDate.clone().subtract(12, 'hours').format(this.state.inputFormat)); } else { - return this.onChange(this.state.selectedDate.clone().add(12, 'hours').format(this.props.inputFormat)); + return this.onChange(this.state.selectedDate.clone().add(12, 'hours').format(this.state.inputFormat)); } }, togglePicker: function() { @@ -347,6 +366,7 @@ return /******/ (function(modules) { // webpackBootstrap showToday: this.props.showToday, viewMode: this.props.viewMode, daysOfWeekDisabled: this.props.daysOfWeekDisabled, + mode: this.props.mode, minDate: this.props.minDate, maxDate: this.props.maxDate, addDecade: this.addDecade, @@ -369,7 +389,7 @@ return /******/ (function(modules) { // webpackBootstrap ), React.createElement("div", {className: "input-group date", ref: "datetimepicker"}, React.createElement("input", React.__spread({type: "text", className: "form-control", onChange: this.onChange, value: this.state.inputValue}, this.props.inputProps)), - React.createElement("span", {className: "input-group-addon", onClick: this.onClick, onBlur: this.onBlur, ref: "dtpbutton"}, React.createElement(Glyphicon, {glyph: "calendar"})) + React.createElement("span", {className: "input-group-addon", onClick: this.onClick, onBlur: this.onBlur, ref: "dtpbutton"}, React.createElement(Glyphicon, {glyph: this.state.buttonIcon})) ) ) ); @@ -405,12 +425,14 @@ return /******/ (function(modules) { // webpackBootstrap React = __webpack_require__(2); - DateTimePickerDate = __webpack_require__(6); + DateTimePickerDate = __webpack_require__(7); - DateTimePickerTime = __webpack_require__(7); + DateTimePickerTime = __webpack_require__(8); Glyphicon = __webpack_require__(4).Glyphicon; + Constants = __webpack_require__(6); + DateTimePicker = React.createClass({displayName: "DateTimePicker", propTypes: { showDatePicker: React.PropTypes.bool, @@ -424,6 +446,7 @@ return /******/ (function(modules) { // webpackBootstrap React.PropTypes.string, React.PropTypes.number ]), + mode: React.PropTypes.oneOf([Constants.MODE_DATE, Constants.MODE_DATETIME, Constants.MODE_TIME]), daysOfWeekDisabled: React.PropTypes.array, setSelectedDate: React.PropTypes.func.isRequired, subtractYear: React.PropTypes.func.isRequired, @@ -479,12 +502,22 @@ return /******/ (function(modules) { // webpackBootstrap subtractHour: this.props.subtractHour, addMinute: this.props.addMinute, subtractMinute: this.props.subtractMinute, - togglePeriod: this.props.togglePeriod} + togglePeriod: this.props.togglePeriod, + mode: this.props.mode} ) ) ); } }, + renderSwitchButton: function() { + return this.props.mode === Constants.MODE_DATETIME ? + ( + React.createElement("li", null, + React.createElement("span", {className: "btn picker-switch", style: {width:'100%'}, onClick: this.props.togglePicker}, React.createElement(Glyphicon, {glyph: this.props.showTimePicker ? 'calendar' : 'time'})) + ) + ) : + null; + }, render: function() { return ( React.createElement("div", {className: React.addons.classSet(this.props.widgetClasses), style: this.props.widgetStyle}, @@ -493,9 +526,7 @@ return /******/ (function(modules) { // webpackBootstrap this.renderDatePicker(), - React.createElement("li", null, - React.createElement("span", {className: "btn picker-switch", style: {width:'100%'}, onClick: this.props.togglePicker}, React.createElement(Glyphicon, {glyph: this.props.showTimePicker ? 'calendar' : 'time'})) - ), + this.renderSwitchButton(), this.renderTimePicker() @@ -512,17 +543,27 @@ return /******/ (function(modules) { // webpackBootstrap /***/ }, /* 6 */ +/***/ function(module, exports, __webpack_require__) { + + module.exports = { + MODE_DATE: 'date', + MODE_DATETIME: 'datetime', + MODE_TIME: 'time' + }; + +/***/ }, +/* 7 */ /***/ function(module, exports, __webpack_require__) { var DateTimePickerDate, DateTimePickerDays, DateTimePickerMonths, DateTimePickerYears, React; React = __webpack_require__(2); - DateTimePickerDays = __webpack_require__(10); + DateTimePickerDays = __webpack_require__(9); - DateTimePickerMonths = __webpack_require__(11); + DateTimePickerMonths = __webpack_require__(10); - DateTimePickerYears = __webpack_require__(12); + DateTimePickerYears = __webpack_require__(11); DateTimePickerDate = React.createClass({displayName: "DateTimePickerDate", propTypes: { @@ -660,19 +701,21 @@ return /******/ (function(modules) { // webpackBootstrap /***/ }, -/* 7 */ +/* 8 */ /***/ function(module, exports, __webpack_require__) { var DateTimePickerHours, DateTimePickerMinutes, DateTimePickerTime, Glyphicon, React; React = __webpack_require__(2); - DateTimePickerMinutes = __webpack_require__(8); + DateTimePickerMinutes = __webpack_require__(12); - DateTimePickerHours = __webpack_require__(9); + DateTimePickerHours = __webpack_require__(13); Glyphicon = __webpack_require__(4).Glyphicon; + Constants = __webpack_require__(6); + DateTimePickerTime = React.createClass({displayName: "DateTimePickerTime", propTypes: { setSelectedHour: React.PropTypes.func.isRequired, @@ -683,7 +726,8 @@ return /******/ (function(modules) { // webpackBootstrap addMinute: React.PropTypes.func.isRequired, viewDate: React.PropTypes.object.isRequired, selectedDate: React.PropTypes.object.isRequired, - togglePeriod: React.PropTypes.func.isRequired + togglePeriod: React.PropTypes.func.isRequired, + mode: React.PropTypes.oneOf([Constants.MODE_DATE, Constants.MODE_DATETIME, Constants.MODE_TIME]) }, getInitialState: function() { return { @@ -691,6 +735,12 @@ return /******/ (function(modules) { // webpackBootstrap hoursDisplayed: false }; }, + goBack: function() { + return this.setState({ + minutesDisplayed: false, + hoursDisplayed: false + }); + }, showMinutes: function() { return this.setState({ minutesDisplayed: true @@ -703,20 +753,14 @@ return /******/ (function(modules) { // webpackBootstrap }, renderMinutes: function() { if (this.state.minutesDisplayed) { - return (React.createElement(DateTimePickerMinutes, { - setSelectedMinute: this.props.setSelectedMinute} - ) - ); + return React.createElement(DateTimePickerMinutes, React.__spread({}, this.props, {onSwitch: this.goBack})); } else { return null; } }, renderHours: function() { if (this.state.hoursDisplayed) { - return (React.createElement(DateTimePickerHours, { - setSelectedHour: this.props.setSelectedHour} - ) - ); + return React.createElement(DateTimePickerHours, React.__spread({}, this.props, {onSwitch: this.goBack})); } else { return null; } @@ -782,150 +826,8 @@ return /******/ (function(modules) { // webpackBootstrap module.exports = DateTimePickerTime; -/***/ }, -/* 8 */ -/***/ function(module, exports, __webpack_require__) { - - var DateTimePickerMinutes, React; - - React = __webpack_require__(2); - - DateTimePickerMinutes = React.createClass({displayName: "DateTimePickerMinutes", - propTypes: { - setSelectedMinute: React.PropTypes.func.isRequired - }, - render: function() { - return ( - React.createElement("div", {className: "timepicker-minutes", "data-action": "selectMinute", style: {display: 'block'}}, - React.createElement("table", {className: "table-condensed"}, - React.createElement("tbody", null, - React.createElement("tr", null, - React.createElement("td", {className: "minute", onClick: this.props.setSelectedMinute}, "00"), - - React.createElement("td", {className: "minute", onClick: this.props.setSelectedMinute}, "05"), - - React.createElement("td", {className: "minute", onClick: this.props.setSelectedMinute}, "10"), - - React.createElement("td", {className: "minute", onClick: this.props.setSelectedMinute}, "15") - ), - - React.createElement("tr", null, - React.createElement("td", {className: "minute", onClick: this.props.setSelectedMinute}, "20"), - - React.createElement("td", {className: "minute", onClick: this.props.setSelectedMinute}, "25"), - - React.createElement("td", {className: "minute", onClick: this.props.setSelectedMinute}, "30"), - - React.createElement("td", {className: "minute", onClick: this.props.setSelectedMinute}, "35") - ), - - React.createElement("tr", null, - React.createElement("td", {className: "minute", onClick: this.props.setSelectedMinute}, "40"), - - React.createElement("td", {className: "minute", onClick: this.props.setSelectedMinute}, "45"), - - React.createElement("td", {className: "minute", onClick: this.props.setSelectedMinute}, "50"), - - React.createElement("td", {className: "minute", onClick: this.props.setSelectedMinute}, "55") - ) - ) - ) - ) - ); - } - }); - - module.exports = DateTimePickerMinutes; - - /***/ }, /* 9 */ -/***/ function(module, exports, __webpack_require__) { - - var DateTimePickerHours, React; - - React = __webpack_require__(2); - - DateTimePickerHours = React.createClass({displayName: "DateTimePickerHours", - propTypes: { - setSelectedHour: React.PropTypes.func.isRequired - }, - render: function() { - return ( - React.createElement("div", {className: "timepicker-hours", "data-action": "selectHour", style: {display: 'block'}}, - React.createElement("table", {className: "table-condensed"}, - React.createElement("tbody", null, - React.createElement("tr", null, - React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "01"), - - React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "02"), - - React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "03"), - - React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "04") - ), - - React.createElement("tr", null, - React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "05"), - - React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "06"), - - React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "07"), - - React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "08") - ), - - React.createElement("tr", null, - React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "09"), - - React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "10"), - - React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "11"), - - React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "12") - ), - - React.createElement("tr", null, - React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "13"), - - React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "14"), - - React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "15"), - - React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "16") - ), - - React.createElement("tr", null, - React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "17"), - - React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "18"), - - React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "19"), - - React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "20") - ), - - React.createElement("tr", null, - React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "21"), - - React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "22"), - - React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "23"), - - React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "24") - ) - ) - ) - ) - ); - } - }); - - module.exports = DateTimePickerHours; - - -/***/ }, -/* 10 */ /***/ function(module, exports, __webpack_require__) { var DateTimePickerDays, React, moment; @@ -1051,7 +953,7 @@ return /******/ (function(modules) { // webpackBootstrap /***/ }, -/* 11 */ +/* 10 */ /***/ function(module, exports, __webpack_require__) { var DateTimePickerMonths, React, moment; @@ -1080,7 +982,7 @@ return /******/ (function(modules) { // webpackBootstrap month: true, 'active': i === month && this.props.viewDate.year() === this.props.selectedDate.year() }; - months.push(React.createElement("span", {className: React.addons.classSet(classes), onClick: this.props.setViewMonth}, monthsShort[i])); + months.push(React.createElement("span", {key: i, className: React.addons.classSet(classes), onClick: this.props.setViewMonth}, monthsShort[i])); i++; } return months; @@ -1114,7 +1016,7 @@ return /******/ (function(modules) { // webpackBootstrap /***/ }, -/* 12 */ +/* 11 */ /***/ function(module, exports, __webpack_require__) { var DateTimePickerYears, React; @@ -1141,7 +1043,7 @@ return /******/ (function(modules) { // webpackBootstrap old: i === -1 | i === 10, active: this.props.selectedDate.year() === year }; - years.push(React.createElement("span", {className: React.addons.classSet(classes), onClick: this.props.setViewYear}, year)); + years.push(React.createElement("span", {key: year, className: React.addons.classSet(classes), onClick: this.props.setViewYear}, year)); year++; i++; } @@ -1177,6 +1079,176 @@ return /******/ (function(modules) { // webpackBootstrap module.exports = DateTimePickerYears; +/***/ }, +/* 12 */ +/***/ function(module, exports, __webpack_require__) { + + var DateTimePickerMinutes, React; + + React = __webpack_require__(2); + Glyphicon = __webpack_require__(4).Glyphicon; + + DateTimePickerMinutes = React.createClass({displayName: "DateTimePickerMinutes", + propTypes: { + setSelectedMinute: React.PropTypes.func.isRequired, + onSwitch: React.PropTypes.func.isRequired + }, + renderSwitchButton: function() { + return this.props.mode === Constants.MODE_TIME ? + ( + React.createElement("ul", {className: "list-unstyled"}, + React.createElement("li", null, + React.createElement("span", {className: "btn picker-switch", style: {width:'100%'}, onClick: this.props.onSwitch}, React.createElement(Glyphicon, {glyph: "time"})) + ) + ) + ) : + null; + }, + render: function() { + return ( + React.createElement("div", {className: "timepicker-minutes", "data-action": "selectMinute", style: {display: 'block'}}, + this.renderSwitchButton(), + React.createElement("table", {className: "table-condensed"}, + React.createElement("tbody", null, + React.createElement("tr", null, + React.createElement("td", {className: "minute", onClick: this.props.setSelectedMinute}, "00"), + + React.createElement("td", {className: "minute", onClick: this.props.setSelectedMinute}, "05"), + + React.createElement("td", {className: "minute", onClick: this.props.setSelectedMinute}, "10"), + + React.createElement("td", {className: "minute", onClick: this.props.setSelectedMinute}, "15") + ), + + React.createElement("tr", null, + React.createElement("td", {className: "minute", onClick: this.props.setSelectedMinute}, "20"), + + React.createElement("td", {className: "minute", onClick: this.props.setSelectedMinute}, "25"), + + React.createElement("td", {className: "minute", onClick: this.props.setSelectedMinute}, "30"), + + React.createElement("td", {className: "minute", onClick: this.props.setSelectedMinute}, "35") + ), + + React.createElement("tr", null, + React.createElement("td", {className: "minute", onClick: this.props.setSelectedMinute}, "40"), + + React.createElement("td", {className: "minute", onClick: this.props.setSelectedMinute}, "45"), + + React.createElement("td", {className: "minute", onClick: this.props.setSelectedMinute}, "50"), + + React.createElement("td", {className: "minute", onClick: this.props.setSelectedMinute}, "55") + ) + ) + ) + ) + ); + } + }); + + module.exports = DateTimePickerMinutes; + + +/***/ }, +/* 13 */ +/***/ function(module, exports, __webpack_require__) { + + var DateTimePickerHours, React; + + React = __webpack_require__(2); + Glyphicon = __webpack_require__(4).Glyphicon; + + DateTimePickerHours = React.createClass({displayName: "DateTimePickerHours", + propTypes: { + setSelectedHour: React.PropTypes.func.isRequired, + onSwitch: React.PropTypes.func.isRequired + }, + renderSwitchButton: function() { + return this.props.mode === Constants.MODE_TIME ? + ( + React.createElement("ul", {className: "list-unstyled"}, + React.createElement("li", null, + React.createElement("span", {className: "btn picker-switch", style: {width:'100%'}, onClick: this.props.onSwitch}, React.createElement(Glyphicon, {glyph: "time"})) + ) + ) + ) : + null; + }, + render: function() { + return ( + React.createElement("div", {className: "timepicker-hours", "data-action": "selectHour", style: {display: 'block'}}, + this.renderSwitchButton(), + React.createElement("table", {className: "table-condensed"}, + React.createElement("tbody", null, + React.createElement("tr", null, + React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "01"), + + React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "02"), + + React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "03"), + + React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "04") + ), + + React.createElement("tr", null, + React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "05"), + + React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "06"), + + React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "07"), + + React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "08") + ), + + React.createElement("tr", null, + React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "09"), + + React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "10"), + + React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "11"), + + React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "12") + ), + + React.createElement("tr", null, + React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "13"), + + React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "14"), + + React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "15"), + + React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "16") + ), + + React.createElement("tr", null, + React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "17"), + + React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "18"), + + React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "19"), + + React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "20") + ), + + React.createElement("tr", null, + React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "21"), + + React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "22"), + + React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "23"), + + React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "24") + ) + ) + ) + ) + ); + } + }); + + module.exports = DateTimePickerHours; + + /***/ } /******/ ]) }); diff --git a/dist/react-bootstrap-datetimepicker.min.js b/dist/react-bootstrap-datetimepicker.min.js index 262a2f58..fa41d0a4 100644 --- a/dist/react-bootstrap-datetimepicker.min.js +++ b/dist/react-bootstrap-datetimepicker.min.js @@ -1 +1 @@ -!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("React"),require("moment"),require("ReactBootstrap")):"function"==typeof define&&define.amd?define(["React","moment","ReactBootstrap"],t):"object"==typeof exports?exports.ReactBootstrapDatetimepicker=t(require("React"),require("moment"),require("ReactBootstrap")):e.ReactBootstrapDatetimepicker=t(e.React,e.moment,e.ReactBootstrap)}(this,function(e,t,s){return function(e){function t(a){if(s[a])return s[a].exports;var r=s[a]={exports:{},id:a,loaded:!1};return e[a].call(r.exports,r,r.exports,t),r.loaded=!0,r.exports}var s={};return t.m=e,t.c=s,t.p="",t(0)}([function(e,t,s){e.exports=s(1)},function(e,t,s){var a,r,i,o,n;o=s(2),r=s(5),n=s(3),i=s(4).Glyphicon,a=o.createClass({displayName:"DateTimeField",propTypes:{dateTime:o.PropTypes.string,onChange:o.PropTypes.func,format:o.PropTypes.string,inputFormat:o.PropTypes.string,inputProps:o.PropTypes.object,defaultText:o.PropTypes.string,minDate:o.PropTypes.object,maxDate:o.PropTypes.object},getDefaultProps:function(){return{dateTime:n().format("x"),format:"x",inputFormat:"MM/DD/YY h:mm A",showToday:!0,viewMode:"days",daysOfWeekDisabled:[],onChange:function(e){console.log(e)}}},getInitialState:function(){return{showDatePicker:!0,showTimePicker:!1,widgetStyle:{display:"block",position:"absolute",left:-9999,zIndex:"9999 !important"},viewDate:n(this.props.dateTime,this.props.format,!0).startOf("month"),selectedDate:n(this.props.dateTime,this.props.format,!0),inputValue:"undefined"!=typeof this.props.defaultText?this.props.defaultText:n(this.props.dateTime,this.props.format,!0).format(this.props.inputFormat)}},componentWillReceiveProps:function(e){return n(e.dateTime,e.format,!0).isValid()?this.setState({viewDate:n(e.dateTime,e.format,!0).startOf("month"),selectedDate:n(e.dateTime,e.format,!0),inputValue:n(e.dateTime,e.format,!0).format(e.inputFormat)}):void 0},onChange:function(e){var t=null==e.target?e:e.target.value;return n(t,this.props.inputFormat,!0).isValid()&&this.setState({selectedDate:n(t,this.props.inputFormat,!0),viewDate:n(t,this.props.inputFormat,!0).startOf("month")}),this.setState({inputValue:t},function(){return this.props.onChange(n(this.state.inputValue,this.props.inputFormat,!0).format(this.props.format))})},setSelectedDate:function(e){return e.target.className&&!e.target.className.match(/disabled/g)?this.setState({selectedDate:this.state.viewDate.clone().date(parseInt(e.target.innerHTML)).hour(this.state.selectedDate.hours()).minute(this.state.selectedDate.minutes())},function(){return this.closePicker(),this.props.onChange(this.state.selectedDate.format(this.props.format)),this.setState({inputValue:this.state.selectedDate.format(this.props.inputFormat)})}):void 0},setSelectedHour:function(e){return this.setState({selectedDate:this.state.selectedDate.clone().hour(parseInt(e.target.innerHTML)).minute(this.state.selectedDate.minutes())},function(){return this.closePicker(),this.props.onChange(this.state.selectedDate.format(this.props.format)),this.setState({inputValue:this.state.selectedDate.format(this.props.inputFormat)})})},setSelectedMinute:function(e){return this.setState({selectedDate:this.state.selectedDate.clone().hour(this.state.selectedDate.hours()).minute(parseInt(e.target.innerHTML))},function(){return this.closePicker(),this.props.onChange(this.state.selectedDate.format(this.props.format)),this.setState({inputValue:this.state.selectedDate.format(this.props.inputFormat)})})},setViewMonth:function(e){return this.setState({viewDate:this.state.viewDate.clone().month(e)})},setViewYear:function(e){return this.setState({viewDate:this.state.viewDate.clone().year(e)})},addMinute:function(){return this.setState({selectedDate:this.state.selectedDate.clone().add(1,"minutes")},function(){return this.props.onChange(this.state.selectedDate.format(this.props.format)),this.setState({inputValue:this.state.selectedDate.format(this.props.inputFormat)})})},addHour:function(){return this.setState({selectedDate:this.state.selectedDate.clone().add(1,"hours")},function(){return this.props.onChange(this.state.selectedDate.format(this.props.format)),this.setState({inputValue:this.state.selectedDate.format(this.props.inputFormat)})})},addMonth:function(){return this.setState({viewDate:this.state.viewDate.add(1,"months")})},addYear:function(){return this.setState({viewDate:this.state.viewDate.add(1,"years")})},addDecade:function(){return this.setState({viewDate:this.state.viewDate.add(10,"years")})},subtractMinute:function(){return this.setState({selectedDate:this.state.selectedDate.clone().subtract(1,"minutes")},function(){return this.props.onChange(this.state.selectedDate.format(this.props.format)),this.setState({inputValue:this.state.selectedDate.format(this.props.inputFormat)})})},subtractHour:function(){return this.setState({selectedDate:this.state.selectedDate.clone().subtract(1,"hours")},function(){return this.props.onChange(this.state.selectedDate.format(this.props.format)),this.setState({inputValue:this.state.selectedDate.format(this.props.inputFormat)})})},subtractMonth:function(){return this.setState({viewDate:this.state.viewDate.subtract(1,"months")})},subtractYear:function(){return this.setState({viewDate:this.state.viewDate.subtract(1,"years")})},subtractDecade:function(){return this.setState({viewDate:this.state.viewDate.subtract(10,"years")})},togglePeriod:function(){return this.onChange(this.state.selectedDate.hour()>12?this.state.selectedDate.clone().subtract(12,"hours").format(this.props.inputFormat):this.state.selectedDate.clone().add(12,"hours").format(this.props.inputFormat))},togglePicker:function(){return this.setState({showDatePicker:!this.state.showDatePicker,showTimePicker:!this.state.showTimePicker})},onClick:function(){var e,t,s,a,r,i;return this.state.showPicker?this.closePicker():(this.setState({showPicker:!0}),t=this.refs.dtpbutton.getDOMNode().getBoundingClientRect(),e={"bootstrap-datetimepicker-widget":!0,"dropdown-menu":!0},s={top:t.top+window.pageYOffset-document.documentElement.clientTop,left:t.left+window.pageXOffset-document.documentElement.clientLeft},s.top=s.top+this.refs.datetimepicker.getDOMNode().offsetHeight,r=void 0!==window.pageYOffset?window.pageYOffset:(document.documentElement||document.body.parentNode||document.body).scrollTop,a="up"===this.props.direction?"top":"bottom"===this.props.direction?"bottom":"auto"===this.props.direction?s.top+this.refs.widget.getDOMNode().offsetHeight>window.offsetHeight+r&&this.refs.widget.offsetHeight+this.refs.datetimepicker.getDOMNode().offsetHeight>s.top?"top":"bottom":void 0,"top"===a?(s.top=-this.refs.widget.getDOMNode().offsetHeight-this.getDOMNode().clientHeight-2,e.top=!0,e.bottom=!1,e["pull-right"]=!0):(s.top=40,e.top=!1,e.bottom=!0,e["pull-right"]=!0),i={display:"block",position:"absolute",top:s.top,left:"auto",right:40},this.setState({widgetStyle:i,widgetClasses:e}))},closePicker:function(e){var t;return t=this.state.widgetStyle,t.left=-9999,t.display="none",this.setState({showPicker:!1,widgetStyle:t})},renderOverlay:function(){var e;return e={position:"fixed",top:0,bottom:0,left:0,right:0,zIndex:"999"},this.state.showPicker?o.createElement("div",{style:e,onClick:this.closePicker}):o.createElement("span",null)},render:function(){return o.createElement("div",null,this.renderOverlay(),o.createElement(r,{ref:"widget",widgetClasses:this.state.widgetClasses,widgetStyle:this.state.widgetStyle,showDatePicker:this.state.showDatePicker,showTimePicker:this.state.showTimePicker,viewDate:this.state.viewDate,selectedDate:this.state.selectedDate,showToday:this.props.showToday,viewMode:this.props.viewMode,daysOfWeekDisabled:this.props.daysOfWeekDisabled,minDate:this.props.minDate,maxDate:this.props.maxDate,addDecade:this.addDecade,addYear:this.addYear,addMonth:this.addMonth,addHour:this.addHour,addMinute:this.addMinute,subtractDecade:this.subtractDecade,subtractYear:this.subtractYear,subtractMonth:this.subtractMonth,subtractHour:this.subtractHour,subtractMinute:this.subtractMinute,setViewYear:this.setViewYear,setViewMonth:this.setViewMonth,setSelectedDate:this.setSelectedDate,setSelectedHour:this.setSelectedHour,setSelectedMinute:this.setSelectedMinute,togglePicker:this.togglePicker,togglePeriod:this.togglePeriod}),o.createElement("div",{className:"input-group date",ref:"datetimepicker"},o.createElement("input",o.__spread({type:"text",className:"form-control",onChange:this.onChange,value:this.state.inputValue},this.props.inputProps)),o.createElement("span",{className:"input-group-addon",onClick:this.onClick,onBlur:this.onBlur,ref:"dtpbutton"},o.createElement(i,{glyph:"calendar"}))))}}),e.exports=a},function(t,s,a){t.exports=e},function(e,s,a){e.exports=t},function(e,t,a){e.exports=s},function(e,t,s){var a,r,i,o,n;n=s(2),r=s(6),i=s(7),o=s(4).Glyphicon,a=n.createClass({displayName:"DateTimePicker",propTypes:{showDatePicker:n.PropTypes.bool,showTimePicker:n.PropTypes.bool,subtractMonth:n.PropTypes.func.isRequired,addMonth:n.PropTypes.func.isRequired,viewDate:n.PropTypes.object.isRequired,selectedDate:n.PropTypes.object.isRequired,showToday:n.PropTypes.bool,viewMode:n.PropTypes.oneOfType([n.PropTypes.string,n.PropTypes.number]),daysOfWeekDisabled:n.PropTypes.array,setSelectedDate:n.PropTypes.func.isRequired,subtractYear:n.PropTypes.func.isRequired,addYear:n.PropTypes.func.isRequired,setViewMonth:n.PropTypes.func.isRequired,setViewYear:n.PropTypes.func.isRequired,subtractHour:n.PropTypes.func.isRequired,addHour:n.PropTypes.func.isRequired,subtractMinute:n.PropTypes.func.isRequired,addMinute:n.PropTypes.func.isRequired,addDecade:n.PropTypes.func.isRequired,subtractDecade:n.PropTypes.func.isRequired,togglePeriod:n.PropTypes.func.isRequired,minDate:n.PropTypes.object,maxDate:n.PropTypes.object},renderDatePicker:function(){return this.props.showDatePicker?n.createElement("li",null,n.createElement(r,{addMonth:this.props.addMonth,subtractMonth:this.props.subtractMonth,setSelectedDate:this.props.setSelectedDate,viewDate:this.props.viewDate,selectedDate:this.props.selectedDate,showToday:this.props.showToday,viewMode:this.props.viewMode,daysOfWeekDisabled:this.props.daysOfWeekDisabled,subtractYear:this.props.subtractYear,addYear:this.props.addYear,setViewMonth:this.props.setViewMonth,setViewYear:this.props.setViewYear,addDecade:this.props.addDecade,subtractDecade:this.props.subtractDecade,minDate:this.props.minDate,maxDate:this.props.maxDate})):void 0},renderTimePicker:function(){return this.props.showTimePicker?n.createElement("li",null,n.createElement(i,{viewDate:this.props.viewDate,selectedDate:this.props.selectedDate,setSelectedHour:this.props.setSelectedHour,setSelectedMinute:this.props.setSelectedMinute,addHour:this.props.addHour,subtractHour:this.props.subtractHour,addMinute:this.props.addMinute,subtractMinute:this.props.subtractMinute,togglePeriod:this.props.togglePeriod})):void 0},render:function(){return n.createElement("div",{className:n.addons.classSet(this.props.widgetClasses),style:this.props.widgetStyle},n.createElement("ul",{className:"list-unstyled"},this.renderDatePicker(),n.createElement("li",null,n.createElement("span",{className:"btn picker-switch",style:{width:"100%"},onClick:this.props.togglePicker},n.createElement(o,{glyph:this.props.showTimePicker?"calendar":"time"}))),this.renderTimePicker()))}}),e.exports=a},function(e,t,s){var a,r,i,o,n;n=s(2),r=s(8),i=s(9),o=s(10),a=n.createClass({displayName:"DateTimePickerDate",propTypes:{subtractMonth:n.PropTypes.func.isRequired,addMonth:n.PropTypes.func.isRequired,viewDate:n.PropTypes.object.isRequired,selectedDate:n.PropTypes.object.isRequired,showToday:n.PropTypes.bool,viewMode:n.PropTypes.oneOfType([n.PropTypes.string,n.PropTypes.number]),daysOfWeekDisabled:n.PropTypes.array,setSelectedDate:n.PropTypes.func.isRequired,subtractYear:n.PropTypes.func.isRequired,addYear:n.PropTypes.func.isRequired,setViewMonth:n.PropTypes.func.isRequired,setViewYear:n.PropTypes.func.isRequired,addDecade:n.PropTypes.func.isRequired,subtractDecade:n.PropTypes.func.isRequired,minDate:n.PropTypes.object,maxDate:n.PropTypes.object},getInitialState:function(){var e={days:{daysDisplayed:!0,monthsDisplayed:!1,yearsDisplayed:!1},months:{daysDisplayed:!1,monthsDisplayed:!0,yearsDisplayed:!1},years:{daysDisplayed:!1,monthsDisplayed:!1,yearsDisplayed:!0}};return e[this.props.viewMode]||e[Object.keys(e)[this.props.viewMode]]||e.days},showMonths:function(){return this.setState({daysDisplayed:!1,monthsDisplayed:!0})},showYears:function(){return this.setState({monthsDisplayed:!1,yearsDisplayed:!0})},setViewYear:function(e){return this.props.setViewYear(e.target.innerHTML),this.setState({yearsDisplayed:!1,monthsDisplayed:!0})},setViewMonth:function(e){return this.props.setViewMonth(e.target.innerHTML),this.setState({monthsDisplayed:!1,daysDisplayed:!0})},renderDays:function(){return this.state.daysDisplayed?n.createElement(r,{addMonth:this.props.addMonth,subtractMonth:this.props.subtractMonth,setSelectedDate:this.props.setSelectedDate,viewDate:this.props.viewDate,selectedDate:this.props.selectedDate,showToday:this.props.showToday,daysOfWeekDisabled:this.props.daysOfWeekDisabled,showMonths:this.showMonths,minDate:this.props.minDate,maxDate:this.props.maxDate}):null},renderMonths:function(){return this.state.monthsDisplayed?n.createElement(i,{subtractYear:this.props.subtractYear,addYear:this.props.addYear,viewDate:this.props.viewDate,selectedDate:this.props.selectedDate,showYears:this.showYears,setViewMonth:this.setViewMonth}):null},renderYears:function(){return this.state.yearsDisplayed?n.createElement(o,{viewDate:this.props.viewDate,selectedDate:this.props.selectedDate,setViewYear:this.setViewYear,addDecade:this.props.addDecade,subtractDecade:this.props.subtractDecade}):null},render:function(){return n.createElement("div",{className:"datepicker"},this.renderDays(),this.renderMonths(),this.renderYears())}}),e.exports=a},function(e,t,s){var a,r,i,o,n;n=s(2),r=s(11),a=s(12),o=s(4).Glyphicon,i=n.createClass({displayName:"DateTimePickerTime",propTypes:{setSelectedHour:n.PropTypes.func.isRequired,setSelectedMinute:n.PropTypes.func.isRequired,subtractHour:n.PropTypes.func.isRequired,addHour:n.PropTypes.func.isRequired,subtractMinute:n.PropTypes.func.isRequired,addMinute:n.PropTypes.func.isRequired,viewDate:n.PropTypes.object.isRequired,selectedDate:n.PropTypes.object.isRequired,togglePeriod:n.PropTypes.func.isRequired},getInitialState:function(){return{minutesDisplayed:!1,hoursDisplayed:!1}},showMinutes:function(){return this.setState({minutesDisplayed:!0})},showHours:function(){return this.setState({hoursDisplayed:!0})},renderMinutes:function(){return this.state.minutesDisplayed?n.createElement(r,{setSelectedMinute:this.props.setSelectedMinute}):null},renderHours:function(){return this.state.hoursDisplayed?n.createElement(a,{setSelectedHour:this.props.setSelectedHour}):null},renderPicker:function(){return this.state.minutesDisplayed||this.state.hoursDisplayed?"":n.createElement("div",{className:"timepicker-picker"},n.createElement("table",{className:"table-condensed"},n.createElement("tbody",null,n.createElement("tr",null,n.createElement("td",null,n.createElement("a",{className:"btn",onClick:this.props.addHour},n.createElement(o,{glyph:"chevron-up"}))),n.createElement("td",{className:"separator"}),n.createElement("td",null,n.createElement("a",{className:"btn",onClick:this.props.addMinute},n.createElement(o,{glyph:"chevron-up"}))),n.createElement("td",{className:"separator"})),n.createElement("tr",null,n.createElement("td",null,n.createElement("span",{className:"timepicker-hour",onClick:this.showHours},this.props.selectedDate.format("h"))),n.createElement("td",{className:"separator"},":"),n.createElement("td",null,n.createElement("span",{className:"timepicker-minute",onClick:this.showMinutes},this.props.selectedDate.format("mm"))),n.createElement("td",{className:"separator"}),n.createElement("td",null,n.createElement("button",{className:"btn btn-primary",onClick:this.props.togglePeriod,type:"button"},this.props.selectedDate.format("A")))),n.createElement("tr",null,n.createElement("td",null,n.createElement("a",{className:"btn",onClick:this.props.subtractHour},n.createElement(o,{glyph:"chevron-down"}))),n.createElement("td",{className:"separator"}),n.createElement("td",null,n.createElement("a",{className:"btn",onClick:this.props.subtractMinute},n.createElement(o,{glyph:"chevron-down"}))),n.createElement("td",{className:"separator"})))))},render:function(){return n.createElement("div",{className:"timepicker"},this.renderPicker(),this.renderHours(),this.renderMinutes())}}),e.exports=i},function(e,t,s){var a,r,i;r=s(2),i=s(3),a=r.createClass({displayName:"DateTimePickerDays",propTypes:{subtractMonth:r.PropTypes.func.isRequired,addMonth:r.PropTypes.func.isRequired,viewDate:r.PropTypes.object.isRequired,selectedDate:r.PropTypes.object.isRequired,showToday:r.PropTypes.bool,daysOfWeekDisabled:r.PropTypes.array,setSelectedDate:r.PropTypes.func.isRequired,showMonths:r.PropTypes.func.isRequired,minDate:r.PropTypes.object,maxDate:r.PropTypes.object},getDefaultProps:function(){return{showToday:!0}},renderDays:function(){var e,t,s,a,o,n,c,p,l,d,u,h,m,y,D;for(h=this.props.viewDate.year(),n=this.props.viewDate.month(),p=this.props.viewDate.clone().subtract(1,"months"),s=p.daysInMonth(),p.date(s).startOf("week"),c=i(p).clone().add(42,"d"),l=this.props.minDate?this.props.minDate.clone().subtract(1,"days"):this.props.minDate,d=this.props.maxDate?this.props.maxDate.clone():this.props.maxDate,a=[],e=[];p.isBefore(c);){if(t={day:!0},p.year()h||p.year()===h&&p.month()>n)&&(t["new"]=!0),p.isSame(i({y:this.props.selectedDate.year(),M:this.props.selectedDate.month(),d:this.props.selectedDate.date()}))&&(t.active=!0),this.props.showToday&&p.isSame(i(),"day")&&(t.today=!0),(l&&p.isBefore(l)||d&&p.isAfter(d))&&(t.disabled=!0),this.props.daysOfWeekDisabled)for(D=this.props.daysOfWeekDisabled,m=0,y=D.length;y>m;m++)if(o=D[m],p.day()===this.props.daysOfWeekDisabled[o]){t.disabled=!0;break}e.push(r.createElement("td",{key:p.month()+"-"+p.date(),className:r.addons.classSet(t),onClick:this.props.setSelectedDate},p.date())),p.weekday()===i().endOf("week").weekday()&&(u=r.createElement("tr",{key:p.month()+"-"+p.date()},e),a.push(u),e=[]),p.add(1,"d")}return a},render:function(){return r.createElement("div",{className:"datepicker-days",style:{display:"block"}},r.createElement("table",{className:"table-condensed"},r.createElement("thead",null,r.createElement("tr",null,r.createElement("th",{className:"prev",onClick:this.props.subtractMonth},"‹"),r.createElement("th",{className:"switch",colSpan:"5",onClick:this.props.showMonths},i.months()[this.props.viewDate.month()]," ",this.props.viewDate.year()),r.createElement("th",{className:"next",onClick:this.props.addMonth},"›")),r.createElement("tr",null,r.createElement("th",{className:"dow"},"Su"),r.createElement("th",{className:"dow"},"Mo"),r.createElement("th",{className:"dow"},"Tu"),r.createElement("th",{className:"dow"},"We"),r.createElement("th",{className:"dow"},"Th"),r.createElement("th",{className:"dow"},"Fr"),r.createElement("th",{className:"dow"},"Sa"))),r.createElement("tbody",null,this.renderDays())))}}),e.exports=a},function(e,t,s){var a,r,i;r=s(2),i=s(3),a=r.createClass({displayName:"DateTimePickerMonths",propTypes:{subtractYear:r.PropTypes.func.isRequired,addYear:r.PropTypes.func.isRequired,viewDate:r.PropTypes.object.isRequired,selectedDate:r.PropTypes.object.isRequired,showYears:r.PropTypes.func.isRequired,setViewMonth:r.PropTypes.func.isRequired},renderMonths:function(){var e,t,s,a,o;for(s=this.props.selectedDate.month(),o=i.monthsShort(),t=0,a=[];12>t;)e={month:!0,active:t===s&&this.props.viewDate.year()===this.props.selectedDate.year()},a.push(r.createElement("span",{className:r.addons.classSet(e),onClick:this.props.setViewMonth},o[t])),t++;return a},render:function(){return r.createElement("div",{className:"datepicker-months",style:{display:"block"}},r.createElement("table",{className:"table-condensed"},r.createElement("thead",null,r.createElement("tr",null,r.createElement("th",{className:"prev",onClick:this.props.subtractYear},"‹"),r.createElement("th",{className:"switch",colSpan:"5",onClick:this.props.showYears},this.props.viewDate.year()),r.createElement("th",{className:"next",onClick:this.props.addYear},"›"))),r.createElement("tbody",null,r.createElement("tr",null,r.createElement("td",{colSpan:"7"},this.renderMonths())))))}}),e.exports=a},function(e,t,s){var a,r;r=s(2),a=r.createClass({displayName:"DateTimePickerYears",propTypes:{subtractDecade:r.PropTypes.func.isRequired,addDecade:r.PropTypes.func.isRequired,viewDate:r.PropTypes.object.isRequired,selectedDate:r.PropTypes.object.isRequired,setViewYear:r.PropTypes.func.isRequired},renderYears:function(){var e,t,s,a;for(a=[],s=10*parseInt(this.props.viewDate.year()/10,10),s--,t=-1;11>t;)e={year:!0,old:-1===t|10===t,active:this.props.selectedDate.year()===s},a.push(r.createElement("span",{className:r.addons.classSet(e),onClick:this.props.setViewYear},s)),s++,t++;return a},render:function(){var e;return e=10*parseInt(this.props.viewDate.year()/10,10),r.createElement("div",{className:"datepicker-years",style:{display:"block"}},r.createElement("table",{className:"table-condensed"},r.createElement("thead",null,r.createElement("tr",null,r.createElement("th",{className:"prev",onClick:this.props.subtractDecade},"‹"),r.createElement("th",{className:"switch",colSpan:"5"},e," - ",e+9),r.createElement("th",{className:"next",onClick:this.props.addDecade},"›"))),r.createElement("tbody",null,r.createElement("tr",null,r.createElement("td",{colSpan:"7"},this.renderYears())))))}}),e.exports=a},function(e,t,s){var a,r;r=s(2),a=r.createClass({displayName:"DateTimePickerMinutes",propTypes:{setSelectedMinute:r.PropTypes.func.isRequired},render:function(){return r.createElement("div",{className:"timepicker-minutes","data-action":"selectMinute",style:{display:"block"}},r.createElement("table",{className:"table-condensed"},r.createElement("tbody",null,r.createElement("tr",null,r.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"00"),r.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"05"),r.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"10"),r.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"15")),r.createElement("tr",null,r.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"20"),r.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"25"),r.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"30"),r.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"35")),r.createElement("tr",null,r.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"40"),r.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"45"),r.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"50"),r.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"55")))))}}),e.exports=a},function(e,t,s){var a,r;r=s(2),a=r.createClass({displayName:"DateTimePickerHours",propTypes:{setSelectedHour:r.PropTypes.func.isRequired},render:function(){return r.createElement("div",{className:"timepicker-hours","data-action":"selectHour",style:{display:"block"}},r.createElement("table",{className:"table-condensed"},r.createElement("tbody",null,r.createElement("tr",null,r.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"01"),r.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"02"),r.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"03"),r.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"04")),r.createElement("tr",null,r.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"05"),r.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"06"),r.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"07"),r.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"08")),r.createElement("tr",null,r.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"09"),r.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"10"),r.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"11"),r.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"12")),r.createElement("tr",null,r.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"13"),r.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"14"),r.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"15"),r.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"16")),r.createElement("tr",null,r.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"17"),r.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"18"),r.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"19"),r.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"20")),r.createElement("tr",null,r.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"21"),r.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"22"),r.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"23"),r.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"24")))))}}),e.exports=a}])}); \ No newline at end of file +!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("React"),require("moment"),require("ReactBootstrap")):"function"==typeof define&&define.amd?define(["React","moment","ReactBootstrap"],t):"object"==typeof exports?exports.ReactBootstrapDatetimepicker=t(require("React"),require("moment"),require("ReactBootstrap")):e.ReactBootstrapDatetimepicker=t(e.React,e.moment,e.ReactBootstrap)}(this,function(e,t,s){return function(e){function t(a){if(s[a])return s[a].exports;var r=s[a]={exports:{},id:a,loaded:!1};return e[a].call(r.exports,r,r.exports,t),r.loaded=!0,r.exports}var s={};return t.m=e,t.c=s,t.p="",t(0)}([function(e,t,s){e.exports=s(1)},function(e,t,s){var a,r,i,o,n;o=s(2),r=s(5),n=s(3),i=s(4).Glyphicon,Constants=s(6),a=o.createClass({displayName:"DateTimeField",propTypes:{dateTime:o.PropTypes.string,onChange:o.PropTypes.func,format:o.PropTypes.string,inputProps:o.PropTypes.object,inputFormat:o.PropTypes.string,defaultText:o.PropTypes.string,mode:o.PropTypes.oneOf([Constants.MODE_DATE,Constants.MODE_DATETIME,Constants.MODE_TIME]),minDate:o.PropTypes.object,maxDate:o.PropTypes.object},getDefaultProps:function(){return{dateTime:n().format("x"),format:"x",showToday:!0,viewMode:"days",daysOfWeekDisabled:[],mode:Constants.MODE_DATETIME,onChange:function(e){}}},resolvePropsInputFormat:function(){if(this.props.inputFormat)return this.props.inputFormat;switch(this.props.mode){case Constants.MODE_TIME:return"h:mm A";case Constants.MODE_DATE:return"MM/DD/YY";default:return"MM/DD/YY h:mm A"}},getInitialState:function(){return{showDatePicker:this.props.mode!==Constants.MODE_TIME,showTimePicker:this.props.mode===Constants.MODE_TIME,inputFormat:this.resolvePropsInputFormat(),buttonIcon:this.props.mode===Constants.MODE_TIME?"time":"calendar",widgetStyle:{display:"block",position:"absolute",left:-9999,zIndex:"9999 !important"},viewDate:n(this.props.dateTime,this.props.format,!0).startOf("month"),selectedDate:n(this.props.dateTime,this.props.format,!0),inputValue:"undefined"!=typeof this.props.defaultText?this.props.defaultText:n(this.props.dateTime,this.props.format,!0).format(this.resolvePropsInputFormat())}},componentWillReceiveProps:function(e){return n(e.dateTime,e.format,!0).isValid()?this.setState({viewDate:n(e.dateTime,e.format,!0).startOf("month"),selectedDate:n(e.dateTime,e.format,!0),inputValue:n(e.dateTime,e.format,!0).format(e.inputFormat)}):void 0},onChange:function(e){var t=null==e.target?e:e.target.value;return n(t,this.state.inputFormat,!0).isValid()&&this.setState({selectedDate:n(t,this.state.inputFormat,!0),viewDate:n(t,this.state.inputFormat,!0).startOf("month")}),this.setState({inputValue:t},function(){return this.props.onChange(n(this.state.inputValue,this.state.inputFormat,!0).format(this.props.format))})},setSelectedDate:function(e){var t=e.target;if(t.className&&!t.className.match(/disabled/g)){var s;return s=t.className.includes("new")?this.state.viewDate.month()+1:t.className.includes("old")?this.state.viewDate.month()-1:this.state.viewDate.month(),this.setState({selectedDate:this.state.viewDate.clone().month(s).date(parseInt(e.target.innerHTML)).hour(this.state.selectedDate.hours()).minute(this.state.selectedDate.minutes())},function(){return this.closePicker(),this.props.onChange(this.state.selectedDate.format(this.props.format)),this.setState({inputValue:this.state.selectedDate.format(this.state.inputFormat)})})}},setSelectedHour:function(e){return this.setState({selectedDate:this.state.selectedDate.clone().hour(parseInt(e.target.innerHTML)).minute(this.state.selectedDate.minutes())},function(){return this.closePicker(),this.props.onChange(this.state.selectedDate.format(this.props.format)),this.setState({inputValue:this.state.selectedDate.format(this.state.inputFormat)})})},setSelectedMinute:function(e){return this.setState({selectedDate:this.state.selectedDate.clone().hour(this.state.selectedDate.hours()).minute(parseInt(e.target.innerHTML))},function(){return this.closePicker(),this.props.onChange(this.state.selectedDate.format(this.props.format)),this.setState({inputValue:this.state.selectedDate.format(this.state.inputFormat)})})},setViewMonth:function(e){return this.setState({viewDate:this.state.viewDate.clone().month(e)})},setViewYear:function(e){return this.setState({viewDate:this.state.viewDate.clone().year(e)})},addMinute:function(){return this.setState({selectedDate:this.state.selectedDate.clone().add(1,"minutes")},function(){return this.props.onChange(this.state.selectedDate.format(this.props.format)),this.setState({inputValue:this.state.selectedDate.format(this.props.inputFormat)})})},addHour:function(){return this.setState({selectedDate:this.state.selectedDate.clone().add(1,"hours")},function(){return this.props.onChange(this.state.selectedDate.format(this.props.format)),this.setState({inputValue:this.state.selectedDate.format(this.props.inputFormat)})})},addMonth:function(){return this.setState({viewDate:this.state.viewDate.add(1,"months")})},addYear:function(){return this.setState({viewDate:this.state.viewDate.add(1,"years")})},addDecade:function(){return this.setState({viewDate:this.state.viewDate.add(10,"years")})},subtractMinute:function(){return this.setState({selectedDate:this.state.selectedDate.clone().subtract(1,"minutes")},function(){return this.props.onChange(this.state.selectedDate.format(this.props.format)),this.setState({inputValue:this.state.selectedDate.format(this.props.inputFormat)})})},subtractHour:function(){return this.setState({selectedDate:this.state.selectedDate.clone().subtract(1,"hours")},function(){return this.props.onChange(this.state.selectedDate.format(this.props.format)),this.setState({inputValue:this.state.selectedDate.format(this.props.inputFormat)})})},subtractMonth:function(){return this.setState({viewDate:this.state.viewDate.subtract(1,"months")})},subtractYear:function(){return this.setState({viewDate:this.state.viewDate.subtract(1,"years")})},subtractDecade:function(){return this.setState({viewDate:this.state.viewDate.subtract(10,"years")})},togglePeriod:function(){return this.onChange(this.state.selectedDate.hour()>12?this.state.selectedDate.clone().subtract(12,"hours").format(this.state.inputFormat):this.state.selectedDate.clone().add(12,"hours").format(this.state.inputFormat))},togglePicker:function(){return this.setState({showDatePicker:!this.state.showDatePicker,showTimePicker:!this.state.showTimePicker})},onClick:function(){var e,t,s,a,r,i;return this.state.showPicker?this.closePicker():(this.setState({showPicker:!0}),t=this.refs.dtpbutton.getDOMNode().getBoundingClientRect(),e={"bootstrap-datetimepicker-widget":!0,"dropdown-menu":!0},s={top:t.top+window.pageYOffset-document.documentElement.clientTop,left:t.left+window.pageXOffset-document.documentElement.clientLeft},s.top=s.top+this.refs.datetimepicker.getDOMNode().offsetHeight,r=void 0!==window.pageYOffset?window.pageYOffset:(document.documentElement||document.body.parentNode||document.body).scrollTop,a="up"===this.props.direction?"top":"bottom"===this.props.direction?"bottom":"auto"===this.props.direction?s.top+this.refs.widget.getDOMNode().offsetHeight>window.offsetHeight+r&&this.refs.widget.offsetHeight+this.refs.datetimepicker.getDOMNode().offsetHeight>s.top?"top":"bottom":void 0,"top"===a?(s.top=-this.refs.widget.getDOMNode().offsetHeight-this.getDOMNode().clientHeight-2,e.top=!0,e.bottom=!1,e["pull-right"]=!0):(s.top=40,e.top=!1,e.bottom=!0,e["pull-right"]=!0),i={display:"block",position:"absolute",top:s.top,left:"auto",right:40},this.setState({widgetStyle:i,widgetClasses:e}))},closePicker:function(e){var t;return t=this.state.widgetStyle,t.left=-9999,t.display="none",this.setState({showPicker:!1,widgetStyle:t})},renderOverlay:function(){var e;return e={position:"fixed",top:0,bottom:0,left:0,right:0,zIndex:"999"},this.state.showPicker?o.createElement("div",{style:e,onClick:this.closePicker}):o.createElement("span",null)},render:function(){return o.createElement("div",null,this.renderOverlay(),o.createElement(r,{ref:"widget",widgetClasses:this.state.widgetClasses,widgetStyle:this.state.widgetStyle,showDatePicker:this.state.showDatePicker,showTimePicker:this.state.showTimePicker,viewDate:this.state.viewDate,selectedDate:this.state.selectedDate,showToday:this.props.showToday,viewMode:this.props.viewMode,daysOfWeekDisabled:this.props.daysOfWeekDisabled,mode:this.props.mode,minDate:this.props.minDate,maxDate:this.props.maxDate,addDecade:this.addDecade,addYear:this.addYear,addMonth:this.addMonth,addHour:this.addHour,addMinute:this.addMinute,subtractDecade:this.subtractDecade,subtractYear:this.subtractYear,subtractMonth:this.subtractMonth,subtractHour:this.subtractHour,subtractMinute:this.subtractMinute,setViewYear:this.setViewYear,setViewMonth:this.setViewMonth,setSelectedDate:this.setSelectedDate,setSelectedHour:this.setSelectedHour,setSelectedMinute:this.setSelectedMinute,togglePicker:this.togglePicker,togglePeriod:this.togglePeriod}),o.createElement("div",{className:"input-group date",ref:"datetimepicker"},o.createElement("input",o.__spread({type:"text",className:"form-control",onChange:this.onChange,value:this.state.inputValue},this.props.inputProps)),o.createElement("span",{className:"input-group-addon",onClick:this.onClick,onBlur:this.onBlur,ref:"dtpbutton"},o.createElement(i,{glyph:this.state.buttonIcon}))))}}),e.exports=a},function(t,s,a){t.exports=e},function(e,s,a){e.exports=t},function(e,t,a){e.exports=s},function(e,t,s){var a,r,i,o,n;n=s(2),r=s(7),i=s(8),o=s(4).Glyphicon,Constants=s(6),a=n.createClass({displayName:"DateTimePicker",propTypes:{showDatePicker:n.PropTypes.bool,showTimePicker:n.PropTypes.bool,subtractMonth:n.PropTypes.func.isRequired,addMonth:n.PropTypes.func.isRequired,viewDate:n.PropTypes.object.isRequired,selectedDate:n.PropTypes.object.isRequired,showToday:n.PropTypes.bool,viewMode:n.PropTypes.oneOfType([n.PropTypes.string,n.PropTypes.number]),mode:n.PropTypes.oneOf([Constants.MODE_DATE,Constants.MODE_DATETIME,Constants.MODE_TIME]),daysOfWeekDisabled:n.PropTypes.array,setSelectedDate:n.PropTypes.func.isRequired,subtractYear:n.PropTypes.func.isRequired,addYear:n.PropTypes.func.isRequired,setViewMonth:n.PropTypes.func.isRequired,setViewYear:n.PropTypes.func.isRequired,subtractHour:n.PropTypes.func.isRequired,addHour:n.PropTypes.func.isRequired,subtractMinute:n.PropTypes.func.isRequired,addMinute:n.PropTypes.func.isRequired,addDecade:n.PropTypes.func.isRequired,subtractDecade:n.PropTypes.func.isRequired,togglePeriod:n.PropTypes.func.isRequired,minDate:n.PropTypes.object,maxDate:n.PropTypes.object},renderDatePicker:function(){return this.props.showDatePicker?n.createElement("li",null,n.createElement(r,{addMonth:this.props.addMonth,subtractMonth:this.props.subtractMonth,setSelectedDate:this.props.setSelectedDate,viewDate:this.props.viewDate,selectedDate:this.props.selectedDate,showToday:this.props.showToday,viewMode:this.props.viewMode,daysOfWeekDisabled:this.props.daysOfWeekDisabled,subtractYear:this.props.subtractYear,addYear:this.props.addYear,setViewMonth:this.props.setViewMonth,setViewYear:this.props.setViewYear,addDecade:this.props.addDecade,subtractDecade:this.props.subtractDecade,minDate:this.props.minDate,maxDate:this.props.maxDate})):void 0},renderTimePicker:function(){return this.props.showTimePicker?n.createElement("li",null,n.createElement(i,{viewDate:this.props.viewDate,selectedDate:this.props.selectedDate,setSelectedHour:this.props.setSelectedHour,setSelectedMinute:this.props.setSelectedMinute,addHour:this.props.addHour,subtractHour:this.props.subtractHour,addMinute:this.props.addMinute,subtractMinute:this.props.subtractMinute,togglePeriod:this.props.togglePeriod,mode:this.props.mode})):void 0},renderSwitchButton:function(){return this.props.mode===Constants.MODE_DATETIME?n.createElement("li",null,n.createElement("span",{className:"btn picker-switch",style:{width:"100%"},onClick:this.props.togglePicker},n.createElement(o,{glyph:this.props.showTimePicker?"calendar":"time"}))):null},render:function(){return n.createElement("div",{className:n.addons.classSet(this.props.widgetClasses),style:this.props.widgetStyle},n.createElement("ul",{className:"list-unstyled"},this.renderDatePicker(),this.renderSwitchButton(),this.renderTimePicker()))}}),e.exports=a},function(e,t,s){e.exports={MODE_DATE:"date",MODE_DATETIME:"datetime",MODE_TIME:"time"}},function(e,t,s){var a,r,i,o,n;n=s(2),r=s(9),i=s(10),o=s(11),a=n.createClass({displayName:"DateTimePickerDate",propTypes:{subtractMonth:n.PropTypes.func.isRequired,addMonth:n.PropTypes.func.isRequired,viewDate:n.PropTypes.object.isRequired,selectedDate:n.PropTypes.object.isRequired,showToday:n.PropTypes.bool,viewMode:n.PropTypes.oneOfType([n.PropTypes.string,n.PropTypes.number]),daysOfWeekDisabled:n.PropTypes.array,setSelectedDate:n.PropTypes.func.isRequired,subtractYear:n.PropTypes.func.isRequired,addYear:n.PropTypes.func.isRequired,setViewMonth:n.PropTypes.func.isRequired,setViewYear:n.PropTypes.func.isRequired,addDecade:n.PropTypes.func.isRequired,subtractDecade:n.PropTypes.func.isRequired,minDate:n.PropTypes.object,maxDate:n.PropTypes.object},getInitialState:function(){var e={days:{daysDisplayed:!0,monthsDisplayed:!1,yearsDisplayed:!1},months:{daysDisplayed:!1,monthsDisplayed:!0,yearsDisplayed:!1},years:{daysDisplayed:!1,monthsDisplayed:!1,yearsDisplayed:!0}};return e[this.props.viewMode]||e[Object.keys(e)[this.props.viewMode]]||e.days},showMonths:function(){return this.setState({daysDisplayed:!1,monthsDisplayed:!0})},showYears:function(){return this.setState({monthsDisplayed:!1,yearsDisplayed:!0})},setViewYear:function(e){return this.props.setViewYear(e.target.innerHTML),this.setState({yearsDisplayed:!1,monthsDisplayed:!0})},setViewMonth:function(e){return this.props.setViewMonth(e.target.innerHTML),this.setState({monthsDisplayed:!1,daysDisplayed:!0})},renderDays:function(){return this.state.daysDisplayed?n.createElement(r,{addMonth:this.props.addMonth,subtractMonth:this.props.subtractMonth,setSelectedDate:this.props.setSelectedDate,viewDate:this.props.viewDate,selectedDate:this.props.selectedDate,showToday:this.props.showToday,daysOfWeekDisabled:this.props.daysOfWeekDisabled,showMonths:this.showMonths,minDate:this.props.minDate,maxDate:this.props.maxDate}):null},renderMonths:function(){return this.state.monthsDisplayed?n.createElement(i,{subtractYear:this.props.subtractYear,addYear:this.props.addYear,viewDate:this.props.viewDate,selectedDate:this.props.selectedDate,showYears:this.showYears,setViewMonth:this.setViewMonth}):null},renderYears:function(){return this.state.yearsDisplayed?n.createElement(o,{viewDate:this.props.viewDate,selectedDate:this.props.selectedDate,setViewYear:this.setViewYear,addDecade:this.props.addDecade,subtractDecade:this.props.subtractDecade}):null},render:function(){return n.createElement("div",{className:"datepicker"},this.renderDays(),this.renderMonths(),this.renderYears())}}),e.exports=a},function(e,t,s){var a,r,i,o,n;n=s(2),r=s(12),a=s(13),o=s(4).Glyphicon,Constants=s(6),i=n.createClass({displayName:"DateTimePickerTime",propTypes:{setSelectedHour:n.PropTypes.func.isRequired,setSelectedMinute:n.PropTypes.func.isRequired,subtractHour:n.PropTypes.func.isRequired,addHour:n.PropTypes.func.isRequired,subtractMinute:n.PropTypes.func.isRequired,addMinute:n.PropTypes.func.isRequired,viewDate:n.PropTypes.object.isRequired,selectedDate:n.PropTypes.object.isRequired,togglePeriod:n.PropTypes.func.isRequired,mode:n.PropTypes.oneOf([Constants.MODE_DATE,Constants.MODE_DATETIME,Constants.MODE_TIME])},getInitialState:function(){return{minutesDisplayed:!1,hoursDisplayed:!1}},goBack:function(){return this.setState({minutesDisplayed:!1,hoursDisplayed:!1})},showMinutes:function(){return this.setState({minutesDisplayed:!0})},showHours:function(){return this.setState({hoursDisplayed:!0})},renderMinutes:function(){return this.state.minutesDisplayed?n.createElement(r,n.__spread({},this.props,{onSwitch:this.goBack})):null},renderHours:function(){return this.state.hoursDisplayed?n.createElement(a,n.__spread({},this.props,{onSwitch:this.goBack})):null},renderPicker:function(){return this.state.minutesDisplayed||this.state.hoursDisplayed?"":n.createElement("div",{className:"timepicker-picker"},n.createElement("table",{className:"table-condensed"},n.createElement("tbody",null,n.createElement("tr",null,n.createElement("td",null,n.createElement("a",{className:"btn",onClick:this.props.addHour},n.createElement(o,{glyph:"chevron-up"}))),n.createElement("td",{className:"separator"}),n.createElement("td",null,n.createElement("a",{className:"btn",onClick:this.props.addMinute},n.createElement(o,{glyph:"chevron-up"}))),n.createElement("td",{className:"separator"})),n.createElement("tr",null,n.createElement("td",null,n.createElement("span",{className:"timepicker-hour",onClick:this.showHours},this.props.selectedDate.format("h"))),n.createElement("td",{className:"separator"},":"),n.createElement("td",null,n.createElement("span",{className:"timepicker-minute",onClick:this.showMinutes},this.props.selectedDate.format("mm"))),n.createElement("td",{className:"separator"}),n.createElement("td",null,n.createElement("button",{className:"btn btn-primary",onClick:this.props.togglePeriod,type:"button"},this.props.selectedDate.format("A")))),n.createElement("tr",null,n.createElement("td",null,n.createElement("a",{className:"btn",onClick:this.props.subtractHour},n.createElement(o,{glyph:"chevron-down"}))),n.createElement("td",{className:"separator"}),n.createElement("td",null,n.createElement("a",{className:"btn",onClick:this.props.subtractMinute},n.createElement(o,{glyph:"chevron-down"}))),n.createElement("td",{className:"separator"})))))},render:function(){return n.createElement("div",{className:"timepicker"},this.renderPicker(),this.renderHours(),this.renderMinutes())}}),e.exports=i},function(e,t,s){var a,r,i;r=s(2),i=s(3),a=r.createClass({displayName:"DateTimePickerDays",propTypes:{subtractMonth:r.PropTypes.func.isRequired,addMonth:r.PropTypes.func.isRequired,viewDate:r.PropTypes.object.isRequired,selectedDate:r.PropTypes.object.isRequired,showToday:r.PropTypes.bool,daysOfWeekDisabled:r.PropTypes.array,setSelectedDate:r.PropTypes.func.isRequired,showMonths:r.PropTypes.func.isRequired,minDate:r.PropTypes.object,maxDate:r.PropTypes.object},getDefaultProps:function(){return{showToday:!0}},renderDays:function(){var e,t,s,a,o,n,c,p,l,d,u,h,m,D,y;for(h=this.props.viewDate.year(),n=this.props.viewDate.month(),p=this.props.viewDate.clone().subtract(1,"months"),s=p.daysInMonth(),p.date(s).startOf("week"),c=i(p).clone().add(42,"d"),l=this.props.minDate?this.props.minDate.clone().subtract(1,"days"):this.props.minDate,d=this.props.maxDate?this.props.maxDate.clone():this.props.maxDate,a=[],e=[];p.isBefore(c);){if(t={day:!0},p.year()h||p.year()===h&&p.month()>n)&&(t["new"]=!0),p.isSame(i({y:this.props.selectedDate.year(),M:this.props.selectedDate.month(),d:this.props.selectedDate.date()}))&&(t.active=!0),this.props.showToday&&p.isSame(i(),"day")&&(t.today=!0),(l&&p.isBefore(l)||d&&p.isAfter(d))&&(t.disabled=!0),this.props.daysOfWeekDisabled)for(y=this.props.daysOfWeekDisabled,m=0,D=y.length;D>m;m++)if(o=y[m],p.day()===this.props.daysOfWeekDisabled[o]){t.disabled=!0;break}e.push(r.createElement("td",{key:p.month()+"-"+p.date(),className:r.addons.classSet(t),onClick:this.props.setSelectedDate},p.date())),p.weekday()===i().endOf("week").weekday()&&(u=r.createElement("tr",{key:p.month()+"-"+p.date()},e),a.push(u),e=[]),p.add(1,"d")}return a},render:function(){return r.createElement("div",{className:"datepicker-days",style:{display:"block"}},r.createElement("table",{className:"table-condensed"},r.createElement("thead",null,r.createElement("tr",null,r.createElement("th",{className:"prev",onClick:this.props.subtractMonth},"‹"),r.createElement("th",{className:"switch",colSpan:"5",onClick:this.props.showMonths},i.months()[this.props.viewDate.month()]," ",this.props.viewDate.year()),r.createElement("th",{className:"next",onClick:this.props.addMonth},"›")),r.createElement("tr",null,r.createElement("th",{className:"dow"},"Su"),r.createElement("th",{className:"dow"},"Mo"),r.createElement("th",{className:"dow"},"Tu"),r.createElement("th",{className:"dow"},"We"),r.createElement("th",{className:"dow"},"Th"),r.createElement("th",{className:"dow"},"Fr"),r.createElement("th",{className:"dow"},"Sa"))),r.createElement("tbody",null,this.renderDays())))}}),e.exports=a},function(e,t,s){var a,r,i;r=s(2),i=s(3),a=r.createClass({displayName:"DateTimePickerMonths",propTypes:{subtractYear:r.PropTypes.func.isRequired,addYear:r.PropTypes.func.isRequired,viewDate:r.PropTypes.object.isRequired,selectedDate:r.PropTypes.object.isRequired,showYears:r.PropTypes.func.isRequired,setViewMonth:r.PropTypes.func.isRequired},renderMonths:function(){var e,t,s,a,o;for(s=this.props.selectedDate.month(),o=i.monthsShort(),t=0,a=[];12>t;)e={month:!0,active:t===s&&this.props.viewDate.year()===this.props.selectedDate.year()},a.push(r.createElement("span",{key:t,className:r.addons.classSet(e),onClick:this.props.setViewMonth},o[t])),t++;return a},render:function(){return r.createElement("div",{className:"datepicker-months",style:{display:"block"}},r.createElement("table",{className:"table-condensed"},r.createElement("thead",null,r.createElement("tr",null,r.createElement("th",{className:"prev",onClick:this.props.subtractYear},"‹"),r.createElement("th",{className:"switch",colSpan:"5",onClick:this.props.showYears},this.props.viewDate.year()),r.createElement("th",{className:"next",onClick:this.props.addYear},"›"))),r.createElement("tbody",null,r.createElement("tr",null,r.createElement("td",{colSpan:"7"},this.renderMonths())))))}}),e.exports=a},function(e,t,s){var a,r;r=s(2),a=r.createClass({displayName:"DateTimePickerYears",propTypes:{subtractDecade:r.PropTypes.func.isRequired,addDecade:r.PropTypes.func.isRequired,viewDate:r.PropTypes.object.isRequired,selectedDate:r.PropTypes.object.isRequired,setViewYear:r.PropTypes.func.isRequired},renderYears:function(){var e,t,s,a;for(a=[],s=10*parseInt(this.props.viewDate.year()/10,10),s--,t=-1;11>t;)e={year:!0,old:-1===t|10===t,active:this.props.selectedDate.year()===s},a.push(r.createElement("span",{key:s,className:r.addons.classSet(e),onClick:this.props.setViewYear},s)),s++,t++;return a},render:function(){var e;return e=10*parseInt(this.props.viewDate.year()/10,10),r.createElement("div",{className:"datepicker-years",style:{display:"block"}},r.createElement("table",{className:"table-condensed"},r.createElement("thead",null,r.createElement("tr",null,r.createElement("th",{className:"prev",onClick:this.props.subtractDecade},"‹"),r.createElement("th",{className:"switch",colSpan:"5"},e," - ",e+9),r.createElement("th",{className:"next",onClick:this.props.addDecade},"›"))),r.createElement("tbody",null,r.createElement("tr",null,r.createElement("td",{colSpan:"7"},this.renderYears())))))}}),e.exports=a},function(e,t,s){var a,r;r=s(2),Glyphicon=s(4).Glyphicon,a=r.createClass({displayName:"DateTimePickerMinutes",propTypes:{setSelectedMinute:r.PropTypes.func.isRequired,onSwitch:r.PropTypes.func.isRequired},renderSwitchButton:function(){return this.props.mode===Constants.MODE_TIME?r.createElement("ul",{className:"list-unstyled"},r.createElement("li",null,r.createElement("span",{className:"btn picker-switch",style:{width:"100%"},onClick:this.props.onSwitch},r.createElement(Glyphicon,{glyph:"time"})))):null},render:function(){return r.createElement("div",{className:"timepicker-minutes","data-action":"selectMinute",style:{display:"block"}},this.renderSwitchButton(),r.createElement("table",{className:"table-condensed"},r.createElement("tbody",null,r.createElement("tr",null,r.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"00"),r.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"05"),r.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"10"),r.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"15")),r.createElement("tr",null,r.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"20"),r.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"25"),r.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"30"),r.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"35")),r.createElement("tr",null,r.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"40"),r.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"45"),r.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"50"),r.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"55")))))}}),e.exports=a},function(e,t,s){var a,r;r=s(2),Glyphicon=s(4).Glyphicon,a=r.createClass({displayName:"DateTimePickerHours",propTypes:{setSelectedHour:r.PropTypes.func.isRequired,onSwitch:r.PropTypes.func.isRequired},renderSwitchButton:function(){return this.props.mode===Constants.MODE_TIME?r.createElement("ul",{className:"list-unstyled"},r.createElement("li",null,r.createElement("span",{className:"btn picker-switch",style:{width:"100%"},onClick:this.props.onSwitch},r.createElement(Glyphicon,{glyph:"time"})))):null},render:function(){return r.createElement("div",{className:"timepicker-hours","data-action":"selectHour",style:{display:"block"}},this.renderSwitchButton(),r.createElement("table",{className:"table-condensed"},r.createElement("tbody",null,r.createElement("tr",null,r.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"01"),r.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"02"),r.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"03"),r.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"04")),r.createElement("tr",null,r.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"05"),r.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"06"),r.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"07"),r.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"08")),r.createElement("tr",null,r.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"09"),r.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"10"),r.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"11"),r.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"12")),r.createElement("tr",null,r.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"13"),r.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"14"),r.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"15"),r.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"16")),r.createElement("tr",null,r.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"17"),r.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"18"),r.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"19"),r.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"20")),r.createElement("tr",null,r.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"21"),r.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"22"),r.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"23"),r.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"24")))))}}),e.exports=a}])}); \ No newline at end of file diff --git a/examples/basic/basic.jsx b/examples/basic/basic.jsx index 6ab88096..b3fe22b1 100644 --- a/examples/basic/basic.jsx +++ b/examples/basic/basic.jsx @@ -24,9 +24,9 @@ var Basic = React.createClass({
Example with default Text - 
 {''}
+ 
 {''}
@@ -76,6 +76,22 @@ var Basic = React.createClass({ 
 {''}
+
+
+ clearable + + 
 {''}
+
+
+
+
+ Empty + + 
 {''}
+
+
); } diff --git a/package.json b/package.json index fe9e38ff..09a38d45 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "mnq-react-bootstrap-datetimepicker", - "version": "0.0.16", + "version": "0.0.17", "description": "A bootstrap datetime picker component for React.js", "repository": { "type": "git", @@ -49,6 +49,7 @@ "webpack-dev-server": "^1.7.0" }, "dependencies": { + "classnames": "^1.2.0", "moment": "^2.8.2", "react-bootstrap": "^0.16.1" } diff --git a/src/DateTimeField.jsx b/src/DateTimeField.jsx index fb87c53c..43f81414 100644 --- a/src/DateTimeField.jsx +++ b/src/DateTimeField.jsx @@ -1,6 +1,7 @@ var DateTimeField, DateTimePicker, Glyphicon, React, moment; React = require('react'); +classNames = require('classnames'); DateTimePicker = require('./DateTimePicker'); @@ -13,23 +14,26 @@ Constants = require('./Constants'); DateTimeField = React.createClass({ propTypes: { dateTime: React.PropTypes.string, + defaultValue: React.PropTypes.string, onChange: React.PropTypes.func, format: React.PropTypes.string, inputProps: React.PropTypes.object, inputFormat: React.PropTypes.string, - defaultText: React.PropTypes.string, + placeholder: React.PropTypes.string, mode: React.PropTypes.oneOf([Constants.MODE_DATE, Constants.MODE_DATETIME, Constants.MODE_TIME]), minDate: React.PropTypes.object, - maxDate: React.PropTypes.object + maxDate: React.PropTypes.object, + clearable: React.PropTypes.bool }, getDefaultProps: function() { return { - dateTime: moment().format('x'), + clearable: true, format: 'x', showToday: true, viewMode: 'days', daysOfWeekDisabled: [], mode: Constants.MODE_DATETIME, + placeholder: "Select a date", onChange: function (x) {} }; }, @@ -56,11 +60,14 @@ DateTimeField = React.createClass({ left: -9999, zIndex: '9999 !important' }, - viewDate: moment(this.props.dateTime, this.props.format, true).startOf("month"), - selectedDate: moment(this.props.dateTime, this.props.format, true), - inputValue: typeof this.props.defaultText != 'undefined' ? this.props.defaultText : moment(this.props.dateTime, this.props.format, true).format(this.resolvePropsInputFormat()) + viewDate: this.props.dateTime ? moment(this.props.dateTime, this.props.format, true).startOf("month") : moment().startOf("month"), + selectedDate: this.props.defaultValue ? moment(this.props.defaultValue, this.props.format, true) : null, + inputValue: typeof this.props.defaultValue != 'undefined' ? moment(this.props.defaultValue, this.props.format, true).format(this.resolvePropsInputFormat()) : null }; }, + getCurrentWorkingDate: function() { + return this.state.selectedDate ? this.state.selectedDate : this.state.viewDate; + }, componentWillReceiveProps: function(nextProps) { if(moment(nextProps.dateTime, nextProps.format, true).isValid()) { return this.setState({ @@ -75,7 +82,7 @@ DateTimeField = React.createClass({ if (moment(value, this.state.inputFormat, true).isValid()) { this.setState({ selectedDate: moment(value, this.state.inputFormat, true), - viewDate: moment(value, this.state.inputFormat, true).startOf("month") + viewDate: moment(value, this.state.inputFormat, true) }); } @@ -94,30 +101,30 @@ DateTimeField = React.createClass({ else if(target.className.includes("old")) month = this.state.viewDate.month() - 1; else month = this.state.viewDate.month(); return this.setState({ - selectedDate: this.state.viewDate.clone().month(month).date(parseInt(e.target.innerHTML)).hour(this.state.selectedDate.hours()).minute(this.state.selectedDate.minutes()) + selectedDate: this.state.viewDate.clone().month(month).date(parseInt(e.target.innerHTML)).hour(this.state.viewDate.hours()).minute(this.state.viewDate.minutes()) }, function() { this.closePicker(); - this.props.onChange(this.state.selectedDate.format(this.props.format)); + this.props.onChange(this.getCurrentWorkingDate().format(this.props.format)); return this.setState({ - inputValue: this.state.selectedDate.format(this.state.inputFormat) + inputValue: this.getCurrentWorkingDate().format(this.state.inputFormat) }); }); } }, setSelectedHour: function(e) { return this.setState({ - selectedDate: this.state.selectedDate.clone().hour(parseInt(e.target.innerHTML)).minute(this.state.selectedDate.minutes()) + selectedDate: this.getCurrentWorkingDate().clone().hour(parseInt(e.target.innerHTML)).minute(this.getCurrentWorkingDate().minutes()) }, function() { this.closePicker(); - this.props.onChange(this.state.selectedDate.format(this.props.format)); + this.props.onChange(this.getCurrentWorkingDate().format(this.props.format)); return this.setState({ - inputValue: this.state.selectedDate.format(this.state.inputFormat) + inputValue: this.getCurrentWorkingDate().format(this.state.inputFormat) }); }); }, setSelectedMinute: function(e) { return this.setState({ - selectedDate: this.state.selectedDate.clone().hour(this.state.selectedDate.hours()).minute(parseInt(e.target.innerHTML)) + selectedDate: this.getCurrentWorkingDate().clone().hour(this.state.viewDate.hours()).minute(parseInt(e.target.innerHTML)) }, function() { this.closePicker(); this.props.onChange(this.state.selectedDate.format(this.props.format)); @@ -138,21 +145,23 @@ DateTimeField = React.createClass({ }, addMinute: function() { return this.setState({ - selectedDate: this.state.selectedDate.clone().add(1, "minutes") + selectedDate: this.getCurrentWorkingDate().clone().add(1, "minutes") }, function() { - this.props.onChange(this.state.selectedDate.format(this.props.format)); + this.props.onChange(this.getCurrentWorkingDate().format(this.props.format)); return this.setState({ - inputValue: this.state.selectedDate.format(this.props.inputFormat) + inputValue: this.getCurrentWorkingDate().format(this.state.inputFormat), + viewDate: this.getCurrentWorkingDate() }); }); }, addHour: function() { return this.setState({ - selectedDate: this.state.selectedDate.clone().add(1, "hours") + selectedDate: this.getCurrentWorkingDate().clone().add(1, "hours") }, function() { - this.props.onChange(this.state.selectedDate.format(this.props.format)); + this.props.onChange(this.getCurrentWorkingDate().format(this.props.format)); return this.setState({ - inputValue: this.state.selectedDate.format(this.props.inputFormat) + inputValue: this.getCurrentWorkingDate().format(this.state.inputFormat), + viewDate: this.getCurrentWorkingDate() }); }); }, @@ -173,21 +182,23 @@ DateTimeField = React.createClass({ }, subtractMinute: function() { return this.setState({ - selectedDate: this.state.selectedDate.clone().subtract(1, "minutes") + selectedDate: this.getCurrentWorkingDate().clone().subtract(1, "minutes") }, function() { - this.props.onChange(this.state.selectedDate.format(this.props.format)); + this.props.onChange(this.getCurrentWorkingDate().format(this.props.format)); return this.setState({ - inputValue: this.state.selectedDate.format(this.props.inputFormat) + inputValue: this.getCurrentWorkingDate().format(this.state.inputFormat), + viewDate: this.getCurrentWorkingDate() }); }); }, subtractHour: function() { return this.setState({ - selectedDate: this.state.selectedDate.clone().subtract(1, "hours") + selectedDate: this.getCurrentWorkingDate().clone().subtract(1, "hours") }, function() { - this.props.onChange(this.state.selectedDate.format(this.props.format)); + this.props.onChange(this.getCurrentWorkingDate().format(this.props.format)); return this.setState({ - inputValue: this.state.selectedDate.format(this.props.inputFormat) + inputValue: this.getCurrentWorkingDate().format(this.state.inputFormat), + viewDate: this.getCurrentWorkingDate() }); }); }, @@ -207,10 +218,10 @@ DateTimeField = React.createClass({ }); }, togglePeriod: function() { - if (this.state.selectedDate.hour() > 12) { - return this.onChange(this.state.selectedDate.clone().subtract(12, 'hours').format(this.state.inputFormat)); + if (this.getCurrentWorkingDate().hour() > 12) { + return this.onChange(this.getCurrentWorkingDate().clone().subtract(12, 'hours').format(this.state.inputFormat)); } else { - return this.onChange(this.state.selectedDate.clone().add(12, 'hours').format(this.state.inputFormat)); + return this.onChange(this.getCurrentWorkingDate().clone().add(12, 'hours').format(this.state.inputFormat)); } }, togglePicker: function() { @@ -219,6 +230,12 @@ DateTimeField = React.createClass({ showTimePicker: !this.state.showTimePicker }); }, + clearDate: function() { + this.state.selectedDate = null; + this.state.inputValue = null; + this.state.viewDate = moment().startOf('month'); + this.forceUpdate(); + }, onClick: function() { var classes, gBCR, offset, placePosition, scrollTop, styles; if (this.state.showPicker) { @@ -290,7 +307,7 @@ DateTimeField = React.createClass({ } }, render: function() { - var inputClasses = React.addons.classSet({ + var inputClasses = classNames({ 'form-control': true, placeholder: this.props.defaultText === this.state.inputValue }); @@ -329,8 +346,15 @@ DateTimeField = React.createClass({ togglePeriod={this.togglePeriod} />
- - + + { + this.props.clearable && this.state.selectedDate ? + x : + null + } + + +
); diff --git a/src/DateTimePicker.jsx b/src/DateTimePicker.jsx index d0bc2a23..2f755c0b 100644 --- a/src/DateTimePicker.jsx +++ b/src/DateTimePicker.jsx @@ -1,6 +1,7 @@ var DateTimePicker, DateTimePickerDate, DateTimePickerTime, Glyphicon, React; React = require('react/addons'); +classNames = require('classnames'); DateTimePickerDate = require('./DateTimePickerDate'); @@ -17,7 +18,7 @@ DateTimePicker = React.createClass({ subtractMonth: React.PropTypes.func.isRequired, addMonth: React.PropTypes.func.isRequired, viewDate: React.PropTypes.object.isRequired, - selectedDate: React.PropTypes.object.isRequired, + selectedDate: React.PropTypes.object, showToday: React.PropTypes.bool, viewMode: React.PropTypes.oneOfType([ React.PropTypes.string, @@ -97,7 +98,7 @@ DateTimePicker = React.createClass({ }, render: function() { return ( -
+
    diff --git a/src/DateTimePickerDate.jsx b/src/DateTimePickerDate.jsx index c5e5d0cf..d46ebeec 100644 --- a/src/DateTimePickerDate.jsx +++ b/src/DateTimePickerDate.jsx @@ -13,7 +13,7 @@ DateTimePickerDate = React.createClass({ subtractMonth: React.PropTypes.func.isRequired, addMonth: React.PropTypes.func.isRequired, viewDate: React.PropTypes.object.isRequired, - selectedDate: React.PropTypes.object.isRequired, + selectedDate: React.PropTypes.object, showToday: React.PropTypes.bool, viewMode: React.PropTypes.oneOfType([ React.PropTypes.string, diff --git a/src/DateTimePickerDays.jsx b/src/DateTimePickerDays.jsx index 61ebb109..08498f78 100644 --- a/src/DateTimePickerDays.jsx +++ b/src/DateTimePickerDays.jsx @@ -1,6 +1,7 @@ var DateTimePickerDays, React, moment; React = require('react/addons'); +classNames = require('classnames'); moment = require('moment'); @@ -9,7 +10,7 @@ DateTimePickerDays = React.createClass({ subtractMonth: React.PropTypes.func.isRequired, addMonth: React.PropTypes.func.isRequired, viewDate: React.PropTypes.object.isRequired, - selectedDate: React.PropTypes.object.isRequired, + selectedDate: React.PropTypes.object, showToday: React.PropTypes.bool, daysOfWeekDisabled: React.PropTypes.array, setSelectedDate: React.PropTypes.func.isRequired, @@ -22,8 +23,12 @@ DateTimePickerDays = React.createClass({ showToday: true }; }, + getSelectedDate: function() { + return this.props.selectedDate ? this.props.selectedDate : this.props.viewDate; + }, renderDays: function() { - var cells, classes, days, html, i, month, nextMonth, prevMonth, minDate, maxDate, row, year, _i, _len, _ref; + var selectedDate, cells, classes, days, html, i, month, nextMonth, prevMonth, minDate, maxDate, row, year, _i, _len, _ref; + selectedDate = this.getSelectedDate(); year = this.props.viewDate.year(); month = this.props.viewDate.month(); prevMonth = this.props.viewDate.clone().subtract(1, "months"); @@ -43,10 +48,10 @@ DateTimePickerDays = React.createClass({ } else if (prevMonth.year() > year || (prevMonth.year() === year && prevMonth.month() > month)) { classes['new'] = true; } - if (prevMonth.isSame(moment({ - y: this.props.selectedDate.year(), - M: this.props.selectedDate.month(), - d: this.props.selectedDate.date() + if (this.props.selectedDate && prevMonth.isSame(moment({ + y: selectedDate.year(), + M: selectedDate.month(), + d: selectedDate.date() }))) { classes['active'] = true; } @@ -68,7 +73,7 @@ DateTimePickerDays = React.createClass({ } } } - cells.push({prevMonth.date()}); + cells.push({prevMonth.date()}); if (prevMonth.weekday() === moment().endOf('week').weekday()) { row = {cells}; html.push(row); diff --git a/src/DateTimePickerMonths.jsx b/src/DateTimePickerMonths.jsx index 354bf16a..a0005c7c 100644 --- a/src/DateTimePickerMonths.jsx +++ b/src/DateTimePickerMonths.jsx @@ -1,6 +1,7 @@ var DateTimePickerMonths, React, moment; React = require('react/addons'); +classNames = require('classnames'); moment = require('moment'); @@ -9,22 +10,25 @@ DateTimePickerMonths = React.createClass({ subtractYear: React.PropTypes.func.isRequired, addYear: React.PropTypes.func.isRequired, viewDate: React.PropTypes.object.isRequired, - selectedDate: React.PropTypes.object.isRequired, + selectedDate: React.PropTypes.object, showYears: React.PropTypes.func.isRequired, setViewMonth: React.PropTypes.func.isRequired }, + getSelectedDate() { + return this.props.selectedDate ? this.props.selectedDate : this.props.viewDate; + }, renderMonths: function() { var classes, i, month, months, monthsShort; - month = this.props.selectedDate.month(); + month = this.getSelectedDate().month(); monthsShort = moment.monthsShort(); i = 0; months = []; while (i < 12) { classes = { month: true, - 'active': i === month && this.props.viewDate.year() === this.props.selectedDate.year() + 'active': i === month && this.props.viewDate.year() === this.getSelectedDate().year() }; - months.push({monthsShort[i]}); + months.push({monthsShort[i]}); i++; } return months; diff --git a/src/DateTimePickerTime.jsx b/src/DateTimePickerTime.jsx index 172e804d..de3c2b15 100644 --- a/src/DateTimePickerTime.jsx +++ b/src/DateTimePickerTime.jsx @@ -19,7 +19,7 @@ DateTimePickerTime = React.createClass({ subtractMinute: React.PropTypes.func.isRequired, addMinute: React.PropTypes.func.isRequired, viewDate: React.PropTypes.object.isRequired, - selectedDate: React.PropTypes.object.isRequired, + selectedDate: React.PropTypes.object, togglePeriod: React.PropTypes.func.isRequired, mode: React.PropTypes.oneOf([Constants.MODE_DATE, Constants.MODE_DATETIME, Constants.MODE_TIME]) }, @@ -76,15 +76,15 @@ DateTimePickerTime = React.createClass({ - {this.props.selectedDate.format('h')} + {this.props.viewDate.format('h')} : - {this.props.selectedDate.format('mm')} + {this.props.viewDate.format('mm')} - + diff --git a/src/DateTimePickerYears.jsx b/src/DateTimePickerYears.jsx index 54ce7e6b..dd2a8b3a 100644 --- a/src/DateTimePickerYears.jsx +++ b/src/DateTimePickerYears.jsx @@ -1,13 +1,14 @@ var DateTimePickerYears, React; React = require('react/addons'); +classNames = require('classnames'); DateTimePickerYears = React.createClass({ propTypes: { subtractDecade: React.PropTypes.func.isRequired, addDecade: React.PropTypes.func.isRequired, viewDate: React.PropTypes.object.isRequired, - selectedDate: React.PropTypes.object.isRequired, + selectedDate: React.PropTypes.object, setViewYear: React.PropTypes.func.isRequired }, renderYears: function() { @@ -20,9 +21,9 @@ DateTimePickerYears = React.createClass({ classes = { year: true, old: i === -1 | i === 10, - active: this.props.selectedDate.year() === year + active: this.props.viewDate.year() === year }; - years.push({year}); + years.push({year}); year++; i++; } From eb9fa99f82741b1295c92888e7c737251ddbabe5 Mon Sep 17 00:00:00 2001 From: Alejandro Sellero Date: Tue, 26 May 2015 16:13:17 +0200 Subject: [PATCH 07/16] - Working version with clear link. - Added disabled state. --- css/bootstrap-datetimepicker.css | 7 + css/bootstrap-datetimepicker.min.css | 10 +- dist/react-bootstrap-datetimepicker.js | 241 ++++++++++++++------- dist/react-bootstrap-datetimepicker.min.js | 7 +- examples/basic/basic.jsx | 18 +- examples/bootstrap-datetimepicker.min.css | 7 + package.json | 2 +- src/DateTimeField.jsx | 41 ++-- src/DateTimePickerMonths.jsx | 2 +- src/DateTimePickerTime.jsx | 9 +- 10 files changed, 246 insertions(+), 98 deletions(-) diff --git a/css/bootstrap-datetimepicker.css b/css/bootstrap-datetimepicker.css index 05c1d8c9..b39865aa 100644 --- a/css/bootstrap-datetimepicker.css +++ b/css/bootstrap-datetimepicker.css @@ -191,6 +191,13 @@ width: 16px; height: 16px; } +.input-group.date span.input-group-clear { + cursor: pointer; + position: absolute; + z-index: 10; + right: 11%; + line-height: 32px; +} .bootstrap-datetimepicker-widget.left-oriented:before { left: auto; right: 6px; diff --git a/css/bootstrap-datetimepicker.min.css b/css/bootstrap-datetimepicker.min.css index c685f7bf..8f3be4b9 100644 --- a/css/bootstrap-datetimepicker.min.css +++ b/css/bootstrap-datetimepicker.min.css @@ -2,4 +2,12 @@ * Datetimepicker for Bootstrap v3 * https://github.com/Eonasdan/bootstrap-datetimepicker/ */ -.bootstrap-datetimepicker-widget{top:0;left:0;width:250px;padding:4px;margin-top:1px;z-index:99999!important;border-radius:4px}.bootstrap-datetimepicker-widget.timepicker-sbs{width:600px}.bootstrap-datetimepicker-widget.bottom:before{content:'';display:inline-block;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:7px solid #ccc;border-bottom-color:rgba(0,0,0,.2);position:absolute;top:-7px;left:7px}.bootstrap-datetimepicker-widget.bottom:after{content:'';display:inline-block;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid #fff;position:absolute;top:-6px;left:8px}.bootstrap-datetimepicker-widget.top:before{content:'';display:inline-block;border-left:7px solid transparent;border-right:7px solid transparent;border-top:7px solid #ccc;border-top-color:rgba(0,0,0,.2);position:absolute;bottom:-7px;left:6px}.bootstrap-datetimepicker-widget.top:after{content:'';display:inline-block;border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid #fff;position:absolute;bottom:-6px;left:7px}.bootstrap-datetimepicker-widget .dow{width:14.2857%}.bootstrap-datetimepicker-widget.pull-right:before{left:auto;right:6px}.bootstrap-datetimepicker-widget.pull-right:after{left:auto;right:7px}.bootstrap-datetimepicker-widget>ul{list-style-type:none;margin:0}.bootstrap-datetimepicker-widget .timepicker-hour,.bootstrap-datetimepicker-widget .timepicker-minute,.bootstrap-datetimepicker-widget .timepicker-second{width:100%;font-weight:bold;font-size:1.2em}.bootstrap-datetimepicker-widget table[data-hour-format="12"] .separator{width:4px;padding:0;margin:0}.bootstrap-datetimepicker-widget .datepicker>div{display:none}.bootstrap-datetimepicker-widget .picker-switch{text-align:center}.bootstrap-datetimepicker-widget table{width:100%;margin:0}.bootstrap-datetimepicker-widget td,.bootstrap-datetimepicker-widget th{text-align:center;width:20px;height:20px;border-radius:4px}.bootstrap-datetimepicker-widget td.day:hover,.bootstrap-datetimepicker-widget td.hour:hover,.bootstrap-datetimepicker-widget td.minute:hover,.bootstrap-datetimepicker-widget td.second:hover{background:#eee;cursor:pointer}.bootstrap-datetimepicker-widget td.old,.bootstrap-datetimepicker-widget td.new{color:#999}.bootstrap-datetimepicker-widget td.today{position:relative}.bootstrap-datetimepicker-widget td.today:before{content:'';display:inline-block;border-left:7px solid transparent;border-bottom:7px solid #428bca;border-top-color:rgba(0,0,0,.2);position:absolute;bottom:4px;right:4px}.bootstrap-datetimepicker-widget td.active,.bootstrap-datetimepicker-widget td.active:hover{background-color:#428bca;color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,.25)}.bootstrap-datetimepicker-widget td.active.today:before{border-bottom-color:#fff}.bootstrap-datetimepicker-widget td.disabled,.bootstrap-datetimepicker-widget td.disabled:hover{background:none;color:#999;cursor:not-allowed}.bootstrap-datetimepicker-widget td span{display:block;width:47px;height:54px;line-height:54px;float:left;margin:2px;cursor:pointer;border-radius:4px}.bootstrap-datetimepicker-widget td span:hover{background:#eee}.bootstrap-datetimepicker-widget td span.active{background-color:#428bca;color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,.25)}.bootstrap-datetimepicker-widget td span.old{color:#999}.bootstrap-datetimepicker-widget td span.disabled,.bootstrap-datetimepicker-widget td span.disabled:hover{background:none;color:#999;cursor:not-allowed}.bootstrap-datetimepicker-widget th.switch{width:145px}.bootstrap-datetimepicker-widget th.next,.bootstrap-datetimepicker-widget th.prev{font-size:21px}.bootstrap-datetimepicker-widget th.disabled,.bootstrap-datetimepicker-widget th.disabled:hover{background:none;color:#999;cursor:not-allowed}.bootstrap-datetimepicker-widget thead tr:first-child th{cursor:pointer}.bootstrap-datetimepicker-widget thead tr:first-child th:hover{background:#eee}.input-group.date .input-group-addon span{display:block;cursor:pointer;width:16px;height:16px}.bootstrap-datetimepicker-widget.left-oriented:before{left:auto;right:6px}.bootstrap-datetimepicker-widget.left-oriented:after{left:auto;right:7px}.bootstrap-datetimepicker-widget ul.list-unstyled li div.timepicker div.timepicker-picker table.table-condensed tbody>tr>td{padding:0!important} \ No newline at end of file +.bootstrap-datetimepicker-widget{top:0;left:0;width:250px;padding:4px;margin-top:1px;z-index:99999!important;border-radius:4px}.bootstrap-datetimepicker-widget.timepicker-sbs{width:600px}.bootstrap-datetimepicker-widget.bottom:before{content:'';display:inline-block;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:7px solid #ccc;border-bottom-color:rgba(0,0,0,.2);position:absolute;top:-7px;left:7px}.bootstrap-datetimepicker-widget.bottom:after{content:'';display:inline-block;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid #fff;position:absolute;top:-6px;left:8px}.bootstrap-datetimepicker-widget.top:before{content:'';display:inline-block;border-left:7px solid transparent;border-right:7px solid transparent;border-top:7px solid #ccc;border-top-color:rgba(0,0,0,.2);position:absolute;bottom:-7px;left:6px}.bootstrap-datetimepicker-widget.top:after{content:'';display:inline-block;border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid #fff;position:absolute;bottom:-6px;left:7px}.bootstrap-datetimepicker-widget .dow{width:14.2857%}.bootstrap-datetimepicker-widget.pull-right:before{left:auto;right:6px}.bootstrap-datetimepicker-widget.pull-right:after{left:auto;right:7px}.bootstrap-datetimepicker-widget>ul{list-style-type:none;margin:0}.bootstrap-datetimepicker-widget .timepicker-hour,.bootstrap-datetimepicker-widget .timepicker-minute,.bootstrap-datetimepicker-widget .timepicker-second{width:100%;font-weight:bold;font-size:1.2em}.bootstrap-datetimepicker-widget table[data-hour-format="12"] .separator{width:4px;padding:0;margin:0}.bootstrap-datetimepicker-widget .datepicker>div{display:none}.bootstrap-datetimepicker-widget .picker-switch{text-align:center}.bootstrap-datetimepicker-widget table{width:100%;margin:0}.bootstrap-datetimepicker-widget td,.bootstrap-datetimepicker-widget th{text-align:center;width:20px;height:20px;border-radius:4px}.bootstrap-datetimepicker-widget td.day:hover,.bootstrap-datetimepicker-widget td.hour:hover,.bootstrap-datetimepicker-widget td.minute:hover,.bootstrap-datetimepicker-widget td.second:hover{background:#eee;cursor:pointer}.bootstrap-datetimepicker-widget td.old,.bootstrap-datetimepicker-widget td.new{color:#999}.bootstrap-datetimepicker-widget td.today{position:relative}.bootstrap-datetimepicker-widget td.today:before{content:'';display:inline-block;border-left:7px solid transparent;border-bottom:7px solid #428bca;border-top-color:rgba(0,0,0,.2);position:absolute;bottom:4px;right:4px}.bootstrap-datetimepicker-widget td.active,.bootstrap-datetimepicker-widget td.active:hover{background-color:#428bca;color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,.25)}.bootstrap-datetimepicker-widget td.active.today:before{border-bottom-color:#fff}.bootstrap-datetimepicker-widget td.disabled,.bootstrap-datetimepicker-widget td.disabled:hover{background:none;color:#999;cursor:not-allowed}.bootstrap-datetimepicker-widget td span{display:block;width:47px;height:54px;line-height:54px;float:left;margin:2px;cursor:pointer;border-radius:4px}.bootstrap-datetimepicker-widget td span:hover{background:#eee}.bootstrap-datetimepicker-widget td span.active{background-color:#428bca;color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,.25)}.bootstrap-datetimepicker-widget td span.old{color:#999}.bootstrap-datetimepicker-widget td span.disabled,.bootstrap-datetimepicker-widget td span.disabled:hover{background:none;color:#999;cursor:not-allowed}.bootstrap-datetimepicker-widget th.switch{width:145px}.bootstrap-datetimepicker-widget th.next,.bootstrap-datetimepicker-widget th.prev{font-size:21px}.bootstrap-datetimepicker-widget th.disabled,.bootstrap-datetimepicker-widget th.disabled:hover{background:none;color:#999;cursor:not-allowed}.bootstrap-datetimepicker-widget thead tr:first-child th{cursor:pointer}.bootstrap-datetimepicker-widget thead tr:first-child th:hover{background:#eee}.input-group.date .input-group-addon span{display:block;cursor:pointer;width:16px;height:16px}.bootstrap-datetimepicker-widget.left-oriented:before{left:auto;right:6px}.bootstrap-datetimepicker-widget.left-oriented:after{left:auto;right:7px}.bootstrap-datetimepicker-widget ul.list-unstyled li div.timepicker div.timepicker-picker table.table-condensed tbody>tr>td{padding:0!important} + +.input-group.date span.input-group-clear { + position: absolute; + z-index: 10; + right: 11%; + line-height: 32px; + cursor: pointer; +} \ No newline at end of file diff --git a/dist/react-bootstrap-datetimepicker.js b/dist/react-bootstrap-datetimepicker.js index 5a95891c..8a5da3bc 100644 --- a/dist/react-bootstrap-datetimepicker.js +++ b/dist/react-bootstrap-datetimepicker.js @@ -64,6 +64,7 @@ return /******/ (function(modules) { // webpackBootstrap var DateTimeField, DateTimePicker, Glyphicon, React, moment; React = __webpack_require__(2); + classNames = __webpack_require__(7); DateTimePicker = __webpack_require__(5); @@ -76,29 +77,35 @@ return /******/ (function(modules) { // webpackBootstrap DateTimeField = React.createClass({displayName: "DateTimeField", propTypes: { dateTime: React.PropTypes.string, + value: React.PropTypes.string, onChange: React.PropTypes.func, format: React.PropTypes.string, inputProps: React.PropTypes.object, inputFormat: React.PropTypes.string, - defaultText: React.PropTypes.string, + placeholder: React.PropTypes.string, mode: React.PropTypes.oneOf([Constants.MODE_DATE, Constants.MODE_DATETIME, Constants.MODE_TIME]), minDate: React.PropTypes.object, - maxDate: React.PropTypes.object + maxDate: React.PropTypes.object, + clearable: React.PropTypes.bool, + disabled: React.PropTypes.bool }, getDefaultProps: function() { return { - dateTime: moment().format('x'), + disabled: false, + clearable: false, format: 'x', showToday: true, viewMode: 'days', daysOfWeekDisabled: [], mode: Constants.MODE_DATETIME, + placeholder: "Select a date", onChange: function (x) {} }; }, - resolvePropsInputFormat: function() { - if(this.props.inputFormat) return this.props.inputFormat; - switch(this.props.mode) { + resolvePropsInputFormat: function(props) { + props = props ? props : this.props; + if(props.inputFormat) return props.inputFormat; + switch(props.mode) { case Constants.MODE_TIME: return "h:mm A"; case Constants.MODE_DATE: @@ -119,17 +126,20 @@ return /******/ (function(modules) { // webpackBootstrap left: -9999, zIndex: '9999 !important' }, - viewDate: moment(this.props.dateTime, this.props.format, true).startOf("month"), - selectedDate: moment(this.props.dateTime, this.props.format, true), - inputValue: typeof this.props.defaultText != 'undefined' ? this.props.defaultText : moment(this.props.dateTime, this.props.format, true).format(this.resolvePropsInputFormat()) + viewDate: this.props.dateTime ? moment(this.props.dateTime, this.props.format, true).startOf("month") : moment().startOf("month"), + selectedDate: this.props.value ? moment(this.props.value, this.props.format, true) : null, + inputValue: typeof this.props.value != 'undefined' ? moment(this.props.value, this.props.format, true).format(this.resolvePropsInputFormat()) : null }; }, + getCurrentWorkingDate: function() { + return this.state.selectedDate ? this.state.selectedDate : this.state.viewDate; + }, componentWillReceiveProps: function(nextProps) { - if(moment(nextProps.dateTime, nextProps.format, true).isValid()) { + if(this.props.value !== nextProps.value) { return this.setState({ - viewDate: moment(nextProps.dateTime, nextProps.format, true).startOf("month"), - selectedDate: moment(nextProps.dateTime, nextProps.format, true), - inputValue: moment(nextProps.dateTime, nextProps.format, true).format(nextProps.inputFormat) + viewDate: nextProps.dateTime ? moment(nextProps.dateTime, nextProps.format, true).startOf("month") : moment().startOf("month"), + selectedDate: nextProps.value ? moment(nextProps.value, nextProps.format, true) : null, + inputValue: typeof nextProps.value != 'undefined' ? moment(nextProps.value, nextProps.format, true).format(this.resolvePropsInputFormat(nextProps)) : null }); } }, @@ -138,14 +148,14 @@ return /******/ (function(modules) { // webpackBootstrap if (moment(value, this.state.inputFormat, true).isValid()) { this.setState({ selectedDate: moment(value, this.state.inputFormat, true), - viewDate: moment(value, this.state.inputFormat, true).startOf("month") + viewDate: moment(value, this.state.inputFormat, true) }); } return this.setState({ inputValue: value }, function() { - return this.props.onChange(moment(this.state.inputValue, this.state.inputFormat, true).format(this.props.format)); + return props.onChange(moment(this.state.inputValue, this.state.inputFormat, true).format(this.props.format)); }); }, @@ -157,30 +167,30 @@ return /******/ (function(modules) { // webpackBootstrap else if(target.className.includes("old")) month = this.state.viewDate.month() - 1; else month = this.state.viewDate.month(); return this.setState({ - selectedDate: this.state.viewDate.clone().month(month).date(parseInt(e.target.innerHTML)).hour(this.state.selectedDate.hours()).minute(this.state.selectedDate.minutes()) + selectedDate: this.state.viewDate.clone().month(month).date(parseInt(e.target.innerHTML)).hour(this.state.viewDate.hours()).minute(this.state.viewDate.minutes()) }, function() { this.closePicker(); - this.props.onChange(this.state.selectedDate.format(this.props.format)); + this.props.onChange(this.getCurrentWorkingDate().format(this.props.format)); return this.setState({ - inputValue: this.state.selectedDate.format(this.state.inputFormat) + inputValue: this.getCurrentWorkingDate().format(this.state.inputFormat) }); }); } }, setSelectedHour: function(e) { return this.setState({ - selectedDate: this.state.selectedDate.clone().hour(parseInt(e.target.innerHTML)).minute(this.state.selectedDate.minutes()) + selectedDate: this.getCurrentWorkingDate().clone().hour(parseInt(e.target.innerHTML)).minute(this.getCurrentWorkingDate().minutes()) }, function() { this.closePicker(); - this.props.onChange(this.state.selectedDate.format(this.props.format)); + this.props.onChange(this.getCurrentWorkingDate().format(this.props.format)); return this.setState({ - inputValue: this.state.selectedDate.format(this.state.inputFormat) + inputValue: this.getCurrentWorkingDate().format(this.state.inputFormat) }); }); }, setSelectedMinute: function(e) { return this.setState({ - selectedDate: this.state.selectedDate.clone().hour(this.state.selectedDate.hours()).minute(parseInt(e.target.innerHTML)) + selectedDate: this.getCurrentWorkingDate().clone().hour(this.state.viewDate.hours()).minute(parseInt(e.target.innerHTML)) }, function() { this.closePicker(); this.props.onChange(this.state.selectedDate.format(this.props.format)); @@ -201,21 +211,23 @@ return /******/ (function(modules) { // webpackBootstrap }, addMinute: function() { return this.setState({ - selectedDate: this.state.selectedDate.clone().add(1, "minutes") + selectedDate: this.getCurrentWorkingDate().clone().add(1, "minutes") }, function() { - this.props.onChange(this.state.selectedDate.format(this.props.format)); + this.props.onChange(this.getCurrentWorkingDate().format(this.props.format)); return this.setState({ - inputValue: this.state.selectedDate.format(this.props.inputFormat) + inputValue: this.getCurrentWorkingDate().format(this.state.inputFormat), + viewDate: this.getCurrentWorkingDate() }); }); }, addHour: function() { return this.setState({ - selectedDate: this.state.selectedDate.clone().add(1, "hours") + selectedDate: this.getCurrentWorkingDate().clone().add(1, "hours") }, function() { - this.props.onChange(this.state.selectedDate.format(this.props.format)); + this.props.onChange(this.getCurrentWorkingDate().format(this.props.format)); return this.setState({ - inputValue: this.state.selectedDate.format(this.props.inputFormat) + inputValue: this.getCurrentWorkingDate().format(this.state.inputFormat), + viewDate: this.getCurrentWorkingDate() }); }); }, @@ -236,21 +248,23 @@ return /******/ (function(modules) { // webpackBootstrap }, subtractMinute: function() { return this.setState({ - selectedDate: this.state.selectedDate.clone().subtract(1, "minutes") + selectedDate: this.getCurrentWorkingDate().clone().subtract(1, "minutes") }, function() { - this.props.onChange(this.state.selectedDate.format(this.props.format)); + this.props.onChange(this.getCurrentWorkingDate().format(this.props.format)); return this.setState({ - inputValue: this.state.selectedDate.format(this.props.inputFormat) + inputValue: this.getCurrentWorkingDate().format(this.state.inputFormat), + viewDate: this.getCurrentWorkingDate() }); }); }, subtractHour: function() { return this.setState({ - selectedDate: this.state.selectedDate.clone().subtract(1, "hours") + selectedDate: this.getCurrentWorkingDate().clone().subtract(1, "hours") }, function() { - this.props.onChange(this.state.selectedDate.format(this.props.format)); + this.props.onChange(this.getCurrentWorkingDate().format(this.props.format)); return this.setState({ - inputValue: this.state.selectedDate.format(this.props.inputFormat) + inputValue: this.getCurrentWorkingDate().format(this.state.inputFormat), + viewDate: this.getCurrentWorkingDate() }); }); }, @@ -270,10 +284,10 @@ return /******/ (function(modules) { // webpackBootstrap }); }, togglePeriod: function() { - if (this.state.selectedDate.hour() > 12) { - return this.onChange(this.state.selectedDate.clone().subtract(12, 'hours').format(this.state.inputFormat)); + if (this.getCurrentWorkingDate().hour() > 12) { + return this.onChange(this.getCurrentWorkingDate().clone().subtract(12, 'hours').format(this.state.inputFormat)); } else { - return this.onChange(this.state.selectedDate.clone().add(12, 'hours').format(this.state.inputFormat)); + return this.onChange(this.getCurrentWorkingDate().clone().add(12, 'hours').format(this.state.inputFormat)); } }, togglePicker: function() { @@ -282,7 +296,16 @@ return /******/ (function(modules) { // webpackBootstrap showTimePicker: !this.state.showTimePicker }); }, + clearDate: function() { + this.state.selectedDate = null; + this.state.inputValue = null; + this.state.viewDate = moment().startOf('month'); + this.forceUpdate(function() { + this.props.onChange(null); + }); + }, onClick: function() { + if(this.props.disabled) return; var classes, gBCR, offset, placePosition, scrollTop, styles; if (this.state.showPicker) { return this.closePicker(); @@ -353,6 +376,10 @@ return /******/ (function(modules) { // webpackBootstrap } }, render: function() { + var inputClasses = classNames({ + 'form-control': true, + placeholder: this.props.defaultText === this.state.inputValue + }); return ( React.createElement("div", null, this.renderOverlay(), @@ -388,8 +415,16 @@ return /******/ (function(modules) { // webpackBootstrap togglePeriod: this.togglePeriod} ), React.createElement("div", {className: "input-group date", ref: "datetimepicker"}, - React.createElement("input", React.__spread({type: "text", className: "form-control", onChange: this.onChange, value: this.state.inputValue}, this.props.inputProps)), - React.createElement("span", {className: "input-group-addon", onClick: this.onClick, onBlur: this.onBlur, ref: "dtpbutton"}, React.createElement(Glyphicon, {glyph: this.state.buttonIcon})) + React.createElement("input", React.__spread({type: "text", className: inputClasses, onChange: this.onChange, onFocus: this.onClick, disabled: this.props.disabled, + value: this.state.inputValue, placeholder: this.props.placeholder}, this.props.inputProps)), + + this.props.clearable && this.state.selectedDate && !this.props.disabled ? + React.createElement("span", {className: "input-group-clear", onClick: this.clearDate}, "×") : + null, + + React.createElement("span", {className: "input-group-addon", onClick: this.onClick, onBlur: this.onBlur, ref: "dtpbutton", disabled: this.props.disabled}, + React.createElement(Glyphicon, {glyph: this.state.buttonIcon}) + ) ) ) ); @@ -424,10 +459,11 @@ return /******/ (function(modules) { // webpackBootstrap var DateTimePicker, DateTimePickerDate, DateTimePickerTime, Glyphicon, React; React = __webpack_require__(2); + classNames = __webpack_require__(7); - DateTimePickerDate = __webpack_require__(7); + DateTimePickerDate = __webpack_require__(8); - DateTimePickerTime = __webpack_require__(8); + DateTimePickerTime = __webpack_require__(9); Glyphicon = __webpack_require__(4).Glyphicon; @@ -440,7 +476,7 @@ return /******/ (function(modules) { // webpackBootstrap subtractMonth: React.PropTypes.func.isRequired, addMonth: React.PropTypes.func.isRequired, viewDate: React.PropTypes.object.isRequired, - selectedDate: React.PropTypes.object.isRequired, + selectedDate: React.PropTypes.object, showToday: React.PropTypes.bool, viewMode: React.PropTypes.oneOfType([ React.PropTypes.string, @@ -520,7 +556,7 @@ return /******/ (function(modules) { // webpackBootstrap }, render: function() { return ( - React.createElement("div", {className: React.addons.classSet(this.props.widgetClasses), style: this.props.widgetStyle}, + React.createElement("div", {className: classNames(this.props.widgetClasses), style: this.props.widgetStyle}, React.createElement("ul", {className: "list-unstyled"}, @@ -553,24 +589,73 @@ return /******/ (function(modules) { // webpackBootstrap /***/ }, /* 7 */ +/***/ function(module, exports, __webpack_require__) { + + var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/*! + Copyright (c) 2015 Jed Watson. + Licensed under the MIT License (MIT), see + http://jedwatson.github.io/classnames + */ + + function classNames() { + var classes = ''; + var arg; + + for (var i = 0; i < arguments.length; i++) { + arg = arguments[i]; + if (!arg) { + continue; + } + + if ('string' === typeof arg || 'number' === typeof arg) { + classes += ' ' + arg; + } else if (Object.prototype.toString.call(arg) === '[object Array]') { + classes += ' ' + classNames.apply(null, arg); + } else if ('object' === typeof arg) { + for (var key in arg) { + if (!arg.hasOwnProperty(key) || !arg[key]) { + continue; + } + classes += ' ' + key; + } + } + } + return classes.substr(1); + } + + // safely export classNames for node / browserify + if (typeof module !== 'undefined' && module.exports) { + module.exports = classNames; + } + + // safely export classNames for RequireJS + if (true) { + !(__WEBPACK_AMD_DEFINE_ARRAY__ = [], __WEBPACK_AMD_DEFINE_RESULT__ = function() { + return classNames; + }.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); + } + + +/***/ }, +/* 8 */ /***/ function(module, exports, __webpack_require__) { var DateTimePickerDate, DateTimePickerDays, DateTimePickerMonths, DateTimePickerYears, React; React = __webpack_require__(2); - DateTimePickerDays = __webpack_require__(9); + DateTimePickerDays = __webpack_require__(10); - DateTimePickerMonths = __webpack_require__(10); + DateTimePickerMonths = __webpack_require__(11); - DateTimePickerYears = __webpack_require__(11); + DateTimePickerYears = __webpack_require__(12); DateTimePickerDate = React.createClass({displayName: "DateTimePickerDate", propTypes: { subtractMonth: React.PropTypes.func.isRequired, addMonth: React.PropTypes.func.isRequired, viewDate: React.PropTypes.object.isRequired, - selectedDate: React.PropTypes.object.isRequired, + selectedDate: React.PropTypes.object, showToday: React.PropTypes.bool, viewMode: React.PropTypes.oneOfType([ React.PropTypes.string, @@ -701,16 +786,16 @@ return /******/ (function(modules) { // webpackBootstrap /***/ }, -/* 8 */ +/* 9 */ /***/ function(module, exports, __webpack_require__) { var DateTimePickerHours, DateTimePickerMinutes, DateTimePickerTime, Glyphicon, React; React = __webpack_require__(2); - DateTimePickerMinutes = __webpack_require__(12); + DateTimePickerMinutes = __webpack_require__(13); - DateTimePickerHours = __webpack_require__(13); + DateTimePickerHours = __webpack_require__(14); Glyphicon = __webpack_require__(4).Glyphicon; @@ -725,7 +810,7 @@ return /******/ (function(modules) { // webpackBootstrap subtractMinute: React.PropTypes.func.isRequired, addMinute: React.PropTypes.func.isRequired, viewDate: React.PropTypes.object.isRequired, - selectedDate: React.PropTypes.object.isRequired, + selectedDate: React.PropTypes.object, togglePeriod: React.PropTypes.func.isRequired, mode: React.PropTypes.oneOf([Constants.MODE_DATE, Constants.MODE_DATETIME, Constants.MODE_TIME]) }, @@ -782,15 +867,15 @@ return /******/ (function(modules) { // webpackBootstrap ), React.createElement("tr", null, - React.createElement("td", null, React.createElement("span", {className: "timepicker-hour", onClick: this.showHours}, this.props.selectedDate.format('h'))), + React.createElement("td", null, React.createElement("span", {className: "timepicker-hour", onClick: this.showHours}, this.props.viewDate.format('h'))), React.createElement("td", {className: "separator"}, ":"), - React.createElement("td", null, React.createElement("span", {className: "timepicker-minute", onClick: this.showMinutes}, this.props.selectedDate.format('mm'))), + React.createElement("td", null, React.createElement("span", {className: "timepicker-minute", onClick: this.showMinutes}, this.props.viewDate.format('mm'))), React.createElement("td", {className: "separator"}), - React.createElement("td", null, React.createElement("button", {className: "btn btn-primary", onClick: this.props.togglePeriod, type: "button"}, this.props.selectedDate.format('A'))) + React.createElement("td", null, React.createElement("button", {className: "btn btn-primary", onClick: this.props.togglePeriod, type: "button"}, this.props.viewDate.format('A'))) ), React.createElement("tr", null, @@ -827,12 +912,13 @@ return /******/ (function(modules) { // webpackBootstrap /***/ }, -/* 9 */ +/* 10 */ /***/ function(module, exports, __webpack_require__) { var DateTimePickerDays, React, moment; React = __webpack_require__(2); + classNames = __webpack_require__(7); moment = __webpack_require__(3); @@ -841,7 +927,7 @@ return /******/ (function(modules) { // webpackBootstrap subtractMonth: React.PropTypes.func.isRequired, addMonth: React.PropTypes.func.isRequired, viewDate: React.PropTypes.object.isRequired, - selectedDate: React.PropTypes.object.isRequired, + selectedDate: React.PropTypes.object, showToday: React.PropTypes.bool, daysOfWeekDisabled: React.PropTypes.array, setSelectedDate: React.PropTypes.func.isRequired, @@ -854,8 +940,12 @@ return /******/ (function(modules) { // webpackBootstrap showToday: true }; }, + getSelectedDate: function() { + return this.props.selectedDate ? this.props.selectedDate : this.props.viewDate; + }, renderDays: function() { - var cells, classes, days, html, i, month, nextMonth, prevMonth, minDate, maxDate, row, year, _i, _len, _ref; + var selectedDate, cells, classes, days, html, i, month, nextMonth, prevMonth, minDate, maxDate, row, year, _i, _len, _ref; + selectedDate = this.getSelectedDate(); year = this.props.viewDate.year(); month = this.props.viewDate.month(); prevMonth = this.props.viewDate.clone().subtract(1, "months"); @@ -875,10 +965,10 @@ return /******/ (function(modules) { // webpackBootstrap } else if (prevMonth.year() > year || (prevMonth.year() === year && prevMonth.month() > month)) { classes['new'] = true; } - if (prevMonth.isSame(moment({ - y: this.props.selectedDate.year(), - M: this.props.selectedDate.month(), - d: this.props.selectedDate.date() + if (this.props.selectedDate && prevMonth.isSame(moment({ + y: selectedDate.year(), + M: selectedDate.month(), + d: selectedDate.date() }))) { classes['active'] = true; } @@ -900,7 +990,7 @@ return /******/ (function(modules) { // webpackBootstrap } } } - cells.push(React.createElement("td", {key: prevMonth.month() + '-' + prevMonth.date(), className: React.addons.classSet(classes), onClick: this.props.setSelectedDate}, prevMonth.date())); + cells.push(React.createElement("td", {key: prevMonth.month() + '-' + prevMonth.date(), className: classNames(classes), onClick: this.props.setSelectedDate}, prevMonth.date())); if (prevMonth.weekday() === moment().endOf('week').weekday()) { row = React.createElement("tr", {key: prevMonth.month() + '-' + prevMonth.date()}, cells); html.push(row); @@ -953,12 +1043,13 @@ return /******/ (function(modules) { // webpackBootstrap /***/ }, -/* 10 */ +/* 11 */ /***/ function(module, exports, __webpack_require__) { var DateTimePickerMonths, React, moment; React = __webpack_require__(2); + classNames = __webpack_require__(7); moment = __webpack_require__(3); @@ -967,22 +1058,25 @@ return /******/ (function(modules) { // webpackBootstrap subtractYear: React.PropTypes.func.isRequired, addYear: React.PropTypes.func.isRequired, viewDate: React.PropTypes.object.isRequired, - selectedDate: React.PropTypes.object.isRequired, + selectedDate: React.PropTypes.object, showYears: React.PropTypes.func.isRequired, setViewMonth: React.PropTypes.func.isRequired }, + getSelectedDate: function() { + return this.props.selectedDate ? this.props.selectedDate : this.props.viewDate; + }, renderMonths: function() { var classes, i, month, months, monthsShort; - month = this.props.selectedDate.month(); + month = this.getSelectedDate().month(); monthsShort = moment.monthsShort(); i = 0; months = []; while (i < 12) { classes = { month: true, - 'active': i === month && this.props.viewDate.year() === this.props.selectedDate.year() + 'active': i === month && this.props.viewDate.year() === this.getSelectedDate().year() }; - months.push(React.createElement("span", {key: i, className: React.addons.classSet(classes), onClick: this.props.setViewMonth}, monthsShort[i])); + months.push(React.createElement("span", {key: i, className: classNames(classes), onClick: this.props.setViewMonth}, monthsShort[i])); i++; } return months; @@ -1016,19 +1110,20 @@ return /******/ (function(modules) { // webpackBootstrap /***/ }, -/* 11 */ +/* 12 */ /***/ function(module, exports, __webpack_require__) { var DateTimePickerYears, React; React = __webpack_require__(2); + classNames = __webpack_require__(7); DateTimePickerYears = React.createClass({displayName: "DateTimePickerYears", propTypes: { subtractDecade: React.PropTypes.func.isRequired, addDecade: React.PropTypes.func.isRequired, viewDate: React.PropTypes.object.isRequired, - selectedDate: React.PropTypes.object.isRequired, + selectedDate: React.PropTypes.object, setViewYear: React.PropTypes.func.isRequired }, renderYears: function() { @@ -1041,9 +1136,9 @@ return /******/ (function(modules) { // webpackBootstrap classes = { year: true, old: i === -1 | i === 10, - active: this.props.selectedDate.year() === year + active: this.props.viewDate.year() === year }; - years.push(React.createElement("span", {key: year, className: React.addons.classSet(classes), onClick: this.props.setViewYear}, year)); + years.push(React.createElement("span", {key: year, className: classNames(classes), onClick: this.props.setViewYear}, year)); year++; i++; } @@ -1080,7 +1175,7 @@ return /******/ (function(modules) { // webpackBootstrap /***/ }, -/* 12 */ +/* 13 */ /***/ function(module, exports, __webpack_require__) { var DateTimePickerMinutes, React; @@ -1150,7 +1245,7 @@ return /******/ (function(modules) { // webpackBootstrap /***/ }, -/* 13 */ +/* 14 */ /***/ function(module, exports, __webpack_require__) { var DateTimePickerHours, React; diff --git a/dist/react-bootstrap-datetimepicker.min.js b/dist/react-bootstrap-datetimepicker.min.js index fa41d0a4..aa9af1b2 100644 --- a/dist/react-bootstrap-datetimepicker.min.js +++ b/dist/react-bootstrap-datetimepicker.min.js @@ -1 +1,6 @@ -!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("React"),require("moment"),require("ReactBootstrap")):"function"==typeof define&&define.amd?define(["React","moment","ReactBootstrap"],t):"object"==typeof exports?exports.ReactBootstrapDatetimepicker=t(require("React"),require("moment"),require("ReactBootstrap")):e.ReactBootstrapDatetimepicker=t(e.React,e.moment,e.ReactBootstrap)}(this,function(e,t,s){return function(e){function t(a){if(s[a])return s[a].exports;var r=s[a]={exports:{},id:a,loaded:!1};return e[a].call(r.exports,r,r.exports,t),r.loaded=!0,r.exports}var s={};return t.m=e,t.c=s,t.p="",t(0)}([function(e,t,s){e.exports=s(1)},function(e,t,s){var a,r,i,o,n;o=s(2),r=s(5),n=s(3),i=s(4).Glyphicon,Constants=s(6),a=o.createClass({displayName:"DateTimeField",propTypes:{dateTime:o.PropTypes.string,onChange:o.PropTypes.func,format:o.PropTypes.string,inputProps:o.PropTypes.object,inputFormat:o.PropTypes.string,defaultText:o.PropTypes.string,mode:o.PropTypes.oneOf([Constants.MODE_DATE,Constants.MODE_DATETIME,Constants.MODE_TIME]),minDate:o.PropTypes.object,maxDate:o.PropTypes.object},getDefaultProps:function(){return{dateTime:n().format("x"),format:"x",showToday:!0,viewMode:"days",daysOfWeekDisabled:[],mode:Constants.MODE_DATETIME,onChange:function(e){}}},resolvePropsInputFormat:function(){if(this.props.inputFormat)return this.props.inputFormat;switch(this.props.mode){case Constants.MODE_TIME:return"h:mm A";case Constants.MODE_DATE:return"MM/DD/YY";default:return"MM/DD/YY h:mm A"}},getInitialState:function(){return{showDatePicker:this.props.mode!==Constants.MODE_TIME,showTimePicker:this.props.mode===Constants.MODE_TIME,inputFormat:this.resolvePropsInputFormat(),buttonIcon:this.props.mode===Constants.MODE_TIME?"time":"calendar",widgetStyle:{display:"block",position:"absolute",left:-9999,zIndex:"9999 !important"},viewDate:n(this.props.dateTime,this.props.format,!0).startOf("month"),selectedDate:n(this.props.dateTime,this.props.format,!0),inputValue:"undefined"!=typeof this.props.defaultText?this.props.defaultText:n(this.props.dateTime,this.props.format,!0).format(this.resolvePropsInputFormat())}},componentWillReceiveProps:function(e){return n(e.dateTime,e.format,!0).isValid()?this.setState({viewDate:n(e.dateTime,e.format,!0).startOf("month"),selectedDate:n(e.dateTime,e.format,!0),inputValue:n(e.dateTime,e.format,!0).format(e.inputFormat)}):void 0},onChange:function(e){var t=null==e.target?e:e.target.value;return n(t,this.state.inputFormat,!0).isValid()&&this.setState({selectedDate:n(t,this.state.inputFormat,!0),viewDate:n(t,this.state.inputFormat,!0).startOf("month")}),this.setState({inputValue:t},function(){return this.props.onChange(n(this.state.inputValue,this.state.inputFormat,!0).format(this.props.format))})},setSelectedDate:function(e){var t=e.target;if(t.className&&!t.className.match(/disabled/g)){var s;return s=t.className.includes("new")?this.state.viewDate.month()+1:t.className.includes("old")?this.state.viewDate.month()-1:this.state.viewDate.month(),this.setState({selectedDate:this.state.viewDate.clone().month(s).date(parseInt(e.target.innerHTML)).hour(this.state.selectedDate.hours()).minute(this.state.selectedDate.minutes())},function(){return this.closePicker(),this.props.onChange(this.state.selectedDate.format(this.props.format)),this.setState({inputValue:this.state.selectedDate.format(this.state.inputFormat)})})}},setSelectedHour:function(e){return this.setState({selectedDate:this.state.selectedDate.clone().hour(parseInt(e.target.innerHTML)).minute(this.state.selectedDate.minutes())},function(){return this.closePicker(),this.props.onChange(this.state.selectedDate.format(this.props.format)),this.setState({inputValue:this.state.selectedDate.format(this.state.inputFormat)})})},setSelectedMinute:function(e){return this.setState({selectedDate:this.state.selectedDate.clone().hour(this.state.selectedDate.hours()).minute(parseInt(e.target.innerHTML))},function(){return this.closePicker(),this.props.onChange(this.state.selectedDate.format(this.props.format)),this.setState({inputValue:this.state.selectedDate.format(this.state.inputFormat)})})},setViewMonth:function(e){return this.setState({viewDate:this.state.viewDate.clone().month(e)})},setViewYear:function(e){return this.setState({viewDate:this.state.viewDate.clone().year(e)})},addMinute:function(){return this.setState({selectedDate:this.state.selectedDate.clone().add(1,"minutes")},function(){return this.props.onChange(this.state.selectedDate.format(this.props.format)),this.setState({inputValue:this.state.selectedDate.format(this.props.inputFormat)})})},addHour:function(){return this.setState({selectedDate:this.state.selectedDate.clone().add(1,"hours")},function(){return this.props.onChange(this.state.selectedDate.format(this.props.format)),this.setState({inputValue:this.state.selectedDate.format(this.props.inputFormat)})})},addMonth:function(){return this.setState({viewDate:this.state.viewDate.add(1,"months")})},addYear:function(){return this.setState({viewDate:this.state.viewDate.add(1,"years")})},addDecade:function(){return this.setState({viewDate:this.state.viewDate.add(10,"years")})},subtractMinute:function(){return this.setState({selectedDate:this.state.selectedDate.clone().subtract(1,"minutes")},function(){return this.props.onChange(this.state.selectedDate.format(this.props.format)),this.setState({inputValue:this.state.selectedDate.format(this.props.inputFormat)})})},subtractHour:function(){return this.setState({selectedDate:this.state.selectedDate.clone().subtract(1,"hours")},function(){return this.props.onChange(this.state.selectedDate.format(this.props.format)),this.setState({inputValue:this.state.selectedDate.format(this.props.inputFormat)})})},subtractMonth:function(){return this.setState({viewDate:this.state.viewDate.subtract(1,"months")})},subtractYear:function(){return this.setState({viewDate:this.state.viewDate.subtract(1,"years")})},subtractDecade:function(){return this.setState({viewDate:this.state.viewDate.subtract(10,"years")})},togglePeriod:function(){return this.onChange(this.state.selectedDate.hour()>12?this.state.selectedDate.clone().subtract(12,"hours").format(this.state.inputFormat):this.state.selectedDate.clone().add(12,"hours").format(this.state.inputFormat))},togglePicker:function(){return this.setState({showDatePicker:!this.state.showDatePicker,showTimePicker:!this.state.showTimePicker})},onClick:function(){var e,t,s,a,r,i;return this.state.showPicker?this.closePicker():(this.setState({showPicker:!0}),t=this.refs.dtpbutton.getDOMNode().getBoundingClientRect(),e={"bootstrap-datetimepicker-widget":!0,"dropdown-menu":!0},s={top:t.top+window.pageYOffset-document.documentElement.clientTop,left:t.left+window.pageXOffset-document.documentElement.clientLeft},s.top=s.top+this.refs.datetimepicker.getDOMNode().offsetHeight,r=void 0!==window.pageYOffset?window.pageYOffset:(document.documentElement||document.body.parentNode||document.body).scrollTop,a="up"===this.props.direction?"top":"bottom"===this.props.direction?"bottom":"auto"===this.props.direction?s.top+this.refs.widget.getDOMNode().offsetHeight>window.offsetHeight+r&&this.refs.widget.offsetHeight+this.refs.datetimepicker.getDOMNode().offsetHeight>s.top?"top":"bottom":void 0,"top"===a?(s.top=-this.refs.widget.getDOMNode().offsetHeight-this.getDOMNode().clientHeight-2,e.top=!0,e.bottom=!1,e["pull-right"]=!0):(s.top=40,e.top=!1,e.bottom=!0,e["pull-right"]=!0),i={display:"block",position:"absolute",top:s.top,left:"auto",right:40},this.setState({widgetStyle:i,widgetClasses:e}))},closePicker:function(e){var t;return t=this.state.widgetStyle,t.left=-9999,t.display="none",this.setState({showPicker:!1,widgetStyle:t})},renderOverlay:function(){var e;return e={position:"fixed",top:0,bottom:0,left:0,right:0,zIndex:"999"},this.state.showPicker?o.createElement("div",{style:e,onClick:this.closePicker}):o.createElement("span",null)},render:function(){return o.createElement("div",null,this.renderOverlay(),o.createElement(r,{ref:"widget",widgetClasses:this.state.widgetClasses,widgetStyle:this.state.widgetStyle,showDatePicker:this.state.showDatePicker,showTimePicker:this.state.showTimePicker,viewDate:this.state.viewDate,selectedDate:this.state.selectedDate,showToday:this.props.showToday,viewMode:this.props.viewMode,daysOfWeekDisabled:this.props.daysOfWeekDisabled,mode:this.props.mode,minDate:this.props.minDate,maxDate:this.props.maxDate,addDecade:this.addDecade,addYear:this.addYear,addMonth:this.addMonth,addHour:this.addHour,addMinute:this.addMinute,subtractDecade:this.subtractDecade,subtractYear:this.subtractYear,subtractMonth:this.subtractMonth,subtractHour:this.subtractHour,subtractMinute:this.subtractMinute,setViewYear:this.setViewYear,setViewMonth:this.setViewMonth,setSelectedDate:this.setSelectedDate,setSelectedHour:this.setSelectedHour,setSelectedMinute:this.setSelectedMinute,togglePicker:this.togglePicker,togglePeriod:this.togglePeriod}),o.createElement("div",{className:"input-group date",ref:"datetimepicker"},o.createElement("input",o.__spread({type:"text",className:"form-control",onChange:this.onChange,value:this.state.inputValue},this.props.inputProps)),o.createElement("span",{className:"input-group-addon",onClick:this.onClick,onBlur:this.onBlur,ref:"dtpbutton"},o.createElement(i,{glyph:this.state.buttonIcon}))))}}),e.exports=a},function(t,s,a){t.exports=e},function(e,s,a){e.exports=t},function(e,t,a){e.exports=s},function(e,t,s){var a,r,i,o,n;n=s(2),r=s(7),i=s(8),o=s(4).Glyphicon,Constants=s(6),a=n.createClass({displayName:"DateTimePicker",propTypes:{showDatePicker:n.PropTypes.bool,showTimePicker:n.PropTypes.bool,subtractMonth:n.PropTypes.func.isRequired,addMonth:n.PropTypes.func.isRequired,viewDate:n.PropTypes.object.isRequired,selectedDate:n.PropTypes.object.isRequired,showToday:n.PropTypes.bool,viewMode:n.PropTypes.oneOfType([n.PropTypes.string,n.PropTypes.number]),mode:n.PropTypes.oneOf([Constants.MODE_DATE,Constants.MODE_DATETIME,Constants.MODE_TIME]),daysOfWeekDisabled:n.PropTypes.array,setSelectedDate:n.PropTypes.func.isRequired,subtractYear:n.PropTypes.func.isRequired,addYear:n.PropTypes.func.isRequired,setViewMonth:n.PropTypes.func.isRequired,setViewYear:n.PropTypes.func.isRequired,subtractHour:n.PropTypes.func.isRequired,addHour:n.PropTypes.func.isRequired,subtractMinute:n.PropTypes.func.isRequired,addMinute:n.PropTypes.func.isRequired,addDecade:n.PropTypes.func.isRequired,subtractDecade:n.PropTypes.func.isRequired,togglePeriod:n.PropTypes.func.isRequired,minDate:n.PropTypes.object,maxDate:n.PropTypes.object},renderDatePicker:function(){return this.props.showDatePicker?n.createElement("li",null,n.createElement(r,{addMonth:this.props.addMonth,subtractMonth:this.props.subtractMonth,setSelectedDate:this.props.setSelectedDate,viewDate:this.props.viewDate,selectedDate:this.props.selectedDate,showToday:this.props.showToday,viewMode:this.props.viewMode,daysOfWeekDisabled:this.props.daysOfWeekDisabled,subtractYear:this.props.subtractYear,addYear:this.props.addYear,setViewMonth:this.props.setViewMonth,setViewYear:this.props.setViewYear,addDecade:this.props.addDecade,subtractDecade:this.props.subtractDecade,minDate:this.props.minDate,maxDate:this.props.maxDate})):void 0},renderTimePicker:function(){return this.props.showTimePicker?n.createElement("li",null,n.createElement(i,{viewDate:this.props.viewDate,selectedDate:this.props.selectedDate,setSelectedHour:this.props.setSelectedHour,setSelectedMinute:this.props.setSelectedMinute,addHour:this.props.addHour,subtractHour:this.props.subtractHour,addMinute:this.props.addMinute,subtractMinute:this.props.subtractMinute,togglePeriod:this.props.togglePeriod,mode:this.props.mode})):void 0},renderSwitchButton:function(){return this.props.mode===Constants.MODE_DATETIME?n.createElement("li",null,n.createElement("span",{className:"btn picker-switch",style:{width:"100%"},onClick:this.props.togglePicker},n.createElement(o,{glyph:this.props.showTimePicker?"calendar":"time"}))):null},render:function(){return n.createElement("div",{className:n.addons.classSet(this.props.widgetClasses),style:this.props.widgetStyle},n.createElement("ul",{className:"list-unstyled"},this.renderDatePicker(),this.renderSwitchButton(),this.renderTimePicker()))}}),e.exports=a},function(e,t,s){e.exports={MODE_DATE:"date",MODE_DATETIME:"datetime",MODE_TIME:"time"}},function(e,t,s){var a,r,i,o,n;n=s(2),r=s(9),i=s(10),o=s(11),a=n.createClass({displayName:"DateTimePickerDate",propTypes:{subtractMonth:n.PropTypes.func.isRequired,addMonth:n.PropTypes.func.isRequired,viewDate:n.PropTypes.object.isRequired,selectedDate:n.PropTypes.object.isRequired,showToday:n.PropTypes.bool,viewMode:n.PropTypes.oneOfType([n.PropTypes.string,n.PropTypes.number]),daysOfWeekDisabled:n.PropTypes.array,setSelectedDate:n.PropTypes.func.isRequired,subtractYear:n.PropTypes.func.isRequired,addYear:n.PropTypes.func.isRequired,setViewMonth:n.PropTypes.func.isRequired,setViewYear:n.PropTypes.func.isRequired,addDecade:n.PropTypes.func.isRequired,subtractDecade:n.PropTypes.func.isRequired,minDate:n.PropTypes.object,maxDate:n.PropTypes.object},getInitialState:function(){var e={days:{daysDisplayed:!0,monthsDisplayed:!1,yearsDisplayed:!1},months:{daysDisplayed:!1,monthsDisplayed:!0,yearsDisplayed:!1},years:{daysDisplayed:!1,monthsDisplayed:!1,yearsDisplayed:!0}};return e[this.props.viewMode]||e[Object.keys(e)[this.props.viewMode]]||e.days},showMonths:function(){return this.setState({daysDisplayed:!1,monthsDisplayed:!0})},showYears:function(){return this.setState({monthsDisplayed:!1,yearsDisplayed:!0})},setViewYear:function(e){return this.props.setViewYear(e.target.innerHTML),this.setState({yearsDisplayed:!1,monthsDisplayed:!0})},setViewMonth:function(e){return this.props.setViewMonth(e.target.innerHTML),this.setState({monthsDisplayed:!1,daysDisplayed:!0})},renderDays:function(){return this.state.daysDisplayed?n.createElement(r,{addMonth:this.props.addMonth,subtractMonth:this.props.subtractMonth,setSelectedDate:this.props.setSelectedDate,viewDate:this.props.viewDate,selectedDate:this.props.selectedDate,showToday:this.props.showToday,daysOfWeekDisabled:this.props.daysOfWeekDisabled,showMonths:this.showMonths,minDate:this.props.minDate,maxDate:this.props.maxDate}):null},renderMonths:function(){return this.state.monthsDisplayed?n.createElement(i,{subtractYear:this.props.subtractYear,addYear:this.props.addYear,viewDate:this.props.viewDate,selectedDate:this.props.selectedDate,showYears:this.showYears,setViewMonth:this.setViewMonth}):null},renderYears:function(){return this.state.yearsDisplayed?n.createElement(o,{viewDate:this.props.viewDate,selectedDate:this.props.selectedDate,setViewYear:this.setViewYear,addDecade:this.props.addDecade,subtractDecade:this.props.subtractDecade}):null},render:function(){return n.createElement("div",{className:"datepicker"},this.renderDays(),this.renderMonths(),this.renderYears())}}),e.exports=a},function(e,t,s){var a,r,i,o,n;n=s(2),r=s(12),a=s(13),o=s(4).Glyphicon,Constants=s(6),i=n.createClass({displayName:"DateTimePickerTime",propTypes:{setSelectedHour:n.PropTypes.func.isRequired,setSelectedMinute:n.PropTypes.func.isRequired,subtractHour:n.PropTypes.func.isRequired,addHour:n.PropTypes.func.isRequired,subtractMinute:n.PropTypes.func.isRequired,addMinute:n.PropTypes.func.isRequired,viewDate:n.PropTypes.object.isRequired,selectedDate:n.PropTypes.object.isRequired,togglePeriod:n.PropTypes.func.isRequired,mode:n.PropTypes.oneOf([Constants.MODE_DATE,Constants.MODE_DATETIME,Constants.MODE_TIME])},getInitialState:function(){return{minutesDisplayed:!1,hoursDisplayed:!1}},goBack:function(){return this.setState({minutesDisplayed:!1,hoursDisplayed:!1})},showMinutes:function(){return this.setState({minutesDisplayed:!0})},showHours:function(){return this.setState({hoursDisplayed:!0})},renderMinutes:function(){return this.state.minutesDisplayed?n.createElement(r,n.__spread({},this.props,{onSwitch:this.goBack})):null},renderHours:function(){return this.state.hoursDisplayed?n.createElement(a,n.__spread({},this.props,{onSwitch:this.goBack})):null},renderPicker:function(){return this.state.minutesDisplayed||this.state.hoursDisplayed?"":n.createElement("div",{className:"timepicker-picker"},n.createElement("table",{className:"table-condensed"},n.createElement("tbody",null,n.createElement("tr",null,n.createElement("td",null,n.createElement("a",{className:"btn",onClick:this.props.addHour},n.createElement(o,{glyph:"chevron-up"}))),n.createElement("td",{className:"separator"}),n.createElement("td",null,n.createElement("a",{className:"btn",onClick:this.props.addMinute},n.createElement(o,{glyph:"chevron-up"}))),n.createElement("td",{className:"separator"})),n.createElement("tr",null,n.createElement("td",null,n.createElement("span",{className:"timepicker-hour",onClick:this.showHours},this.props.selectedDate.format("h"))),n.createElement("td",{className:"separator"},":"),n.createElement("td",null,n.createElement("span",{className:"timepicker-minute",onClick:this.showMinutes},this.props.selectedDate.format("mm"))),n.createElement("td",{className:"separator"}),n.createElement("td",null,n.createElement("button",{className:"btn btn-primary",onClick:this.props.togglePeriod,type:"button"},this.props.selectedDate.format("A")))),n.createElement("tr",null,n.createElement("td",null,n.createElement("a",{className:"btn",onClick:this.props.subtractHour},n.createElement(o,{glyph:"chevron-down"}))),n.createElement("td",{className:"separator"}),n.createElement("td",null,n.createElement("a",{className:"btn",onClick:this.props.subtractMinute},n.createElement(o,{glyph:"chevron-down"}))),n.createElement("td",{className:"separator"})))))},render:function(){return n.createElement("div",{className:"timepicker"},this.renderPicker(),this.renderHours(),this.renderMinutes())}}),e.exports=i},function(e,t,s){var a,r,i;r=s(2),i=s(3),a=r.createClass({displayName:"DateTimePickerDays",propTypes:{subtractMonth:r.PropTypes.func.isRequired,addMonth:r.PropTypes.func.isRequired,viewDate:r.PropTypes.object.isRequired,selectedDate:r.PropTypes.object.isRequired,showToday:r.PropTypes.bool,daysOfWeekDisabled:r.PropTypes.array,setSelectedDate:r.PropTypes.func.isRequired,showMonths:r.PropTypes.func.isRequired,minDate:r.PropTypes.object,maxDate:r.PropTypes.object},getDefaultProps:function(){return{showToday:!0}},renderDays:function(){var e,t,s,a,o,n,c,p,l,d,u,h,m,D,y;for(h=this.props.viewDate.year(),n=this.props.viewDate.month(),p=this.props.viewDate.clone().subtract(1,"months"),s=p.daysInMonth(),p.date(s).startOf("week"),c=i(p).clone().add(42,"d"),l=this.props.minDate?this.props.minDate.clone().subtract(1,"days"):this.props.minDate,d=this.props.maxDate?this.props.maxDate.clone():this.props.maxDate,a=[],e=[];p.isBefore(c);){if(t={day:!0},p.year()h||p.year()===h&&p.month()>n)&&(t["new"]=!0),p.isSame(i({y:this.props.selectedDate.year(),M:this.props.selectedDate.month(),d:this.props.selectedDate.date()}))&&(t.active=!0),this.props.showToday&&p.isSame(i(),"day")&&(t.today=!0),(l&&p.isBefore(l)||d&&p.isAfter(d))&&(t.disabled=!0),this.props.daysOfWeekDisabled)for(y=this.props.daysOfWeekDisabled,m=0,D=y.length;D>m;m++)if(o=y[m],p.day()===this.props.daysOfWeekDisabled[o]){t.disabled=!0;break}e.push(r.createElement("td",{key:p.month()+"-"+p.date(),className:r.addons.classSet(t),onClick:this.props.setSelectedDate},p.date())),p.weekday()===i().endOf("week").weekday()&&(u=r.createElement("tr",{key:p.month()+"-"+p.date()},e),a.push(u),e=[]),p.add(1,"d")}return a},render:function(){return r.createElement("div",{className:"datepicker-days",style:{display:"block"}},r.createElement("table",{className:"table-condensed"},r.createElement("thead",null,r.createElement("tr",null,r.createElement("th",{className:"prev",onClick:this.props.subtractMonth},"‹"),r.createElement("th",{className:"switch",colSpan:"5",onClick:this.props.showMonths},i.months()[this.props.viewDate.month()]," ",this.props.viewDate.year()),r.createElement("th",{className:"next",onClick:this.props.addMonth},"›")),r.createElement("tr",null,r.createElement("th",{className:"dow"},"Su"),r.createElement("th",{className:"dow"},"Mo"),r.createElement("th",{className:"dow"},"Tu"),r.createElement("th",{className:"dow"},"We"),r.createElement("th",{className:"dow"},"Th"),r.createElement("th",{className:"dow"},"Fr"),r.createElement("th",{className:"dow"},"Sa"))),r.createElement("tbody",null,this.renderDays())))}}),e.exports=a},function(e,t,s){var a,r,i;r=s(2),i=s(3),a=r.createClass({displayName:"DateTimePickerMonths",propTypes:{subtractYear:r.PropTypes.func.isRequired,addYear:r.PropTypes.func.isRequired,viewDate:r.PropTypes.object.isRequired,selectedDate:r.PropTypes.object.isRequired,showYears:r.PropTypes.func.isRequired,setViewMonth:r.PropTypes.func.isRequired},renderMonths:function(){var e,t,s,a,o;for(s=this.props.selectedDate.month(),o=i.monthsShort(),t=0,a=[];12>t;)e={month:!0,active:t===s&&this.props.viewDate.year()===this.props.selectedDate.year()},a.push(r.createElement("span",{key:t,className:r.addons.classSet(e),onClick:this.props.setViewMonth},o[t])),t++;return a},render:function(){return r.createElement("div",{className:"datepicker-months",style:{display:"block"}},r.createElement("table",{className:"table-condensed"},r.createElement("thead",null,r.createElement("tr",null,r.createElement("th",{className:"prev",onClick:this.props.subtractYear},"‹"),r.createElement("th",{className:"switch",colSpan:"5",onClick:this.props.showYears},this.props.viewDate.year()),r.createElement("th",{className:"next",onClick:this.props.addYear},"›"))),r.createElement("tbody",null,r.createElement("tr",null,r.createElement("td",{colSpan:"7"},this.renderMonths())))))}}),e.exports=a},function(e,t,s){var a,r;r=s(2),a=r.createClass({displayName:"DateTimePickerYears",propTypes:{subtractDecade:r.PropTypes.func.isRequired,addDecade:r.PropTypes.func.isRequired,viewDate:r.PropTypes.object.isRequired,selectedDate:r.PropTypes.object.isRequired,setViewYear:r.PropTypes.func.isRequired},renderYears:function(){var e,t,s,a;for(a=[],s=10*parseInt(this.props.viewDate.year()/10,10),s--,t=-1;11>t;)e={year:!0,old:-1===t|10===t,active:this.props.selectedDate.year()===s},a.push(r.createElement("span",{key:s,className:r.addons.classSet(e),onClick:this.props.setViewYear},s)),s++,t++;return a},render:function(){var e;return e=10*parseInt(this.props.viewDate.year()/10,10),r.createElement("div",{className:"datepicker-years",style:{display:"block"}},r.createElement("table",{className:"table-condensed"},r.createElement("thead",null,r.createElement("tr",null,r.createElement("th",{className:"prev",onClick:this.props.subtractDecade},"‹"),r.createElement("th",{className:"switch",colSpan:"5"},e," - ",e+9),r.createElement("th",{className:"next",onClick:this.props.addDecade},"›"))),r.createElement("tbody",null,r.createElement("tr",null,r.createElement("td",{colSpan:"7"},this.renderYears())))))}}),e.exports=a},function(e,t,s){var a,r;r=s(2),Glyphicon=s(4).Glyphicon,a=r.createClass({displayName:"DateTimePickerMinutes",propTypes:{setSelectedMinute:r.PropTypes.func.isRequired,onSwitch:r.PropTypes.func.isRequired},renderSwitchButton:function(){return this.props.mode===Constants.MODE_TIME?r.createElement("ul",{className:"list-unstyled"},r.createElement("li",null,r.createElement("span",{className:"btn picker-switch",style:{width:"100%"},onClick:this.props.onSwitch},r.createElement(Glyphicon,{glyph:"time"})))):null},render:function(){return r.createElement("div",{className:"timepicker-minutes","data-action":"selectMinute",style:{display:"block"}},this.renderSwitchButton(),r.createElement("table",{className:"table-condensed"},r.createElement("tbody",null,r.createElement("tr",null,r.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"00"),r.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"05"),r.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"10"),r.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"15")),r.createElement("tr",null,r.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"20"),r.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"25"),r.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"30"),r.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"35")),r.createElement("tr",null,r.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"40"),r.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"45"),r.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"50"),r.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"55")))))}}),e.exports=a},function(e,t,s){var a,r;r=s(2),Glyphicon=s(4).Glyphicon,a=r.createClass({displayName:"DateTimePickerHours",propTypes:{setSelectedHour:r.PropTypes.func.isRequired,onSwitch:r.PropTypes.func.isRequired},renderSwitchButton:function(){return this.props.mode===Constants.MODE_TIME?r.createElement("ul",{className:"list-unstyled"},r.createElement("li",null,r.createElement("span",{className:"btn picker-switch",style:{width:"100%"},onClick:this.props.onSwitch},r.createElement(Glyphicon,{glyph:"time"})))):null},render:function(){return r.createElement("div",{className:"timepicker-hours","data-action":"selectHour",style:{display:"block"}},this.renderSwitchButton(),r.createElement("table",{className:"table-condensed"},r.createElement("tbody",null,r.createElement("tr",null,r.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"01"),r.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"02"),r.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"03"),r.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"04")),r.createElement("tr",null,r.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"05"),r.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"06"),r.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"07"),r.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"08")),r.createElement("tr",null,r.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"09"),r.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"10"),r.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"11"),r.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"12")),r.createElement("tr",null,r.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"13"),r.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"14"),r.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"15"),r.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"16")),r.createElement("tr",null,r.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"17"),r.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"18"),r.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"19"),r.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"20")),r.createElement("tr",null,r.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"21"),r.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"22"),r.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"23"),r.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"24")))))}}),e.exports=a}])}); \ No newline at end of file +!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("React"),require("moment"),require("ReactBootstrap")):"function"==typeof define&&define.amd?define(["React","moment","ReactBootstrap"],t):"object"==typeof exports?exports.ReactBootstrapDatetimepicker=t(require("React"),require("moment"),require("ReactBootstrap")):e.ReactBootstrapDatetimepicker=t(e.React,e.moment,e.ReactBootstrap)}(this,function(e,t,s){return function(e){function t(r){if(s[r])return s[r].exports;var a=s[r]={exports:{},id:r,loaded:!1};return e[r].call(a.exports,a,a.exports,t),a.loaded=!0,a.exports}var s={};return t.m=e,t.c=s,t.p="",t(0)}([function(e,t,s){e.exports=s(1)},function(e,t,s){var r,a,i,o,n;o=s(2),classNames=s(7),a=s(5),n=s(3),i=s(4).Glyphicon,Constants=s(6),r=o.createClass({displayName:"DateTimeField",propTypes:{dateTime:o.PropTypes.string,value:o.PropTypes.string,onChange:o.PropTypes.func,format:o.PropTypes.string,inputProps:o.PropTypes.object,inputFormat:o.PropTypes.string,placeholder:o.PropTypes.string,mode:o.PropTypes.oneOf([Constants.MODE_DATE,Constants.MODE_DATETIME,Constants.MODE_TIME]),minDate:o.PropTypes.object,maxDate:o.PropTypes.object,clearable:o.PropTypes.bool,disabled:o.PropTypes.bool},getDefaultProps:function(){return{disabled:!1,clearable:!1,format:"x",showToday:!0,viewMode:"days",daysOfWeekDisabled:[],mode:Constants.MODE_DATETIME,placeholder:"Select a date",onChange:function(e){}}},resolvePropsInputFormat:function(e){if(e=e?e:this.props,e.inputFormat)return e.inputFormat;switch(e.mode){case Constants.MODE_TIME:return"h:mm A";case Constants.MODE_DATE:return"MM/DD/YY";default:return"MM/DD/YY h:mm A"}},getInitialState:function(){return{showDatePicker:this.props.mode!==Constants.MODE_TIME,showTimePicker:this.props.mode===Constants.MODE_TIME,inputFormat:this.resolvePropsInputFormat(),buttonIcon:this.props.mode===Constants.MODE_TIME?"time":"calendar",widgetStyle:{display:"block",position:"absolute",left:-9999,zIndex:"9999 !important"},viewDate:this.props.dateTime?n(this.props.dateTime,this.props.format,!0).startOf("month"):n().startOf("month"),selectedDate:this.props.value?n(this.props.value,this.props.format,!0):null,inputValue:"undefined"!=typeof this.props.value?n(this.props.value,this.props.format,!0).format(this.resolvePropsInputFormat()):null}},getCurrentWorkingDate:function(){return this.state.selectedDate?this.state.selectedDate:this.state.viewDate},componentWillReceiveProps:function(e){return this.props.value!==e.value?this.setState({viewDate:e.dateTime?n(e.dateTime,e.format,!0).startOf("month"):n().startOf("month"),selectedDate:e.value?n(e.value,e.format,!0):null,inputValue:"undefined"!=typeof e.value?n(e.value,e.format,!0).format(this.resolvePropsInputFormat(e)):null}):void 0},onChange:function(e){var t=null==e.target?e:e.target.value;return n(t,this.state.inputFormat,!0).isValid()&&this.setState({selectedDate:n(t,this.state.inputFormat,!0),viewDate:n(t,this.state.inputFormat,!0)}),this.setState({inputValue:t},function(){return props.onChange(n(this.state.inputValue,this.state.inputFormat,!0).format(this.props.format))})},setSelectedDate:function(e){var t=e.target;if(t.className&&!t.className.match(/disabled/g)){var s;return s=t.className.includes("new")?this.state.viewDate.month()+1:t.className.includes("old")?this.state.viewDate.month()-1:this.state.viewDate.month(),this.setState({selectedDate:this.state.viewDate.clone().month(s).date(parseInt(e.target.innerHTML)).hour(this.state.viewDate.hours()).minute(this.state.viewDate.minutes())},function(){return this.closePicker(),this.props.onChange(this.getCurrentWorkingDate().format(this.props.format)),this.setState({inputValue:this.getCurrentWorkingDate().format(this.state.inputFormat)})})}},setSelectedHour:function(e){return this.setState({selectedDate:this.getCurrentWorkingDate().clone().hour(parseInt(e.target.innerHTML)).minute(this.getCurrentWorkingDate().minutes())},function(){return this.closePicker(),this.props.onChange(this.getCurrentWorkingDate().format(this.props.format)),this.setState({inputValue:this.getCurrentWorkingDate().format(this.state.inputFormat)})})},setSelectedMinute:function(e){return this.setState({selectedDate:this.getCurrentWorkingDate().clone().hour(this.state.viewDate.hours()).minute(parseInt(e.target.innerHTML))},function(){return this.closePicker(),this.props.onChange(this.state.selectedDate.format(this.props.format)),this.setState({inputValue:this.state.selectedDate.format(this.state.inputFormat)})})},setViewMonth:function(e){return this.setState({viewDate:this.state.viewDate.clone().month(e)})},setViewYear:function(e){return this.setState({viewDate:this.state.viewDate.clone().year(e)})},addMinute:function(){return this.setState({selectedDate:this.getCurrentWorkingDate().clone().add(1,"minutes")},function(){return this.props.onChange(this.getCurrentWorkingDate().format(this.props.format)),this.setState({inputValue:this.getCurrentWorkingDate().format(this.state.inputFormat),viewDate:this.getCurrentWorkingDate()})})},addHour:function(){return this.setState({selectedDate:this.getCurrentWorkingDate().clone().add(1,"hours")},function(){return this.props.onChange(this.getCurrentWorkingDate().format(this.props.format)),this.setState({inputValue:this.getCurrentWorkingDate().format(this.state.inputFormat),viewDate:this.getCurrentWorkingDate()})})},addMonth:function(){return this.setState({viewDate:this.state.viewDate.add(1,"months")})},addYear:function(){return this.setState({viewDate:this.state.viewDate.add(1,"years")})},addDecade:function(){return this.setState({viewDate:this.state.viewDate.add(10,"years")})},subtractMinute:function(){return this.setState({selectedDate:this.getCurrentWorkingDate().clone().subtract(1,"minutes")},function(){return this.props.onChange(this.getCurrentWorkingDate().format(this.props.format)),this.setState({inputValue:this.getCurrentWorkingDate().format(this.state.inputFormat),viewDate:this.getCurrentWorkingDate()})})},subtractHour:function(){return this.setState({selectedDate:this.getCurrentWorkingDate().clone().subtract(1,"hours")},function(){return this.props.onChange(this.getCurrentWorkingDate().format(this.props.format)),this.setState({inputValue:this.getCurrentWorkingDate().format(this.state.inputFormat),viewDate:this.getCurrentWorkingDate()})})},subtractMonth:function(){return this.setState({viewDate:this.state.viewDate.subtract(1,"months")})},subtractYear:function(){return this.setState({viewDate:this.state.viewDate.subtract(1,"years")})},subtractDecade:function(){return this.setState({viewDate:this.state.viewDate.subtract(10,"years")})},togglePeriod:function(){return this.onChange(this.getCurrentWorkingDate().hour()>12?this.getCurrentWorkingDate().clone().subtract(12,"hours").format(this.state.inputFormat):this.getCurrentWorkingDate().clone().add(12,"hours").format(this.state.inputFormat))},togglePicker:function(){return this.setState({showDatePicker:!this.state.showDatePicker,showTimePicker:!this.state.showTimePicker})},clearDate:function(){this.state.selectedDate=null,this.state.inputValue=null,this.state.viewDate=n().startOf("month"),this.forceUpdate(function(){this.props.onChange(null)})},onClick:function(){if(!this.props.disabled){var e,t,s,r,a,i;return this.state.showPicker?this.closePicker():(this.setState({showPicker:!0}),t=this.refs.dtpbutton.getDOMNode().getBoundingClientRect(),e={"bootstrap-datetimepicker-widget":!0,"dropdown-menu":!0},s={top:t.top+window.pageYOffset-document.documentElement.clientTop,left:t.left+window.pageXOffset-document.documentElement.clientLeft},s.top=s.top+this.refs.datetimepicker.getDOMNode().offsetHeight,a=void 0!==window.pageYOffset?window.pageYOffset:(document.documentElement||document.body.parentNode||document.body).scrollTop,r="up"===this.props.direction?"top":"bottom"===this.props.direction?"bottom":"auto"===this.props.direction?s.top+this.refs.widget.getDOMNode().offsetHeight>window.offsetHeight+a&&this.refs.widget.offsetHeight+this.refs.datetimepicker.getDOMNode().offsetHeight>s.top?"top":"bottom":void 0,"top"===r?(s.top=-this.refs.widget.getDOMNode().offsetHeight-this.getDOMNode().clientHeight-2,e.top=!0,e.bottom=!1,e["pull-right"]=!0):(s.top=40,e.top=!1,e.bottom=!0,e["pull-right"]=!0),i={display:"block",position:"absolute",top:s.top,left:"auto",right:40},this.setState({widgetStyle:i,widgetClasses:e}))}},closePicker:function(e){var t;return t=this.state.widgetStyle,t.left=-9999,t.display="none",this.setState({showPicker:!1,widgetStyle:t})},renderOverlay:function(){var e;return e={position:"fixed",top:0,bottom:0,left:0,right:0,zIndex:"999"},this.state.showPicker?o.createElement("div",{style:e,onClick:this.closePicker}):o.createElement("span",null)},render:function(){var e=classNames({"form-control":!0,placeholder:this.props.defaultText===this.state.inputValue});return o.createElement("div",null,this.renderOverlay(),o.createElement(a,{ref:"widget",widgetClasses:this.state.widgetClasses,widgetStyle:this.state.widgetStyle,showDatePicker:this.state.showDatePicker,showTimePicker:this.state.showTimePicker,viewDate:this.state.viewDate,selectedDate:this.state.selectedDate,showToday:this.props.showToday,viewMode:this.props.viewMode,daysOfWeekDisabled:this.props.daysOfWeekDisabled,mode:this.props.mode,minDate:this.props.minDate,maxDate:this.props.maxDate,addDecade:this.addDecade,addYear:this.addYear,addMonth:this.addMonth,addHour:this.addHour,addMinute:this.addMinute,subtractDecade:this.subtractDecade,subtractYear:this.subtractYear,subtractMonth:this.subtractMonth,subtractHour:this.subtractHour,subtractMinute:this.subtractMinute,setViewYear:this.setViewYear,setViewMonth:this.setViewMonth,setSelectedDate:this.setSelectedDate,setSelectedHour:this.setSelectedHour,setSelectedMinute:this.setSelectedMinute,togglePicker:this.togglePicker,togglePeriod:this.togglePeriod}),o.createElement("div",{className:"input-group date",ref:"datetimepicker"},o.createElement("input",o.__spread({type:"text",className:e,onChange:this.onChange,onFocus:this.onClick,disabled:this.props.disabled,value:this.state.inputValue,placeholder:this.props.placeholder},this.props.inputProps)),this.props.clearable&&this.state.selectedDate&&!this.props.disabled?o.createElement("span",{className:"input-group-clear",onClick:this.clearDate},"×"):null,o.createElement("span",{className:"input-group-addon",onClick:this.onClick,onBlur:this.onBlur,ref:"dtpbutton",disabled:this.props.disabled},o.createElement(i,{glyph:this.state.buttonIcon}))))}}),e.exports=r},function(t,s,r){t.exports=e},function(e,s,r){e.exports=t},function(e,t,r){e.exports=s},function(e,t,s){var r,a,i,o,n;n=s(2),classNames=s(7),a=s(8),i=s(9),o=s(4).Glyphicon,Constants=s(6),r=n.createClass({displayName:"DateTimePicker",propTypes:{showDatePicker:n.PropTypes.bool,showTimePicker:n.PropTypes.bool,subtractMonth:n.PropTypes.func.isRequired,addMonth:n.PropTypes.func.isRequired,viewDate:n.PropTypes.object.isRequired,selectedDate:n.PropTypes.object,showToday:n.PropTypes.bool,viewMode:n.PropTypes.oneOfType([n.PropTypes.string,n.PropTypes.number]),mode:n.PropTypes.oneOf([Constants.MODE_DATE,Constants.MODE_DATETIME,Constants.MODE_TIME]),daysOfWeekDisabled:n.PropTypes.array,setSelectedDate:n.PropTypes.func.isRequired,subtractYear:n.PropTypes.func.isRequired,addYear:n.PropTypes.func.isRequired,setViewMonth:n.PropTypes.func.isRequired,setViewYear:n.PropTypes.func.isRequired,subtractHour:n.PropTypes.func.isRequired,addHour:n.PropTypes.func.isRequired,subtractMinute:n.PropTypes.func.isRequired,addMinute:n.PropTypes.func.isRequired,addDecade:n.PropTypes.func.isRequired,subtractDecade:n.PropTypes.func.isRequired,togglePeriod:n.PropTypes.func.isRequired,minDate:n.PropTypes.object,maxDate:n.PropTypes.object},renderDatePicker:function(){return this.props.showDatePicker?n.createElement("li",null,n.createElement(a,{addMonth:this.props.addMonth,subtractMonth:this.props.subtractMonth,setSelectedDate:this.props.setSelectedDate,viewDate:this.props.viewDate,selectedDate:this.props.selectedDate,showToday:this.props.showToday,viewMode:this.props.viewMode,daysOfWeekDisabled:this.props.daysOfWeekDisabled,subtractYear:this.props.subtractYear,addYear:this.props.addYear,setViewMonth:this.props.setViewMonth,setViewYear:this.props.setViewYear,addDecade:this.props.addDecade,subtractDecade:this.props.subtractDecade,minDate:this.props.minDate,maxDate:this.props.maxDate})):void 0},renderTimePicker:function(){return this.props.showTimePicker?n.createElement("li",null,n.createElement(i,{viewDate:this.props.viewDate,selectedDate:this.props.selectedDate,setSelectedHour:this.props.setSelectedHour,setSelectedMinute:this.props.setSelectedMinute,addHour:this.props.addHour,subtractHour:this.props.subtractHour,addMinute:this.props.addMinute,subtractMinute:this.props.subtractMinute,togglePeriod:this.props.togglePeriod,mode:this.props.mode})):void 0},renderSwitchButton:function(){return this.props.mode===Constants.MODE_DATETIME?n.createElement("li",null,n.createElement("span",{className:"btn picker-switch",style:{width:"100%"},onClick:this.props.togglePicker},n.createElement(o,{glyph:this.props.showTimePicker?"calendar":"time"}))):null},render:function(){return n.createElement("div",{className:classNames(this.props.widgetClasses),style:this.props.widgetStyle},n.createElement("ul",{className:"list-unstyled"},this.renderDatePicker(),this.renderSwitchButton(),this.renderTimePicker()))}}),e.exports=r},function(e,t,s){e.exports={MODE_DATE:"date",MODE_DATETIME:"datetime",MODE_TIME:"time"}},function(e,t,s){/*! + Copyright (c) 2015 Jed Watson. + Licensed under the MIT License (MIT), see + http://jedwatson.github.io/classnames + */ +function r(){for(var e,t="",s=0;sm||l.year()===m&&l.month()>c)&&(s["new"]=!0),this.props.selectedDate&&l.isSame(i({y:e.year(),M:e.month(),d:e.date()}))&&(s.active=!0),this.props.showToday&&l.isSame(i(),"day")&&(s.today=!0),(u&&l.isBefore(u)||d&&l.isAfter(d))&&(s.disabled=!0),this.props.daysOfWeekDisabled)for(f=this.props.daysOfWeekDisabled,D=0,y=f.length;y>D;D++)if(n=f[D],l.day()===this.props.daysOfWeekDisabled[n]){s.disabled=!0;break}t.push(a.createElement("td",{key:l.month()+"-"+l.date(),className:classNames(s),onClick:this.props.setSelectedDate},l.date())),l.weekday()===i().endOf("week").weekday()&&(h=a.createElement("tr",{key:l.month()+"-"+l.date()},t),o.push(h),t=[]),l.add(1,"d")}return o},render:function(){return a.createElement("div",{className:"datepicker-days",style:{display:"block"}},a.createElement("table",{className:"table-condensed"},a.createElement("thead",null,a.createElement("tr",null,a.createElement("th",{className:"prev",onClick:this.props.subtractMonth},"‹"),a.createElement("th",{className:"switch",colSpan:"5",onClick:this.props.showMonths},i.months()[this.props.viewDate.month()]," ",this.props.viewDate.year()),a.createElement("th",{className:"next",onClick:this.props.addMonth},"›")),a.createElement("tr",null,a.createElement("th",{className:"dow"},"Su"),a.createElement("th",{className:"dow"},"Mo"),a.createElement("th",{className:"dow"},"Tu"),a.createElement("th",{className:"dow"},"We"),a.createElement("th",{className:"dow"},"Th"),a.createElement("th",{className:"dow"},"Fr"),a.createElement("th",{className:"dow"},"Sa"))),a.createElement("tbody",null,this.renderDays())))}}),e.exports=r},function(e,t,s){var r,a,i;a=s(2),classNames=s(7),i=s(3),r=a.createClass({displayName:"DateTimePickerMonths",propTypes:{subtractYear:a.PropTypes.func.isRequired,addYear:a.PropTypes.func.isRequired,viewDate:a.PropTypes.object.isRequired,selectedDate:a.PropTypes.object,showYears:a.PropTypes.func.isRequired,setViewMonth:a.PropTypes.func.isRequired},getSelectedDate:function(){return this.props.selectedDate?this.props.selectedDate:this.props.viewDate},renderMonths:function(){var e,t,s,r,o;for(s=this.getSelectedDate().month(),o=i.monthsShort(),t=0,r=[];12>t;)e={month:!0,active:t===s&&this.props.viewDate.year()===this.getSelectedDate().year()},r.push(a.createElement("span",{key:t,className:classNames(e),onClick:this.props.setViewMonth},o[t])),t++;return r},render:function(){return a.createElement("div",{className:"datepicker-months",style:{display:"block"}},a.createElement("table",{className:"table-condensed"},a.createElement("thead",null,a.createElement("tr",null,a.createElement("th",{className:"prev",onClick:this.props.subtractYear},"‹"),a.createElement("th",{className:"switch",colSpan:"5",onClick:this.props.showYears},this.props.viewDate.year()),a.createElement("th",{className:"next",onClick:this.props.addYear},"›"))),a.createElement("tbody",null,a.createElement("tr",null,a.createElement("td",{colSpan:"7"},this.renderMonths())))))}}),e.exports=r},function(e,t,s){var r,a;a=s(2),classNames=s(7),r=a.createClass({displayName:"DateTimePickerYears",propTypes:{subtractDecade:a.PropTypes.func.isRequired,addDecade:a.PropTypes.func.isRequired,viewDate:a.PropTypes.object.isRequired,selectedDate:a.PropTypes.object,setViewYear:a.PropTypes.func.isRequired},renderYears:function(){var e,t,s,r;for(r=[],s=10*parseInt(this.props.viewDate.year()/10,10),s--,t=-1;11>t;)e={year:!0,old:-1===t|10===t,active:this.props.viewDate.year()===s},r.push(a.createElement("span",{key:s,className:classNames(e),onClick:this.props.setViewYear},s)),s++,t++;return r},render:function(){var e;return e=10*parseInt(this.props.viewDate.year()/10,10),a.createElement("div",{className:"datepicker-years",style:{display:"block"}},a.createElement("table",{className:"table-condensed"},a.createElement("thead",null,a.createElement("tr",null,a.createElement("th",{className:"prev",onClick:this.props.subtractDecade},"‹"),a.createElement("th",{className:"switch",colSpan:"5"},e," - ",e+9),a.createElement("th",{className:"next",onClick:this.props.addDecade},"›"))),a.createElement("tbody",null,a.createElement("tr",null,a.createElement("td",{colSpan:"7"},this.renderYears())))))}}),e.exports=r},function(e,t,s){var r,a;a=s(2),Glyphicon=s(4).Glyphicon,r=a.createClass({displayName:"DateTimePickerMinutes",propTypes:{setSelectedMinute:a.PropTypes.func.isRequired,onSwitch:a.PropTypes.func.isRequired},renderSwitchButton:function(){return this.props.mode===Constants.MODE_TIME?a.createElement("ul",{className:"list-unstyled"},a.createElement("li",null,a.createElement("span",{className:"btn picker-switch",style:{width:"100%"},onClick:this.props.onSwitch},a.createElement(Glyphicon,{glyph:"time"})))):null},render:function(){return a.createElement("div",{className:"timepicker-minutes","data-action":"selectMinute",style:{display:"block"}},this.renderSwitchButton(),a.createElement("table",{className:"table-condensed"},a.createElement("tbody",null,a.createElement("tr",null,a.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"00"),a.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"05"),a.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"10"),a.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"15")),a.createElement("tr",null,a.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"20"),a.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"25"),a.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"30"),a.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"35")),a.createElement("tr",null,a.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"40"),a.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"45"),a.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"50"),a.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"55")))))}}),e.exports=r},function(e,t,s){var r,a;a=s(2),Glyphicon=s(4).Glyphicon,r=a.createClass({displayName:"DateTimePickerHours",propTypes:{setSelectedHour:a.PropTypes.func.isRequired,onSwitch:a.PropTypes.func.isRequired},renderSwitchButton:function(){return this.props.mode===Constants.MODE_TIME?a.createElement("ul",{className:"list-unstyled"},a.createElement("li",null,a.createElement("span",{className:"btn picker-switch",style:{width:"100%"},onClick:this.props.onSwitch},a.createElement(Glyphicon,{glyph:"time"})))):null},render:function(){return a.createElement("div",{className:"timepicker-hours","data-action":"selectHour",style:{display:"block"}},this.renderSwitchButton(),a.createElement("table",{className:"table-condensed"},a.createElement("tbody",null,a.createElement("tr",null,a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"01"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"02"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"03"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"04")),a.createElement("tr",null,a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"05"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"06"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"07"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"08")),a.createElement("tr",null,a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"09"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"10"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"11"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"12")),a.createElement("tr",null,a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"13"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"14"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"15"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"16")),a.createElement("tr",null,a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"17"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"18"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"19"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"20")),a.createElement("tr",null,a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"21"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"22"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"23"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"24")))))}}),e.exports=r}])}); \ No newline at end of file diff --git a/examples/basic/basic.jsx b/examples/basic/basic.jsx index b3fe22b1..c7599644 100644 --- a/examples/basic/basic.jsx +++ b/examples/basic/basic.jsx @@ -89,7 +89,23 @@ var Basic = React.createClass({
    Empty - 
     {''}
    + 
     {''}
    +
    +
+
+
+ Initial Value + + 
 {''}
+
+
+
+
+ disables + + 
 {''}
+ + 
 {''}
diff --git a/examples/bootstrap-datetimepicker.min.css b/examples/bootstrap-datetimepicker.min.css index c3e9a233..7a80a734 100644 --- a/examples/bootstrap-datetimepicker.min.css +++ b/examples/bootstrap-datetimepicker.min.css @@ -3,3 +3,10 @@ //! version : 3.1.3 * https://github.com/Eonasdan/bootstrap-datetimepicker/ */.bootstrap-datetimepicker-widget{top:0;left:0;width:250px;padding:4px;margin-top:1px;z-index:99999!important;border-radius:4px}.bootstrap-datetimepicker-widget.timepicker-sbs{width:600px}.bootstrap-datetimepicker-widget.bottom:before{content:'';display:inline-block;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:7px solid #ccc;border-bottom-color:rgba(0,0,0,.2);position:absolute;top:-7px;left:7px}.bootstrap-datetimepicker-widget.bottom:after{content:'';display:inline-block;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid #fff;position:absolute;top:-6px;left:8px}.bootstrap-datetimepicker-widget.top:before{content:'';display:inline-block;border-left:7px solid transparent;border-right:7px solid transparent;border-top:7px solid #ccc;border-top-color:rgba(0,0,0,.2);position:absolute;bottom:-7px;left:6px}.bootstrap-datetimepicker-widget.top:after{content:'';display:inline-block;border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid #fff;position:absolute;bottom:-6px;left:7px}.bootstrap-datetimepicker-widget .dow{width:14.2857%}.bootstrap-datetimepicker-widget.pull-right:before{left:auto;right:6px}.bootstrap-datetimepicker-widget.pull-right:after{left:auto;right:7px}.bootstrap-datetimepicker-widget>ul{list-style-type:none;margin:0}.bootstrap-datetimepicker-widget a[data-action]{padding:6px 0}.bootstrap-datetimepicker-widget a[data-action]:active{box-shadow:none}.bootstrap-datetimepicker-widget .timepicker-hour,.bootstrap-datetimepicker-widget .timepicker-minute,.bootstrap-datetimepicker-widget .timepicker-second{width:54px;font-weight:700;font-size:1.2em;margin:0}.bootstrap-datetimepicker-widget button[data-action]{padding:6px}.bootstrap-datetimepicker-widget table[data-hour-format="12"] .separator{width:4px;padding:0;margin:0}.bootstrap-datetimepicker-widget .datepicker>div{display:none}.bootstrap-datetimepicker-widget .picker-switch{text-align:center}.bootstrap-datetimepicker-widget table{width:100%;margin:0}.bootstrap-datetimepicker-widget td,.bootstrap-datetimepicker-widget th{text-align:center;border-radius:4px}.bootstrap-datetimepicker-widget td{height:54px;line-height:54px;width:54px}.bootstrap-datetimepicker-widget td.cw{font-size:10px;height:20px;line-height:20px;color:#777}.bootstrap-datetimepicker-widget td.day{height:20px;line-height:20px;width:20px}.bootstrap-datetimepicker-widget td.day:hover,.bootstrap-datetimepicker-widget td.hour:hover,.bootstrap-datetimepicker-widget td.minute:hover,.bootstrap-datetimepicker-widget td.second:hover{background:#eee;cursor:pointer}.bootstrap-datetimepicker-widget td.old,.bootstrap-datetimepicker-widget td.new{color:#777}.bootstrap-datetimepicker-widget td.today{position:relative}.bootstrap-datetimepicker-widget td.today:before{content:'';display:inline-block;border-left:7px solid transparent;border-bottom:7px solid #428bca;border-top-color:rgba(0,0,0,.2);position:absolute;bottom:4px;right:4px}.bootstrap-datetimepicker-widget td.active,.bootstrap-datetimepicker-widget td.active:hover{background-color:#428bca;color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,.25)}.bootstrap-datetimepicker-widget td.active.today:before{border-bottom-color:#fff}.bootstrap-datetimepicker-widget td.disabled,.bootstrap-datetimepicker-widget td.disabled:hover{background:0 0;color:#777;cursor:not-allowed}.bootstrap-datetimepicker-widget td span{display:inline-block;width:54px;height:54px;line-height:54px;margin:2px 1.5px;cursor:pointer;border-radius:4px}.bootstrap-datetimepicker-widget td span:hover{background:#eee}.bootstrap-datetimepicker-widget td span.active{background-color:#428bca;color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,.25)}.bootstrap-datetimepicker-widget td span.old{color:#777}.bootstrap-datetimepicker-widget td span.disabled,.bootstrap-datetimepicker-widget td span.disabled:hover{background:0 0;color:#777;cursor:not-allowed}.bootstrap-datetimepicker-widget th{height:20px;line-height:20px;width:20px}.bootstrap-datetimepicker-widget th.picker-switch{width:145px}.bootstrap-datetimepicker-widget th.next,.bootstrap-datetimepicker-widget th.prev{font-size:21px}.bootstrap-datetimepicker-widget th.disabled,.bootstrap-datetimepicker-widget th.disabled:hover{background:0 0;color:#777;cursor:not-allowed}.bootstrap-datetimepicker-widget thead tr:first-child th{cursor:pointer}.bootstrap-datetimepicker-widget thead tr:first-child th:hover{background:#eee}.input-group.date .input-group-addon span{display:block;cursor:pointer;width:16px;height:16px}.bootstrap-datetimepicker-widget.left-oriented:before{left:auto;right:6px}.bootstrap-datetimepicker-widget.left-oriented:after{left:auto;right:7px}.bootstrap-datetimepicker-widget ul.list-unstyled li div.timepicker div.timepicker-picker table.table-condensed tbody>tr>td{padding:0!important}@media screen and (max-width:767px){.bootstrap-datetimepicker-widget.timepicker-sbs{width:283px}} +.input-group.date span.input-group-clear { + position: absolute; + z-index: 10; + right: 11%; + line-height: 32px; + cursor: pointer; +} \ No newline at end of file diff --git a/package.json b/package.json index 09a38d45..5cb9ded3 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "mnq-react-bootstrap-datetimepicker", - "version": "0.0.17", + "version": "0.1.0", "description": "A bootstrap datetime picker component for React.js", "repository": { "type": "git", diff --git a/src/DateTimeField.jsx b/src/DateTimeField.jsx index 43f81414..f544569f 100644 --- a/src/DateTimeField.jsx +++ b/src/DateTimeField.jsx @@ -14,7 +14,7 @@ Constants = require('./Constants'); DateTimeField = React.createClass({ propTypes: { dateTime: React.PropTypes.string, - defaultValue: React.PropTypes.string, + value: React.PropTypes.string, onChange: React.PropTypes.func, format: React.PropTypes.string, inputProps: React.PropTypes.object, @@ -23,11 +23,13 @@ DateTimeField = React.createClass({ mode: React.PropTypes.oneOf([Constants.MODE_DATE, Constants.MODE_DATETIME, Constants.MODE_TIME]), minDate: React.PropTypes.object, maxDate: React.PropTypes.object, - clearable: React.PropTypes.bool + clearable: React.PropTypes.bool, + disabled: React.PropTypes.bool }, getDefaultProps: function() { return { - clearable: true, + disabled: false, + clearable: false, format: 'x', showToday: true, viewMode: 'days', @@ -37,9 +39,10 @@ DateTimeField = React.createClass({ onChange: function (x) {} }; }, - resolvePropsInputFormat: function() { - if(this.props.inputFormat) return this.props.inputFormat; - switch(this.props.mode) { + resolvePropsInputFormat: function(props) { + props = props ? props : this.props; + if(props.inputFormat) return props.inputFormat; + switch(props.mode) { case Constants.MODE_TIME: return "h:mm A"; case Constants.MODE_DATE: @@ -61,19 +64,19 @@ DateTimeField = React.createClass({ zIndex: '9999 !important' }, viewDate: this.props.dateTime ? moment(this.props.dateTime, this.props.format, true).startOf("month") : moment().startOf("month"), - selectedDate: this.props.defaultValue ? moment(this.props.defaultValue, this.props.format, true) : null, - inputValue: typeof this.props.defaultValue != 'undefined' ? moment(this.props.defaultValue, this.props.format, true).format(this.resolvePropsInputFormat()) : null + selectedDate: this.props.value ? moment(this.props.value, this.props.format, true) : null, + inputValue: typeof this.props.value != 'undefined' ? moment(this.props.value, this.props.format, true).format(this.resolvePropsInputFormat()) : null }; }, getCurrentWorkingDate: function() { return this.state.selectedDate ? this.state.selectedDate : this.state.viewDate; }, componentWillReceiveProps: function(nextProps) { - if(moment(nextProps.dateTime, nextProps.format, true).isValid()) { + if(this.props.value !== nextProps.value) { return this.setState({ - viewDate: moment(nextProps.dateTime, nextProps.format, true).startOf("month"), - selectedDate: moment(nextProps.dateTime, nextProps.format, true), - inputValue: moment(nextProps.dateTime, nextProps.format, true).format(nextProps.inputFormat) + viewDate: nextProps.dateTime ? moment(nextProps.dateTime, nextProps.format, true).startOf("month") : moment().startOf("month"), + selectedDate: nextProps.value ? moment(nextProps.value, nextProps.format, true) : null, + inputValue: typeof nextProps.value != 'undefined' ? moment(nextProps.value, nextProps.format, true).format(this.resolvePropsInputFormat(nextProps)) : null }); } }, @@ -234,9 +237,12 @@ DateTimeField = React.createClass({ this.state.selectedDate = null; this.state.inputValue = null; this.state.viewDate = moment().startOf('month'); - this.forceUpdate(); + this.forceUpdate(function() { + this.props.onChange(null); + }); }, onClick: function() { + if(this.props.disabled) return; var classes, gBCR, offset, placePosition, scrollTop, styles; if (this.state.showPicker) { return this.closePicker(); @@ -346,13 +352,14 @@ DateTimeField = React.createClass({ togglePeriod={this.togglePeriod} />
- + { - this.props.clearable && this.state.selectedDate ? - x : + this.props.clearable && this.state.selectedDate && !this.props.disabled ? + × : null } - +
diff --git a/src/DateTimePickerMonths.jsx b/src/DateTimePickerMonths.jsx index a0005c7c..13937edc 100644 --- a/src/DateTimePickerMonths.jsx +++ b/src/DateTimePickerMonths.jsx @@ -14,7 +14,7 @@ DateTimePickerMonths = React.createClass({ showYears: React.PropTypes.func.isRequired, setViewMonth: React.PropTypes.func.isRequired }, - getSelectedDate() { + getSelectedDate: function() { return this.props.selectedDate ? this.props.selectedDate : this.props.viewDate; }, renderMonths: function() { diff --git a/src/DateTimePickerTime.jsx b/src/DateTimePickerTime.jsx index de3c2b15..1b9ce97b 100644 --- a/src/DateTimePickerTime.jsx +++ b/src/DateTimePickerTime.jsx @@ -29,6 +29,9 @@ DateTimePickerTime = React.createClass({ hoursDisplayed: false }; }, + getCurrentWorkingDate: function() { + return this.props.selectedDate ? this.props.selectedDate : this.props.viewDate; + }, goBack: function() { return this.setState({ minutesDisplayed: false, @@ -76,15 +79,15 @@ DateTimePickerTime = React.createClass({ - {this.props.viewDate.format('h')} + {this.getCurrentWorkingDate().format('h')} : - {this.props.viewDate.format('mm')} + {this.getCurrentWorkingDate().format('mm')} - + From eedf6c9ba7cbe919a22e46b7c52fc8fb8175e155 Mon Sep 17 00:00:00 2001 From: Alejandro Sellero Date: Tue, 26 May 2015 17:58:19 +0200 Subject: [PATCH 08/16] - Keeping our on viewDate --- css/bootstrap-datetimepicker.css | 3 +- css/bootstrap-datetimepicker.min.css | 5 +- dist/react-bootstrap-datetimepicker.js | 365 +++++++++++---------- dist/react-bootstrap-datetimepicker.min.js | 4 +- examples/bootstrap-datetimepicker.min.css | 5 +- src/DateTimeField.jsx | 28 +- 6 files changed, 213 insertions(+), 197 deletions(-) diff --git a/css/bootstrap-datetimepicker.css b/css/bootstrap-datetimepicker.css index b39865aa..7de85d62 100644 --- a/css/bootstrap-datetimepicker.css +++ b/css/bootstrap-datetimepicker.css @@ -195,7 +195,8 @@ cursor: pointer; position: absolute; z-index: 10; - right: 11%; + left: calc(100% - 57px); + color: #dddddd; line-height: 32px; } .bootstrap-datetimepicker-widget.left-oriented:before { diff --git a/css/bootstrap-datetimepicker.min.css b/css/bootstrap-datetimepicker.min.css index 8f3be4b9..fc167f16 100644 --- a/css/bootstrap-datetimepicker.min.css +++ b/css/bootstrap-datetimepicker.min.css @@ -5,9 +5,10 @@ .bootstrap-datetimepicker-widget{top:0;left:0;width:250px;padding:4px;margin-top:1px;z-index:99999!important;border-radius:4px}.bootstrap-datetimepicker-widget.timepicker-sbs{width:600px}.bootstrap-datetimepicker-widget.bottom:before{content:'';display:inline-block;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:7px solid #ccc;border-bottom-color:rgba(0,0,0,.2);position:absolute;top:-7px;left:7px}.bootstrap-datetimepicker-widget.bottom:after{content:'';display:inline-block;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid #fff;position:absolute;top:-6px;left:8px}.bootstrap-datetimepicker-widget.top:before{content:'';display:inline-block;border-left:7px solid transparent;border-right:7px solid transparent;border-top:7px solid #ccc;border-top-color:rgba(0,0,0,.2);position:absolute;bottom:-7px;left:6px}.bootstrap-datetimepicker-widget.top:after{content:'';display:inline-block;border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid #fff;position:absolute;bottom:-6px;left:7px}.bootstrap-datetimepicker-widget .dow{width:14.2857%}.bootstrap-datetimepicker-widget.pull-right:before{left:auto;right:6px}.bootstrap-datetimepicker-widget.pull-right:after{left:auto;right:7px}.bootstrap-datetimepicker-widget>ul{list-style-type:none;margin:0}.bootstrap-datetimepicker-widget .timepicker-hour,.bootstrap-datetimepicker-widget .timepicker-minute,.bootstrap-datetimepicker-widget .timepicker-second{width:100%;font-weight:bold;font-size:1.2em}.bootstrap-datetimepicker-widget table[data-hour-format="12"] .separator{width:4px;padding:0;margin:0}.bootstrap-datetimepicker-widget .datepicker>div{display:none}.bootstrap-datetimepicker-widget .picker-switch{text-align:center}.bootstrap-datetimepicker-widget table{width:100%;margin:0}.bootstrap-datetimepicker-widget td,.bootstrap-datetimepicker-widget th{text-align:center;width:20px;height:20px;border-radius:4px}.bootstrap-datetimepicker-widget td.day:hover,.bootstrap-datetimepicker-widget td.hour:hover,.bootstrap-datetimepicker-widget td.minute:hover,.bootstrap-datetimepicker-widget td.second:hover{background:#eee;cursor:pointer}.bootstrap-datetimepicker-widget td.old,.bootstrap-datetimepicker-widget td.new{color:#999}.bootstrap-datetimepicker-widget td.today{position:relative}.bootstrap-datetimepicker-widget td.today:before{content:'';display:inline-block;border-left:7px solid transparent;border-bottom:7px solid #428bca;border-top-color:rgba(0,0,0,.2);position:absolute;bottom:4px;right:4px}.bootstrap-datetimepicker-widget td.active,.bootstrap-datetimepicker-widget td.active:hover{background-color:#428bca;color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,.25)}.bootstrap-datetimepicker-widget td.active.today:before{border-bottom-color:#fff}.bootstrap-datetimepicker-widget td.disabled,.bootstrap-datetimepicker-widget td.disabled:hover{background:none;color:#999;cursor:not-allowed}.bootstrap-datetimepicker-widget td span{display:block;width:47px;height:54px;line-height:54px;float:left;margin:2px;cursor:pointer;border-radius:4px}.bootstrap-datetimepicker-widget td span:hover{background:#eee}.bootstrap-datetimepicker-widget td span.active{background-color:#428bca;color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,.25)}.bootstrap-datetimepicker-widget td span.old{color:#999}.bootstrap-datetimepicker-widget td span.disabled,.bootstrap-datetimepicker-widget td span.disabled:hover{background:none;color:#999;cursor:not-allowed}.bootstrap-datetimepicker-widget th.switch{width:145px}.bootstrap-datetimepicker-widget th.next,.bootstrap-datetimepicker-widget th.prev{font-size:21px}.bootstrap-datetimepicker-widget th.disabled,.bootstrap-datetimepicker-widget th.disabled:hover{background:none;color:#999;cursor:not-allowed}.bootstrap-datetimepicker-widget thead tr:first-child th{cursor:pointer}.bootstrap-datetimepicker-widget thead tr:first-child th:hover{background:#eee}.input-group.date .input-group-addon span{display:block;cursor:pointer;width:16px;height:16px}.bootstrap-datetimepicker-widget.left-oriented:before{left:auto;right:6px}.bootstrap-datetimepicker-widget.left-oriented:after{left:auto;right:7px}.bootstrap-datetimepicker-widget ul.list-unstyled li div.timepicker div.timepicker-picker table.table-condensed tbody>tr>td{padding:0!important} .input-group.date span.input-group-clear { + cursor: pointer; position: absolute; z-index: 10; - right: 11%; + left: calc(100% - 57px); + color: #dddddd; line-height: 32px; - cursor: pointer; } \ No newline at end of file diff --git a/dist/react-bootstrap-datetimepicker.js b/dist/react-bootstrap-datetimepicker.js index 8a5da3bc..1659e4bd 100644 --- a/dist/react-bootstrap-datetimepicker.js +++ b/dist/react-bootstrap-datetimepicker.js @@ -155,7 +155,7 @@ return /******/ (function(modules) { // webpackBootstrap return this.setState({ inputValue: value }, function() { - return props.onChange(moment(this.state.inputValue, this.state.inputFormat, true).format(this.props.format)); + return this.props.onChange(moment(this.state.inputValue, this.state.inputFormat, true).format(this.props.format)); }); }, @@ -644,11 +644,11 @@ return /******/ (function(modules) { // webpackBootstrap React = __webpack_require__(2); - DateTimePickerDays = __webpack_require__(10); + DateTimePickerDays = __webpack_require__(12); - DateTimePickerMonths = __webpack_require__(11); + DateTimePickerMonths = __webpack_require__(13); - DateTimePickerYears = __webpack_require__(12); + DateTimePickerYears = __webpack_require__(14); DateTimePickerDate = React.createClass({displayName: "DateTimePickerDate", propTypes: { @@ -793,9 +793,9 @@ return /******/ (function(modules) { // webpackBootstrap React = __webpack_require__(2); - DateTimePickerMinutes = __webpack_require__(13); + DateTimePickerMinutes = __webpack_require__(10); - DateTimePickerHours = __webpack_require__(14); + DateTimePickerHours = __webpack_require__(11); Glyphicon = __webpack_require__(4).Glyphicon; @@ -820,6 +820,9 @@ return /******/ (function(modules) { // webpackBootstrap hoursDisplayed: false }; }, + getCurrentWorkingDate: function() { + return this.props.selectedDate ? this.props.selectedDate : this.props.viewDate; + }, goBack: function() { return this.setState({ minutesDisplayed: false, @@ -867,15 +870,15 @@ return /******/ (function(modules) { // webpackBootstrap ), React.createElement("tr", null, - React.createElement("td", null, React.createElement("span", {className: "timepicker-hour", onClick: this.showHours}, this.props.viewDate.format('h'))), + React.createElement("td", null, React.createElement("span", {className: "timepicker-hour", onClick: this.showHours}, this.getCurrentWorkingDate().format('h'))), React.createElement("td", {className: "separator"}, ":"), - React.createElement("td", null, React.createElement("span", {className: "timepicker-minute", onClick: this.showMinutes}, this.props.viewDate.format('mm'))), + React.createElement("td", null, React.createElement("span", {className: "timepicker-minute", onClick: this.showMinutes}, this.getCurrentWorkingDate().format('mm'))), React.createElement("td", {className: "separator"}), - React.createElement("td", null, React.createElement("button", {className: "btn btn-primary", onClick: this.props.togglePeriod, type: "button"}, this.props.viewDate.format('A'))) + React.createElement("td", null, React.createElement("button", {className: "btn btn-primary", onClick: this.props.togglePeriod, type: "button"}, this.getCurrentWorkingDate().format('A'))) ), React.createElement("tr", null, @@ -913,6 +916,176 @@ return /******/ (function(modules) { // webpackBootstrap /***/ }, /* 10 */ +/***/ function(module, exports, __webpack_require__) { + + var DateTimePickerMinutes, React; + + React = __webpack_require__(2); + Glyphicon = __webpack_require__(4).Glyphicon; + + DateTimePickerMinutes = React.createClass({displayName: "DateTimePickerMinutes", + propTypes: { + setSelectedMinute: React.PropTypes.func.isRequired, + onSwitch: React.PropTypes.func.isRequired + }, + renderSwitchButton: function() { + return this.props.mode === Constants.MODE_TIME ? + ( + React.createElement("ul", {className: "list-unstyled"}, + React.createElement("li", null, + React.createElement("span", {className: "btn picker-switch", style: {width:'100%'}, onClick: this.props.onSwitch}, React.createElement(Glyphicon, {glyph: "time"})) + ) + ) + ) : + null; + }, + render: function() { + return ( + React.createElement("div", {className: "timepicker-minutes", "data-action": "selectMinute", style: {display: 'block'}}, + this.renderSwitchButton(), + React.createElement("table", {className: "table-condensed"}, + React.createElement("tbody", null, + React.createElement("tr", null, + React.createElement("td", {className: "minute", onClick: this.props.setSelectedMinute}, "00"), + + React.createElement("td", {className: "minute", onClick: this.props.setSelectedMinute}, "05"), + + React.createElement("td", {className: "minute", onClick: this.props.setSelectedMinute}, "10"), + + React.createElement("td", {className: "minute", onClick: this.props.setSelectedMinute}, "15") + ), + + React.createElement("tr", null, + React.createElement("td", {className: "minute", onClick: this.props.setSelectedMinute}, "20"), + + React.createElement("td", {className: "minute", onClick: this.props.setSelectedMinute}, "25"), + + React.createElement("td", {className: "minute", onClick: this.props.setSelectedMinute}, "30"), + + React.createElement("td", {className: "minute", onClick: this.props.setSelectedMinute}, "35") + ), + + React.createElement("tr", null, + React.createElement("td", {className: "minute", onClick: this.props.setSelectedMinute}, "40"), + + React.createElement("td", {className: "minute", onClick: this.props.setSelectedMinute}, "45"), + + React.createElement("td", {className: "minute", onClick: this.props.setSelectedMinute}, "50"), + + React.createElement("td", {className: "minute", onClick: this.props.setSelectedMinute}, "55") + ) + ) + ) + ) + ); + } + }); + + module.exports = DateTimePickerMinutes; + + +/***/ }, +/* 11 */ +/***/ function(module, exports, __webpack_require__) { + + var DateTimePickerHours, React; + + React = __webpack_require__(2); + Glyphicon = __webpack_require__(4).Glyphicon; + + DateTimePickerHours = React.createClass({displayName: "DateTimePickerHours", + propTypes: { + setSelectedHour: React.PropTypes.func.isRequired, + onSwitch: React.PropTypes.func.isRequired + }, + renderSwitchButton: function() { + return this.props.mode === Constants.MODE_TIME ? + ( + React.createElement("ul", {className: "list-unstyled"}, + React.createElement("li", null, + React.createElement("span", {className: "btn picker-switch", style: {width:'100%'}, onClick: this.props.onSwitch}, React.createElement(Glyphicon, {glyph: "time"})) + ) + ) + ) : + null; + }, + render: function() { + return ( + React.createElement("div", {className: "timepicker-hours", "data-action": "selectHour", style: {display: 'block'}}, + this.renderSwitchButton(), + React.createElement("table", {className: "table-condensed"}, + React.createElement("tbody", null, + React.createElement("tr", null, + React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "01"), + + React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "02"), + + React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "03"), + + React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "04") + ), + + React.createElement("tr", null, + React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "05"), + + React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "06"), + + React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "07"), + + React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "08") + ), + + React.createElement("tr", null, + React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "09"), + + React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "10"), + + React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "11"), + + React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "12") + ), + + React.createElement("tr", null, + React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "13"), + + React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "14"), + + React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "15"), + + React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "16") + ), + + React.createElement("tr", null, + React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "17"), + + React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "18"), + + React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "19"), + + React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "20") + ), + + React.createElement("tr", null, + React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "21"), + + React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "22"), + + React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "23"), + + React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "24") + ) + ) + ) + ) + ); + } + }); + + module.exports = DateTimePickerHours; + + +/***/ }, +/* 12 */ /***/ function(module, exports, __webpack_require__) { var DateTimePickerDays, React, moment; @@ -1043,7 +1216,7 @@ return /******/ (function(modules) { // webpackBootstrap /***/ }, -/* 11 */ +/* 13 */ /***/ function(module, exports, __webpack_require__) { var DateTimePickerMonths, React, moment; @@ -1110,7 +1283,7 @@ return /******/ (function(modules) { // webpackBootstrap /***/ }, -/* 12 */ +/* 14 */ /***/ function(module, exports, __webpack_require__) { var DateTimePickerYears, React; @@ -1174,176 +1347,6 @@ return /******/ (function(modules) { // webpackBootstrap module.exports = DateTimePickerYears; -/***/ }, -/* 13 */ -/***/ function(module, exports, __webpack_require__) { - - var DateTimePickerMinutes, React; - - React = __webpack_require__(2); - Glyphicon = __webpack_require__(4).Glyphicon; - - DateTimePickerMinutes = React.createClass({displayName: "DateTimePickerMinutes", - propTypes: { - setSelectedMinute: React.PropTypes.func.isRequired, - onSwitch: React.PropTypes.func.isRequired - }, - renderSwitchButton: function() { - return this.props.mode === Constants.MODE_TIME ? - ( - React.createElement("ul", {className: "list-unstyled"}, - React.createElement("li", null, - React.createElement("span", {className: "btn picker-switch", style: {width:'100%'}, onClick: this.props.onSwitch}, React.createElement(Glyphicon, {glyph: "time"})) - ) - ) - ) : - null; - }, - render: function() { - return ( - React.createElement("div", {className: "timepicker-minutes", "data-action": "selectMinute", style: {display: 'block'}}, - this.renderSwitchButton(), - React.createElement("table", {className: "table-condensed"}, - React.createElement("tbody", null, - React.createElement("tr", null, - React.createElement("td", {className: "minute", onClick: this.props.setSelectedMinute}, "00"), - - React.createElement("td", {className: "minute", onClick: this.props.setSelectedMinute}, "05"), - - React.createElement("td", {className: "minute", onClick: this.props.setSelectedMinute}, "10"), - - React.createElement("td", {className: "minute", onClick: this.props.setSelectedMinute}, "15") - ), - - React.createElement("tr", null, - React.createElement("td", {className: "minute", onClick: this.props.setSelectedMinute}, "20"), - - React.createElement("td", {className: "minute", onClick: this.props.setSelectedMinute}, "25"), - - React.createElement("td", {className: "minute", onClick: this.props.setSelectedMinute}, "30"), - - React.createElement("td", {className: "minute", onClick: this.props.setSelectedMinute}, "35") - ), - - React.createElement("tr", null, - React.createElement("td", {className: "minute", onClick: this.props.setSelectedMinute}, "40"), - - React.createElement("td", {className: "minute", onClick: this.props.setSelectedMinute}, "45"), - - React.createElement("td", {className: "minute", onClick: this.props.setSelectedMinute}, "50"), - - React.createElement("td", {className: "minute", onClick: this.props.setSelectedMinute}, "55") - ) - ) - ) - ) - ); - } - }); - - module.exports = DateTimePickerMinutes; - - -/***/ }, -/* 14 */ -/***/ function(module, exports, __webpack_require__) { - - var DateTimePickerHours, React; - - React = __webpack_require__(2); - Glyphicon = __webpack_require__(4).Glyphicon; - - DateTimePickerHours = React.createClass({displayName: "DateTimePickerHours", - propTypes: { - setSelectedHour: React.PropTypes.func.isRequired, - onSwitch: React.PropTypes.func.isRequired - }, - renderSwitchButton: function() { - return this.props.mode === Constants.MODE_TIME ? - ( - React.createElement("ul", {className: "list-unstyled"}, - React.createElement("li", null, - React.createElement("span", {className: "btn picker-switch", style: {width:'100%'}, onClick: this.props.onSwitch}, React.createElement(Glyphicon, {glyph: "time"})) - ) - ) - ) : - null; - }, - render: function() { - return ( - React.createElement("div", {className: "timepicker-hours", "data-action": "selectHour", style: {display: 'block'}}, - this.renderSwitchButton(), - React.createElement("table", {className: "table-condensed"}, - React.createElement("tbody", null, - React.createElement("tr", null, - React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "01"), - - React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "02"), - - React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "03"), - - React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "04") - ), - - React.createElement("tr", null, - React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "05"), - - React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "06"), - - React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "07"), - - React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "08") - ), - - React.createElement("tr", null, - React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "09"), - - React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "10"), - - React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "11"), - - React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "12") - ), - - React.createElement("tr", null, - React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "13"), - - React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "14"), - - React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "15"), - - React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "16") - ), - - React.createElement("tr", null, - React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "17"), - - React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "18"), - - React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "19"), - - React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "20") - ), - - React.createElement("tr", null, - React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "21"), - - React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "22"), - - React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "23"), - - React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "24") - ) - ) - ) - ) - ); - } - }); - - module.exports = DateTimePickerHours; - - /***/ } /******/ ]) }); diff --git a/dist/react-bootstrap-datetimepicker.min.js b/dist/react-bootstrap-datetimepicker.min.js index aa9af1b2..b5e961f4 100644 --- a/dist/react-bootstrap-datetimepicker.min.js +++ b/dist/react-bootstrap-datetimepicker.min.js @@ -1,6 +1,6 @@ -!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("React"),require("moment"),require("ReactBootstrap")):"function"==typeof define&&define.amd?define(["React","moment","ReactBootstrap"],t):"object"==typeof exports?exports.ReactBootstrapDatetimepicker=t(require("React"),require("moment"),require("ReactBootstrap")):e.ReactBootstrapDatetimepicker=t(e.React,e.moment,e.ReactBootstrap)}(this,function(e,t,s){return function(e){function t(r){if(s[r])return s[r].exports;var a=s[r]={exports:{},id:r,loaded:!1};return e[r].call(a.exports,a,a.exports,t),a.loaded=!0,a.exports}var s={};return t.m=e,t.c=s,t.p="",t(0)}([function(e,t,s){e.exports=s(1)},function(e,t,s){var r,a,i,o,n;o=s(2),classNames=s(7),a=s(5),n=s(3),i=s(4).Glyphicon,Constants=s(6),r=o.createClass({displayName:"DateTimeField",propTypes:{dateTime:o.PropTypes.string,value:o.PropTypes.string,onChange:o.PropTypes.func,format:o.PropTypes.string,inputProps:o.PropTypes.object,inputFormat:o.PropTypes.string,placeholder:o.PropTypes.string,mode:o.PropTypes.oneOf([Constants.MODE_DATE,Constants.MODE_DATETIME,Constants.MODE_TIME]),minDate:o.PropTypes.object,maxDate:o.PropTypes.object,clearable:o.PropTypes.bool,disabled:o.PropTypes.bool},getDefaultProps:function(){return{disabled:!1,clearable:!1,format:"x",showToday:!0,viewMode:"days",daysOfWeekDisabled:[],mode:Constants.MODE_DATETIME,placeholder:"Select a date",onChange:function(e){}}},resolvePropsInputFormat:function(e){if(e=e?e:this.props,e.inputFormat)return e.inputFormat;switch(e.mode){case Constants.MODE_TIME:return"h:mm A";case Constants.MODE_DATE:return"MM/DD/YY";default:return"MM/DD/YY h:mm A"}},getInitialState:function(){return{showDatePicker:this.props.mode!==Constants.MODE_TIME,showTimePicker:this.props.mode===Constants.MODE_TIME,inputFormat:this.resolvePropsInputFormat(),buttonIcon:this.props.mode===Constants.MODE_TIME?"time":"calendar",widgetStyle:{display:"block",position:"absolute",left:-9999,zIndex:"9999 !important"},viewDate:this.props.dateTime?n(this.props.dateTime,this.props.format,!0).startOf("month"):n().startOf("month"),selectedDate:this.props.value?n(this.props.value,this.props.format,!0):null,inputValue:"undefined"!=typeof this.props.value?n(this.props.value,this.props.format,!0).format(this.resolvePropsInputFormat()):null}},getCurrentWorkingDate:function(){return this.state.selectedDate?this.state.selectedDate:this.state.viewDate},componentWillReceiveProps:function(e){return this.props.value!==e.value?this.setState({viewDate:e.dateTime?n(e.dateTime,e.format,!0).startOf("month"):n().startOf("month"),selectedDate:e.value?n(e.value,e.format,!0):null,inputValue:"undefined"!=typeof e.value?n(e.value,e.format,!0).format(this.resolvePropsInputFormat(e)):null}):void 0},onChange:function(e){var t=null==e.target?e:e.target.value;return n(t,this.state.inputFormat,!0).isValid()&&this.setState({selectedDate:n(t,this.state.inputFormat,!0),viewDate:n(t,this.state.inputFormat,!0)}),this.setState({inputValue:t},function(){return props.onChange(n(this.state.inputValue,this.state.inputFormat,!0).format(this.props.format))})},setSelectedDate:function(e){var t=e.target;if(t.className&&!t.className.match(/disabled/g)){var s;return s=t.className.includes("new")?this.state.viewDate.month()+1:t.className.includes("old")?this.state.viewDate.month()-1:this.state.viewDate.month(),this.setState({selectedDate:this.state.viewDate.clone().month(s).date(parseInt(e.target.innerHTML)).hour(this.state.viewDate.hours()).minute(this.state.viewDate.minutes())},function(){return this.closePicker(),this.props.onChange(this.getCurrentWorkingDate().format(this.props.format)),this.setState({inputValue:this.getCurrentWorkingDate().format(this.state.inputFormat)})})}},setSelectedHour:function(e){return this.setState({selectedDate:this.getCurrentWorkingDate().clone().hour(parseInt(e.target.innerHTML)).minute(this.getCurrentWorkingDate().minutes())},function(){return this.closePicker(),this.props.onChange(this.getCurrentWorkingDate().format(this.props.format)),this.setState({inputValue:this.getCurrentWorkingDate().format(this.state.inputFormat)})})},setSelectedMinute:function(e){return this.setState({selectedDate:this.getCurrentWorkingDate().clone().hour(this.state.viewDate.hours()).minute(parseInt(e.target.innerHTML))},function(){return this.closePicker(),this.props.onChange(this.state.selectedDate.format(this.props.format)),this.setState({inputValue:this.state.selectedDate.format(this.state.inputFormat)})})},setViewMonth:function(e){return this.setState({viewDate:this.state.viewDate.clone().month(e)})},setViewYear:function(e){return this.setState({viewDate:this.state.viewDate.clone().year(e)})},addMinute:function(){return this.setState({selectedDate:this.getCurrentWorkingDate().clone().add(1,"minutes")},function(){return this.props.onChange(this.getCurrentWorkingDate().format(this.props.format)),this.setState({inputValue:this.getCurrentWorkingDate().format(this.state.inputFormat),viewDate:this.getCurrentWorkingDate()})})},addHour:function(){return this.setState({selectedDate:this.getCurrentWorkingDate().clone().add(1,"hours")},function(){return this.props.onChange(this.getCurrentWorkingDate().format(this.props.format)),this.setState({inputValue:this.getCurrentWorkingDate().format(this.state.inputFormat),viewDate:this.getCurrentWorkingDate()})})},addMonth:function(){return this.setState({viewDate:this.state.viewDate.add(1,"months")})},addYear:function(){return this.setState({viewDate:this.state.viewDate.add(1,"years")})},addDecade:function(){return this.setState({viewDate:this.state.viewDate.add(10,"years")})},subtractMinute:function(){return this.setState({selectedDate:this.getCurrentWorkingDate().clone().subtract(1,"minutes")},function(){return this.props.onChange(this.getCurrentWorkingDate().format(this.props.format)),this.setState({inputValue:this.getCurrentWorkingDate().format(this.state.inputFormat),viewDate:this.getCurrentWorkingDate()})})},subtractHour:function(){return this.setState({selectedDate:this.getCurrentWorkingDate().clone().subtract(1,"hours")},function(){return this.props.onChange(this.getCurrentWorkingDate().format(this.props.format)),this.setState({inputValue:this.getCurrentWorkingDate().format(this.state.inputFormat),viewDate:this.getCurrentWorkingDate()})})},subtractMonth:function(){return this.setState({viewDate:this.state.viewDate.subtract(1,"months")})},subtractYear:function(){return this.setState({viewDate:this.state.viewDate.subtract(1,"years")})},subtractDecade:function(){return this.setState({viewDate:this.state.viewDate.subtract(10,"years")})},togglePeriod:function(){return this.onChange(this.getCurrentWorkingDate().hour()>12?this.getCurrentWorkingDate().clone().subtract(12,"hours").format(this.state.inputFormat):this.getCurrentWorkingDate().clone().add(12,"hours").format(this.state.inputFormat))},togglePicker:function(){return this.setState({showDatePicker:!this.state.showDatePicker,showTimePicker:!this.state.showTimePicker})},clearDate:function(){this.state.selectedDate=null,this.state.inputValue=null,this.state.viewDate=n().startOf("month"),this.forceUpdate(function(){this.props.onChange(null)})},onClick:function(){if(!this.props.disabled){var e,t,s,r,a,i;return this.state.showPicker?this.closePicker():(this.setState({showPicker:!0}),t=this.refs.dtpbutton.getDOMNode().getBoundingClientRect(),e={"bootstrap-datetimepicker-widget":!0,"dropdown-menu":!0},s={top:t.top+window.pageYOffset-document.documentElement.clientTop,left:t.left+window.pageXOffset-document.documentElement.clientLeft},s.top=s.top+this.refs.datetimepicker.getDOMNode().offsetHeight,a=void 0!==window.pageYOffset?window.pageYOffset:(document.documentElement||document.body.parentNode||document.body).scrollTop,r="up"===this.props.direction?"top":"bottom"===this.props.direction?"bottom":"auto"===this.props.direction?s.top+this.refs.widget.getDOMNode().offsetHeight>window.offsetHeight+a&&this.refs.widget.offsetHeight+this.refs.datetimepicker.getDOMNode().offsetHeight>s.top?"top":"bottom":void 0,"top"===r?(s.top=-this.refs.widget.getDOMNode().offsetHeight-this.getDOMNode().clientHeight-2,e.top=!0,e.bottom=!1,e["pull-right"]=!0):(s.top=40,e.top=!1,e.bottom=!0,e["pull-right"]=!0),i={display:"block",position:"absolute",top:s.top,left:"auto",right:40},this.setState({widgetStyle:i,widgetClasses:e}))}},closePicker:function(e){var t;return t=this.state.widgetStyle,t.left=-9999,t.display="none",this.setState({showPicker:!1,widgetStyle:t})},renderOverlay:function(){var e;return e={position:"fixed",top:0,bottom:0,left:0,right:0,zIndex:"999"},this.state.showPicker?o.createElement("div",{style:e,onClick:this.closePicker}):o.createElement("span",null)},render:function(){var e=classNames({"form-control":!0,placeholder:this.props.defaultText===this.state.inputValue});return o.createElement("div",null,this.renderOverlay(),o.createElement(a,{ref:"widget",widgetClasses:this.state.widgetClasses,widgetStyle:this.state.widgetStyle,showDatePicker:this.state.showDatePicker,showTimePicker:this.state.showTimePicker,viewDate:this.state.viewDate,selectedDate:this.state.selectedDate,showToday:this.props.showToday,viewMode:this.props.viewMode,daysOfWeekDisabled:this.props.daysOfWeekDisabled,mode:this.props.mode,minDate:this.props.minDate,maxDate:this.props.maxDate,addDecade:this.addDecade,addYear:this.addYear,addMonth:this.addMonth,addHour:this.addHour,addMinute:this.addMinute,subtractDecade:this.subtractDecade,subtractYear:this.subtractYear,subtractMonth:this.subtractMonth,subtractHour:this.subtractHour,subtractMinute:this.subtractMinute,setViewYear:this.setViewYear,setViewMonth:this.setViewMonth,setSelectedDate:this.setSelectedDate,setSelectedHour:this.setSelectedHour,setSelectedMinute:this.setSelectedMinute,togglePicker:this.togglePicker,togglePeriod:this.togglePeriod}),o.createElement("div",{className:"input-group date",ref:"datetimepicker"},o.createElement("input",o.__spread({type:"text",className:e,onChange:this.onChange,onFocus:this.onClick,disabled:this.props.disabled,value:this.state.inputValue,placeholder:this.props.placeholder},this.props.inputProps)),this.props.clearable&&this.state.selectedDate&&!this.props.disabled?o.createElement("span",{className:"input-group-clear",onClick:this.clearDate},"×"):null,o.createElement("span",{className:"input-group-addon",onClick:this.onClick,onBlur:this.onBlur,ref:"dtpbutton",disabled:this.props.disabled},o.createElement(i,{glyph:this.state.buttonIcon}))))}}),e.exports=r},function(t,s,r){t.exports=e},function(e,s,r){e.exports=t},function(e,t,r){e.exports=s},function(e,t,s){var r,a,i,o,n;n=s(2),classNames=s(7),a=s(8),i=s(9),o=s(4).Glyphicon,Constants=s(6),r=n.createClass({displayName:"DateTimePicker",propTypes:{showDatePicker:n.PropTypes.bool,showTimePicker:n.PropTypes.bool,subtractMonth:n.PropTypes.func.isRequired,addMonth:n.PropTypes.func.isRequired,viewDate:n.PropTypes.object.isRequired,selectedDate:n.PropTypes.object,showToday:n.PropTypes.bool,viewMode:n.PropTypes.oneOfType([n.PropTypes.string,n.PropTypes.number]),mode:n.PropTypes.oneOf([Constants.MODE_DATE,Constants.MODE_DATETIME,Constants.MODE_TIME]),daysOfWeekDisabled:n.PropTypes.array,setSelectedDate:n.PropTypes.func.isRequired,subtractYear:n.PropTypes.func.isRequired,addYear:n.PropTypes.func.isRequired,setViewMonth:n.PropTypes.func.isRequired,setViewYear:n.PropTypes.func.isRequired,subtractHour:n.PropTypes.func.isRequired,addHour:n.PropTypes.func.isRequired,subtractMinute:n.PropTypes.func.isRequired,addMinute:n.PropTypes.func.isRequired,addDecade:n.PropTypes.func.isRequired,subtractDecade:n.PropTypes.func.isRequired,togglePeriod:n.PropTypes.func.isRequired,minDate:n.PropTypes.object,maxDate:n.PropTypes.object},renderDatePicker:function(){return this.props.showDatePicker?n.createElement("li",null,n.createElement(a,{addMonth:this.props.addMonth,subtractMonth:this.props.subtractMonth,setSelectedDate:this.props.setSelectedDate,viewDate:this.props.viewDate,selectedDate:this.props.selectedDate,showToday:this.props.showToday,viewMode:this.props.viewMode,daysOfWeekDisabled:this.props.daysOfWeekDisabled,subtractYear:this.props.subtractYear,addYear:this.props.addYear,setViewMonth:this.props.setViewMonth,setViewYear:this.props.setViewYear,addDecade:this.props.addDecade,subtractDecade:this.props.subtractDecade,minDate:this.props.minDate,maxDate:this.props.maxDate})):void 0},renderTimePicker:function(){return this.props.showTimePicker?n.createElement("li",null,n.createElement(i,{viewDate:this.props.viewDate,selectedDate:this.props.selectedDate,setSelectedHour:this.props.setSelectedHour,setSelectedMinute:this.props.setSelectedMinute,addHour:this.props.addHour,subtractHour:this.props.subtractHour,addMinute:this.props.addMinute,subtractMinute:this.props.subtractMinute,togglePeriod:this.props.togglePeriod,mode:this.props.mode})):void 0},renderSwitchButton:function(){return this.props.mode===Constants.MODE_DATETIME?n.createElement("li",null,n.createElement("span",{className:"btn picker-switch",style:{width:"100%"},onClick:this.props.togglePicker},n.createElement(o,{glyph:this.props.showTimePicker?"calendar":"time"}))):null},render:function(){return n.createElement("div",{className:classNames(this.props.widgetClasses),style:this.props.widgetStyle},n.createElement("ul",{className:"list-unstyled"},this.renderDatePicker(),this.renderSwitchButton(),this.renderTimePicker()))}}),e.exports=r},function(e,t,s){e.exports={MODE_DATE:"date",MODE_DATETIME:"datetime",MODE_TIME:"time"}},function(e,t,s){/*! +!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("React"),require("moment"),require("ReactBootstrap")):"function"==typeof define&&define.amd?define(["React","moment","ReactBootstrap"],t):"object"==typeof exports?exports.ReactBootstrapDatetimepicker=t(require("React"),require("moment"),require("ReactBootstrap")):e.ReactBootstrapDatetimepicker=t(e.React,e.moment,e.ReactBootstrap)}(this,function(e,t,s){return function(e){function t(r){if(s[r])return s[r].exports;var a=s[r]={exports:{},id:r,loaded:!1};return e[r].call(a.exports,a,a.exports,t),a.loaded=!0,a.exports}var s={};return t.m=e,t.c=s,t.p="",t(0)}([function(e,t,s){e.exports=s(1)},function(e,t,s){var r,a,i,o,n;o=s(2),classNames=s(7),a=s(5),n=s(3),i=s(4).Glyphicon,Constants=s(6),r=o.createClass({displayName:"DateTimeField",propTypes:{dateTime:o.PropTypes.string,value:o.PropTypes.string,onChange:o.PropTypes.func,format:o.PropTypes.string,inputProps:o.PropTypes.object,inputFormat:o.PropTypes.string,placeholder:o.PropTypes.string,mode:o.PropTypes.oneOf([Constants.MODE_DATE,Constants.MODE_DATETIME,Constants.MODE_TIME]),minDate:o.PropTypes.object,maxDate:o.PropTypes.object,clearable:o.PropTypes.bool,disabled:o.PropTypes.bool},getDefaultProps:function(){return{disabled:!1,clearable:!1,format:"x",showToday:!0,viewMode:"days",daysOfWeekDisabled:[],mode:Constants.MODE_DATETIME,placeholder:"Select a date",onChange:function(e){}}},resolvePropsInputFormat:function(e){if(e=e?e:this.props,e.inputFormat)return e.inputFormat;switch(e.mode){case Constants.MODE_TIME:return"h:mm A";case Constants.MODE_DATE:return"MM/DD/YY";default:return"MM/DD/YY h:mm A"}},getInitialState:function(){return{showDatePicker:this.props.mode!==Constants.MODE_TIME,showTimePicker:this.props.mode===Constants.MODE_TIME,inputFormat:this.resolvePropsInputFormat(),buttonIcon:this.props.mode===Constants.MODE_TIME?"time":"calendar",widgetStyle:{display:"block",position:"absolute",left:-9999,zIndex:"9999 !important"},viewDate:this.props.dateTime?n(this.props.dateTime,this.props.format,!0).startOf("month"):n().startOf("month"),selectedDate:this.props.value?n(this.props.value,this.props.format,!0):null,inputValue:"undefined"!=typeof this.props.value?n(this.props.value,this.props.format,!0).format(this.resolvePropsInputFormat()):null}},getCurrentWorkingDate:function(){return this.state.selectedDate?this.state.selectedDate:this.state.viewDate},componentWillReceiveProps:function(e){return this.props.value!==e.value?this.setState({viewDate:e.dateTime?n(e.dateTime,e.format,!0).startOf("month"):n().startOf("month"),selectedDate:e.value?n(e.value,e.format,!0):null,inputValue:"undefined"!=typeof e.value?n(e.value,e.format,!0).format(this.resolvePropsInputFormat(e)):null}):void 0},onChange:function(e){var t=null==e.target?e:e.target.value;return n(t,this.state.inputFormat,!0).isValid()&&this.setState({selectedDate:n(t,this.state.inputFormat,!0),viewDate:n(t,this.state.inputFormat,!0)}),this.setState({inputValue:t},function(){return this.props.onChange(n(this.state.inputValue,this.state.inputFormat,!0).format(this.props.format))})},setSelectedDate:function(e){var t=e.target;if(t.className&&!t.className.match(/disabled/g)){var s;return s=t.className.includes("new")?this.state.viewDate.month()+1:t.className.includes("old")?this.state.viewDate.month()-1:this.state.viewDate.month(),this.setState({selectedDate:this.state.viewDate.clone().month(s).date(parseInt(e.target.innerHTML)).hour(this.state.viewDate.hours()).minute(this.state.viewDate.minutes())},function(){return this.closePicker(),this.props.onChange(this.getCurrentWorkingDate().format(this.props.format)),this.setState({inputValue:this.getCurrentWorkingDate().format(this.state.inputFormat)})})}},setSelectedHour:function(e){return this.setState({selectedDate:this.getCurrentWorkingDate().clone().hour(parseInt(e.target.innerHTML)).minute(this.getCurrentWorkingDate().minutes())},function(){return this.closePicker(),this.props.onChange(this.getCurrentWorkingDate().format(this.props.format)),this.setState({inputValue:this.getCurrentWorkingDate().format(this.state.inputFormat)})})},setSelectedMinute:function(e){return this.setState({selectedDate:this.getCurrentWorkingDate().clone().hour(this.state.viewDate.hours()).minute(parseInt(e.target.innerHTML))},function(){return this.closePicker(),this.props.onChange(this.state.selectedDate.format(this.props.format)),this.setState({inputValue:this.state.selectedDate.format(this.state.inputFormat)})})},setViewMonth:function(e){return this.setState({viewDate:this.state.viewDate.clone().month(e)})},setViewYear:function(e){return this.setState({viewDate:this.state.viewDate.clone().year(e)})},addMinute:function(){return this.setState({selectedDate:this.getCurrentWorkingDate().clone().add(1,"minutes")},function(){return this.props.onChange(this.getCurrentWorkingDate().format(this.props.format)),this.setState({inputValue:this.getCurrentWorkingDate().format(this.state.inputFormat),viewDate:this.getCurrentWorkingDate()})})},addHour:function(){return this.setState({selectedDate:this.getCurrentWorkingDate().clone().add(1,"hours")},function(){return this.props.onChange(this.getCurrentWorkingDate().format(this.props.format)),this.setState({inputValue:this.getCurrentWorkingDate().format(this.state.inputFormat),viewDate:this.getCurrentWorkingDate()})})},addMonth:function(){return this.setState({viewDate:this.state.viewDate.add(1,"months")})},addYear:function(){return this.setState({viewDate:this.state.viewDate.add(1,"years")})},addDecade:function(){return this.setState({viewDate:this.state.viewDate.add(10,"years")})},subtractMinute:function(){return this.setState({selectedDate:this.getCurrentWorkingDate().clone().subtract(1,"minutes")},function(){return this.props.onChange(this.getCurrentWorkingDate().format(this.props.format)),this.setState({inputValue:this.getCurrentWorkingDate().format(this.state.inputFormat),viewDate:this.getCurrentWorkingDate()})})},subtractHour:function(){return this.setState({selectedDate:this.getCurrentWorkingDate().clone().subtract(1,"hours")},function(){return this.props.onChange(this.getCurrentWorkingDate().format(this.props.format)),this.setState({inputValue:this.getCurrentWorkingDate().format(this.state.inputFormat),viewDate:this.getCurrentWorkingDate()})})},subtractMonth:function(){return this.setState({viewDate:this.state.viewDate.subtract(1,"months")})},subtractYear:function(){return this.setState({viewDate:this.state.viewDate.subtract(1,"years")})},subtractDecade:function(){return this.setState({viewDate:this.state.viewDate.subtract(10,"years")})},togglePeriod:function(){return this.onChange(this.getCurrentWorkingDate().hour()>12?this.getCurrentWorkingDate().clone().subtract(12,"hours").format(this.state.inputFormat):this.getCurrentWorkingDate().clone().add(12,"hours").format(this.state.inputFormat))},togglePicker:function(){return this.setState({showDatePicker:!this.state.showDatePicker,showTimePicker:!this.state.showTimePicker})},clearDate:function(){this.state.selectedDate=null,this.state.inputValue=null,this.state.viewDate=n().startOf("month"),this.forceUpdate(function(){this.props.onChange(null)})},onClick:function(){if(!this.props.disabled){var e,t,s,r,a,i;return this.state.showPicker?this.closePicker():(this.setState({showPicker:!0}),t=this.refs.dtpbutton.getDOMNode().getBoundingClientRect(),e={"bootstrap-datetimepicker-widget":!0,"dropdown-menu":!0},s={top:t.top+window.pageYOffset-document.documentElement.clientTop,left:t.left+window.pageXOffset-document.documentElement.clientLeft},s.top=s.top+this.refs.datetimepicker.getDOMNode().offsetHeight,a=void 0!==window.pageYOffset?window.pageYOffset:(document.documentElement||document.body.parentNode||document.body).scrollTop,r="up"===this.props.direction?"top":"bottom"===this.props.direction?"bottom":"auto"===this.props.direction?s.top+this.refs.widget.getDOMNode().offsetHeight>window.offsetHeight+a&&this.refs.widget.offsetHeight+this.refs.datetimepicker.getDOMNode().offsetHeight>s.top?"top":"bottom":void 0,"top"===r?(s.top=-this.refs.widget.getDOMNode().offsetHeight-this.getDOMNode().clientHeight-2,e.top=!0,e.bottom=!1,e["pull-right"]=!0):(s.top=40,e.top=!1,e.bottom=!0,e["pull-right"]=!0),i={display:"block",position:"absolute",top:s.top,left:"auto",right:40},this.setState({widgetStyle:i,widgetClasses:e}))}},closePicker:function(e){var t;return t=this.state.widgetStyle,t.left=-9999,t.display="none",this.setState({showPicker:!1,widgetStyle:t})},renderOverlay:function(){var e;return e={position:"fixed",top:0,bottom:0,left:0,right:0,zIndex:"999"},this.state.showPicker?o.createElement("div",{style:e,onClick:this.closePicker}):o.createElement("span",null)},render:function(){var e=classNames({"form-control":!0,placeholder:this.props.defaultText===this.state.inputValue});return o.createElement("div",null,this.renderOverlay(),o.createElement(a,{ref:"widget",widgetClasses:this.state.widgetClasses,widgetStyle:this.state.widgetStyle,showDatePicker:this.state.showDatePicker,showTimePicker:this.state.showTimePicker,viewDate:this.state.viewDate,selectedDate:this.state.selectedDate,showToday:this.props.showToday,viewMode:this.props.viewMode,daysOfWeekDisabled:this.props.daysOfWeekDisabled,mode:this.props.mode,minDate:this.props.minDate,maxDate:this.props.maxDate,addDecade:this.addDecade,addYear:this.addYear,addMonth:this.addMonth,addHour:this.addHour,addMinute:this.addMinute,subtractDecade:this.subtractDecade,subtractYear:this.subtractYear,subtractMonth:this.subtractMonth,subtractHour:this.subtractHour,subtractMinute:this.subtractMinute,setViewYear:this.setViewYear,setViewMonth:this.setViewMonth,setSelectedDate:this.setSelectedDate,setSelectedHour:this.setSelectedHour,setSelectedMinute:this.setSelectedMinute,togglePicker:this.togglePicker,togglePeriod:this.togglePeriod}),o.createElement("div",{className:"input-group date",ref:"datetimepicker"},o.createElement("input",o.__spread({type:"text",className:e,onChange:this.onChange,onFocus:this.onClick,disabled:this.props.disabled,value:this.state.inputValue,placeholder:this.props.placeholder},this.props.inputProps)),this.props.clearable&&this.state.selectedDate&&!this.props.disabled?o.createElement("span",{className:"input-group-clear",onClick:this.clearDate},"×"):null,o.createElement("span",{className:"input-group-addon",onClick:this.onClick,onBlur:this.onBlur,ref:"dtpbutton",disabled:this.props.disabled},o.createElement(i,{glyph:this.state.buttonIcon}))))}}),e.exports=r},function(t,s,r){t.exports=e},function(e,s,r){e.exports=t},function(e,t,r){e.exports=s},function(e,t,s){var r,a,i,o,n;n=s(2),classNames=s(7),a=s(8),i=s(9),o=s(4).Glyphicon,Constants=s(6),r=n.createClass({displayName:"DateTimePicker",propTypes:{showDatePicker:n.PropTypes.bool,showTimePicker:n.PropTypes.bool,subtractMonth:n.PropTypes.func.isRequired,addMonth:n.PropTypes.func.isRequired,viewDate:n.PropTypes.object.isRequired,selectedDate:n.PropTypes.object,showToday:n.PropTypes.bool,viewMode:n.PropTypes.oneOfType([n.PropTypes.string,n.PropTypes.number]),mode:n.PropTypes.oneOf([Constants.MODE_DATE,Constants.MODE_DATETIME,Constants.MODE_TIME]),daysOfWeekDisabled:n.PropTypes.array,setSelectedDate:n.PropTypes.func.isRequired,subtractYear:n.PropTypes.func.isRequired,addYear:n.PropTypes.func.isRequired,setViewMonth:n.PropTypes.func.isRequired,setViewYear:n.PropTypes.func.isRequired,subtractHour:n.PropTypes.func.isRequired,addHour:n.PropTypes.func.isRequired,subtractMinute:n.PropTypes.func.isRequired,addMinute:n.PropTypes.func.isRequired,addDecade:n.PropTypes.func.isRequired,subtractDecade:n.PropTypes.func.isRequired,togglePeriod:n.PropTypes.func.isRequired,minDate:n.PropTypes.object,maxDate:n.PropTypes.object},renderDatePicker:function(){return this.props.showDatePicker?n.createElement("li",null,n.createElement(a,{addMonth:this.props.addMonth,subtractMonth:this.props.subtractMonth,setSelectedDate:this.props.setSelectedDate,viewDate:this.props.viewDate,selectedDate:this.props.selectedDate,showToday:this.props.showToday,viewMode:this.props.viewMode,daysOfWeekDisabled:this.props.daysOfWeekDisabled,subtractYear:this.props.subtractYear,addYear:this.props.addYear,setViewMonth:this.props.setViewMonth,setViewYear:this.props.setViewYear,addDecade:this.props.addDecade,subtractDecade:this.props.subtractDecade,minDate:this.props.minDate,maxDate:this.props.maxDate})):void 0},renderTimePicker:function(){return this.props.showTimePicker?n.createElement("li",null,n.createElement(i,{viewDate:this.props.viewDate,selectedDate:this.props.selectedDate,setSelectedHour:this.props.setSelectedHour,setSelectedMinute:this.props.setSelectedMinute,addHour:this.props.addHour,subtractHour:this.props.subtractHour,addMinute:this.props.addMinute,subtractMinute:this.props.subtractMinute,togglePeriod:this.props.togglePeriod,mode:this.props.mode})):void 0},renderSwitchButton:function(){return this.props.mode===Constants.MODE_DATETIME?n.createElement("li",null,n.createElement("span",{className:"btn picker-switch",style:{width:"100%"},onClick:this.props.togglePicker},n.createElement(o,{glyph:this.props.showTimePicker?"calendar":"time"}))):null},render:function(){return n.createElement("div",{className:classNames(this.props.widgetClasses),style:this.props.widgetStyle},n.createElement("ul",{className:"list-unstyled"},this.renderDatePicker(),this.renderSwitchButton(),this.renderTimePicker()))}}),e.exports=r},function(e,t,s){e.exports={MODE_DATE:"date",MODE_DATETIME:"datetime",MODE_TIME:"time"}},function(e,t,s){/*! Copyright (c) 2015 Jed Watson. Licensed under the MIT License (MIT), see http://jedwatson.github.io/classnames */ -function r(){for(var e,t="",s=0;sm||l.year()===m&&l.month()>c)&&(s["new"]=!0),this.props.selectedDate&&l.isSame(i({y:e.year(),M:e.month(),d:e.date()}))&&(s.active=!0),this.props.showToday&&l.isSame(i(),"day")&&(s.today=!0),(u&&l.isBefore(u)||d&&l.isAfter(d))&&(s.disabled=!0),this.props.daysOfWeekDisabled)for(f=this.props.daysOfWeekDisabled,D=0,y=f.length;y>D;D++)if(n=f[D],l.day()===this.props.daysOfWeekDisabled[n]){s.disabled=!0;break}t.push(a.createElement("td",{key:l.month()+"-"+l.date(),className:classNames(s),onClick:this.props.setSelectedDate},l.date())),l.weekday()===i().endOf("week").weekday()&&(h=a.createElement("tr",{key:l.month()+"-"+l.date()},t),o.push(h),t=[]),l.add(1,"d")}return o},render:function(){return a.createElement("div",{className:"datepicker-days",style:{display:"block"}},a.createElement("table",{className:"table-condensed"},a.createElement("thead",null,a.createElement("tr",null,a.createElement("th",{className:"prev",onClick:this.props.subtractMonth},"‹"),a.createElement("th",{className:"switch",colSpan:"5",onClick:this.props.showMonths},i.months()[this.props.viewDate.month()]," ",this.props.viewDate.year()),a.createElement("th",{className:"next",onClick:this.props.addMonth},"›")),a.createElement("tr",null,a.createElement("th",{className:"dow"},"Su"),a.createElement("th",{className:"dow"},"Mo"),a.createElement("th",{className:"dow"},"Tu"),a.createElement("th",{className:"dow"},"We"),a.createElement("th",{className:"dow"},"Th"),a.createElement("th",{className:"dow"},"Fr"),a.createElement("th",{className:"dow"},"Sa"))),a.createElement("tbody",null,this.renderDays())))}}),e.exports=r},function(e,t,s){var r,a,i;a=s(2),classNames=s(7),i=s(3),r=a.createClass({displayName:"DateTimePickerMonths",propTypes:{subtractYear:a.PropTypes.func.isRequired,addYear:a.PropTypes.func.isRequired,viewDate:a.PropTypes.object.isRequired,selectedDate:a.PropTypes.object,showYears:a.PropTypes.func.isRequired,setViewMonth:a.PropTypes.func.isRequired},getSelectedDate:function(){return this.props.selectedDate?this.props.selectedDate:this.props.viewDate},renderMonths:function(){var e,t,s,r,o;for(s=this.getSelectedDate().month(),o=i.monthsShort(),t=0,r=[];12>t;)e={month:!0,active:t===s&&this.props.viewDate.year()===this.getSelectedDate().year()},r.push(a.createElement("span",{key:t,className:classNames(e),onClick:this.props.setViewMonth},o[t])),t++;return r},render:function(){return a.createElement("div",{className:"datepicker-months",style:{display:"block"}},a.createElement("table",{className:"table-condensed"},a.createElement("thead",null,a.createElement("tr",null,a.createElement("th",{className:"prev",onClick:this.props.subtractYear},"‹"),a.createElement("th",{className:"switch",colSpan:"5",onClick:this.props.showYears},this.props.viewDate.year()),a.createElement("th",{className:"next",onClick:this.props.addYear},"›"))),a.createElement("tbody",null,a.createElement("tr",null,a.createElement("td",{colSpan:"7"},this.renderMonths())))))}}),e.exports=r},function(e,t,s){var r,a;a=s(2),classNames=s(7),r=a.createClass({displayName:"DateTimePickerYears",propTypes:{subtractDecade:a.PropTypes.func.isRequired,addDecade:a.PropTypes.func.isRequired,viewDate:a.PropTypes.object.isRequired,selectedDate:a.PropTypes.object,setViewYear:a.PropTypes.func.isRequired},renderYears:function(){var e,t,s,r;for(r=[],s=10*parseInt(this.props.viewDate.year()/10,10),s--,t=-1;11>t;)e={year:!0,old:-1===t|10===t,active:this.props.viewDate.year()===s},r.push(a.createElement("span",{key:s,className:classNames(e),onClick:this.props.setViewYear},s)),s++,t++;return r},render:function(){var e;return e=10*parseInt(this.props.viewDate.year()/10,10),a.createElement("div",{className:"datepicker-years",style:{display:"block"}},a.createElement("table",{className:"table-condensed"},a.createElement("thead",null,a.createElement("tr",null,a.createElement("th",{className:"prev",onClick:this.props.subtractDecade},"‹"),a.createElement("th",{className:"switch",colSpan:"5"},e," - ",e+9),a.createElement("th",{className:"next",onClick:this.props.addDecade},"›"))),a.createElement("tbody",null,a.createElement("tr",null,a.createElement("td",{colSpan:"7"},this.renderYears())))))}}),e.exports=r},function(e,t,s){var r,a;a=s(2),Glyphicon=s(4).Glyphicon,r=a.createClass({displayName:"DateTimePickerMinutes",propTypes:{setSelectedMinute:a.PropTypes.func.isRequired,onSwitch:a.PropTypes.func.isRequired},renderSwitchButton:function(){return this.props.mode===Constants.MODE_TIME?a.createElement("ul",{className:"list-unstyled"},a.createElement("li",null,a.createElement("span",{className:"btn picker-switch",style:{width:"100%"},onClick:this.props.onSwitch},a.createElement(Glyphicon,{glyph:"time"})))):null},render:function(){return a.createElement("div",{className:"timepicker-minutes","data-action":"selectMinute",style:{display:"block"}},this.renderSwitchButton(),a.createElement("table",{className:"table-condensed"},a.createElement("tbody",null,a.createElement("tr",null,a.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"00"),a.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"05"),a.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"10"),a.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"15")),a.createElement("tr",null,a.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"20"),a.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"25"),a.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"30"),a.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"35")),a.createElement("tr",null,a.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"40"),a.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"45"),a.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"50"),a.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"55")))))}}),e.exports=r},function(e,t,s){var r,a;a=s(2),Glyphicon=s(4).Glyphicon,r=a.createClass({displayName:"DateTimePickerHours",propTypes:{setSelectedHour:a.PropTypes.func.isRequired,onSwitch:a.PropTypes.func.isRequired},renderSwitchButton:function(){return this.props.mode===Constants.MODE_TIME?a.createElement("ul",{className:"list-unstyled"},a.createElement("li",null,a.createElement("span",{className:"btn picker-switch",style:{width:"100%"},onClick:this.props.onSwitch},a.createElement(Glyphicon,{glyph:"time"})))):null},render:function(){return a.createElement("div",{className:"timepicker-hours","data-action":"selectHour",style:{display:"block"}},this.renderSwitchButton(),a.createElement("table",{className:"table-condensed"},a.createElement("tbody",null,a.createElement("tr",null,a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"01"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"02"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"03"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"04")),a.createElement("tr",null,a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"05"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"06"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"07"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"08")),a.createElement("tr",null,a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"09"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"10"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"11"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"12")),a.createElement("tr",null,a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"13"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"14"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"15"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"16")),a.createElement("tr",null,a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"17"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"18"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"19"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"20")),a.createElement("tr",null,a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"21"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"22"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"23"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"24")))))}}),e.exports=r}])}); \ No newline at end of file +function r(){for(var e,t="",s=0;sm||l.year()===m&&l.month()>c)&&(s["new"]=!0),this.props.selectedDate&&l.isSame(i({y:e.year(),M:e.month(),d:e.date()}))&&(s.active=!0),this.props.showToday&&l.isSame(i(),"day")&&(s.today=!0),(u&&l.isBefore(u)||d&&l.isAfter(d))&&(s.disabled=!0),this.props.daysOfWeekDisabled)for(f=this.props.daysOfWeekDisabled,D=0,y=f.length;y>D;D++)if(n=f[D],l.day()===this.props.daysOfWeekDisabled[n]){s.disabled=!0;break}t.push(a.createElement("td",{key:l.month()+"-"+l.date(),className:classNames(s),onClick:this.props.setSelectedDate},l.date())),l.weekday()===i().endOf("week").weekday()&&(h=a.createElement("tr",{key:l.month()+"-"+l.date()},t),o.push(h),t=[]),l.add(1,"d")}return o},render:function(){return a.createElement("div",{className:"datepicker-days",style:{display:"block"}},a.createElement("table",{className:"table-condensed"},a.createElement("thead",null,a.createElement("tr",null,a.createElement("th",{className:"prev",onClick:this.props.subtractMonth},"‹"),a.createElement("th",{className:"switch",colSpan:"5",onClick:this.props.showMonths},i.months()[this.props.viewDate.month()]," ",this.props.viewDate.year()),a.createElement("th",{className:"next",onClick:this.props.addMonth},"›")),a.createElement("tr",null,a.createElement("th",{className:"dow"},"Su"),a.createElement("th",{className:"dow"},"Mo"),a.createElement("th",{className:"dow"},"Tu"),a.createElement("th",{className:"dow"},"We"),a.createElement("th",{className:"dow"},"Th"),a.createElement("th",{className:"dow"},"Fr"),a.createElement("th",{className:"dow"},"Sa"))),a.createElement("tbody",null,this.renderDays())))}}),e.exports=r},function(e,t,s){var r,a,i;a=s(2),classNames=s(7),i=s(3),r=a.createClass({displayName:"DateTimePickerMonths",propTypes:{subtractYear:a.PropTypes.func.isRequired,addYear:a.PropTypes.func.isRequired,viewDate:a.PropTypes.object.isRequired,selectedDate:a.PropTypes.object,showYears:a.PropTypes.func.isRequired,setViewMonth:a.PropTypes.func.isRequired},getSelectedDate:function(){return this.props.selectedDate?this.props.selectedDate:this.props.viewDate},renderMonths:function(){var e,t,s,r,o;for(s=this.getSelectedDate().month(),o=i.monthsShort(),t=0,r=[];12>t;)e={month:!0,active:t===s&&this.props.viewDate.year()===this.getSelectedDate().year()},r.push(a.createElement("span",{key:t,className:classNames(e),onClick:this.props.setViewMonth},o[t])),t++;return r},render:function(){return a.createElement("div",{className:"datepicker-months",style:{display:"block"}},a.createElement("table",{className:"table-condensed"},a.createElement("thead",null,a.createElement("tr",null,a.createElement("th",{className:"prev",onClick:this.props.subtractYear},"‹"),a.createElement("th",{className:"switch",colSpan:"5",onClick:this.props.showYears},this.props.viewDate.year()),a.createElement("th",{className:"next",onClick:this.props.addYear},"›"))),a.createElement("tbody",null,a.createElement("tr",null,a.createElement("td",{colSpan:"7"},this.renderMonths())))))}}),e.exports=r},function(e,t,s){var r,a;a=s(2),classNames=s(7),r=a.createClass({displayName:"DateTimePickerYears",propTypes:{subtractDecade:a.PropTypes.func.isRequired,addDecade:a.PropTypes.func.isRequired,viewDate:a.PropTypes.object.isRequired,selectedDate:a.PropTypes.object,setViewYear:a.PropTypes.func.isRequired},renderYears:function(){var e,t,s,r;for(r=[],s=10*parseInt(this.props.viewDate.year()/10,10),s--,t=-1;11>t;)e={year:!0,old:-1===t|10===t,active:this.props.viewDate.year()===s},r.push(a.createElement("span",{key:s,className:classNames(e),onClick:this.props.setViewYear},s)),s++,t++;return r},render:function(){var e;return e=10*parseInt(this.props.viewDate.year()/10,10),a.createElement("div",{className:"datepicker-years",style:{display:"block"}},a.createElement("table",{className:"table-condensed"},a.createElement("thead",null,a.createElement("tr",null,a.createElement("th",{className:"prev",onClick:this.props.subtractDecade},"‹"),a.createElement("th",{className:"switch",colSpan:"5"},e," - ",e+9),a.createElement("th",{className:"next",onClick:this.props.addDecade},"›"))),a.createElement("tbody",null,a.createElement("tr",null,a.createElement("td",{colSpan:"7"},this.renderYears())))))}}),e.exports=r},function(e,t,s){var r,a;a=s(2),Glyphicon=s(4).Glyphicon,r=a.createClass({displayName:"DateTimePickerMinutes",propTypes:{setSelectedMinute:a.PropTypes.func.isRequired,onSwitch:a.PropTypes.func.isRequired},renderSwitchButton:function(){return this.props.mode===Constants.MODE_TIME?a.createElement("ul",{className:"list-unstyled"},a.createElement("li",null,a.createElement("span",{className:"btn picker-switch",style:{width:"100%"},onClick:this.props.onSwitch},a.createElement(Glyphicon,{glyph:"time"})))):null},render:function(){return a.createElement("div",{className:"timepicker-minutes","data-action":"selectMinute",style:{display:"block"}},this.renderSwitchButton(),a.createElement("table",{className:"table-condensed"},a.createElement("tbody",null,a.createElement("tr",null,a.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"00"),a.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"05"),a.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"10"),a.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"15")),a.createElement("tr",null,a.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"20"),a.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"25"),a.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"30"),a.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"35")),a.createElement("tr",null,a.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"40"),a.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"45"),a.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"50"),a.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"55")))))}}),e.exports=r},function(e,t,s){var r,a;a=s(2),Glyphicon=s(4).Glyphicon,r=a.createClass({displayName:"DateTimePickerHours",propTypes:{setSelectedHour:a.PropTypes.func.isRequired,onSwitch:a.PropTypes.func.isRequired},renderSwitchButton:function(){return this.props.mode===Constants.MODE_TIME?a.createElement("ul",{className:"list-unstyled"},a.createElement("li",null,a.createElement("span",{className:"btn picker-switch",style:{width:"100%"},onClick:this.props.onSwitch},a.createElement(Glyphicon,{glyph:"time"})))):null},render:function(){return a.createElement("div",{className:"timepicker-hours","data-action":"selectHour",style:{display:"block"}},this.renderSwitchButton(),a.createElement("table",{className:"table-condensed"},a.createElement("tbody",null,a.createElement("tr",null,a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"01"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"02"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"03"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"04")),a.createElement("tr",null,a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"05"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"06"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"07"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"08")),a.createElement("tr",null,a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"09"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"10"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"11"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"12")),a.createElement("tr",null,a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"13"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"14"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"15"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"16")),a.createElement("tr",null,a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"17"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"18"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"19"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"20")),a.createElement("tr",null,a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"21"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"22"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"23"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"24")))))}}),e.exports=r}])}); \ No newline at end of file diff --git a/examples/bootstrap-datetimepicker.min.css b/examples/bootstrap-datetimepicker.min.css index 7a80a734..7efd9894 100644 --- a/examples/bootstrap-datetimepicker.min.css +++ b/examples/bootstrap-datetimepicker.min.css @@ -4,9 +4,10 @@ * https://github.com/Eonasdan/bootstrap-datetimepicker/ */.bootstrap-datetimepicker-widget{top:0;left:0;width:250px;padding:4px;margin-top:1px;z-index:99999!important;border-radius:4px}.bootstrap-datetimepicker-widget.timepicker-sbs{width:600px}.bootstrap-datetimepicker-widget.bottom:before{content:'';display:inline-block;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:7px solid #ccc;border-bottom-color:rgba(0,0,0,.2);position:absolute;top:-7px;left:7px}.bootstrap-datetimepicker-widget.bottom:after{content:'';display:inline-block;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid #fff;position:absolute;top:-6px;left:8px}.bootstrap-datetimepicker-widget.top:before{content:'';display:inline-block;border-left:7px solid transparent;border-right:7px solid transparent;border-top:7px solid #ccc;border-top-color:rgba(0,0,0,.2);position:absolute;bottom:-7px;left:6px}.bootstrap-datetimepicker-widget.top:after{content:'';display:inline-block;border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid #fff;position:absolute;bottom:-6px;left:7px}.bootstrap-datetimepicker-widget .dow{width:14.2857%}.bootstrap-datetimepicker-widget.pull-right:before{left:auto;right:6px}.bootstrap-datetimepicker-widget.pull-right:after{left:auto;right:7px}.bootstrap-datetimepicker-widget>ul{list-style-type:none;margin:0}.bootstrap-datetimepicker-widget a[data-action]{padding:6px 0}.bootstrap-datetimepicker-widget a[data-action]:active{box-shadow:none}.bootstrap-datetimepicker-widget .timepicker-hour,.bootstrap-datetimepicker-widget .timepicker-minute,.bootstrap-datetimepicker-widget .timepicker-second{width:54px;font-weight:700;font-size:1.2em;margin:0}.bootstrap-datetimepicker-widget button[data-action]{padding:6px}.bootstrap-datetimepicker-widget table[data-hour-format="12"] .separator{width:4px;padding:0;margin:0}.bootstrap-datetimepicker-widget .datepicker>div{display:none}.bootstrap-datetimepicker-widget .picker-switch{text-align:center}.bootstrap-datetimepicker-widget table{width:100%;margin:0}.bootstrap-datetimepicker-widget td,.bootstrap-datetimepicker-widget th{text-align:center;border-radius:4px}.bootstrap-datetimepicker-widget td{height:54px;line-height:54px;width:54px}.bootstrap-datetimepicker-widget td.cw{font-size:10px;height:20px;line-height:20px;color:#777}.bootstrap-datetimepicker-widget td.day{height:20px;line-height:20px;width:20px}.bootstrap-datetimepicker-widget td.day:hover,.bootstrap-datetimepicker-widget td.hour:hover,.bootstrap-datetimepicker-widget td.minute:hover,.bootstrap-datetimepicker-widget td.second:hover{background:#eee;cursor:pointer}.bootstrap-datetimepicker-widget td.old,.bootstrap-datetimepicker-widget td.new{color:#777}.bootstrap-datetimepicker-widget td.today{position:relative}.bootstrap-datetimepicker-widget td.today:before{content:'';display:inline-block;border-left:7px solid transparent;border-bottom:7px solid #428bca;border-top-color:rgba(0,0,0,.2);position:absolute;bottom:4px;right:4px}.bootstrap-datetimepicker-widget td.active,.bootstrap-datetimepicker-widget td.active:hover{background-color:#428bca;color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,.25)}.bootstrap-datetimepicker-widget td.active.today:before{border-bottom-color:#fff}.bootstrap-datetimepicker-widget td.disabled,.bootstrap-datetimepicker-widget td.disabled:hover{background:0 0;color:#777;cursor:not-allowed}.bootstrap-datetimepicker-widget td span{display:inline-block;width:54px;height:54px;line-height:54px;margin:2px 1.5px;cursor:pointer;border-radius:4px}.bootstrap-datetimepicker-widget td span:hover{background:#eee}.bootstrap-datetimepicker-widget td span.active{background-color:#428bca;color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,.25)}.bootstrap-datetimepicker-widget td span.old{color:#777}.bootstrap-datetimepicker-widget td span.disabled,.bootstrap-datetimepicker-widget td span.disabled:hover{background:0 0;color:#777;cursor:not-allowed}.bootstrap-datetimepicker-widget th{height:20px;line-height:20px;width:20px}.bootstrap-datetimepicker-widget th.picker-switch{width:145px}.bootstrap-datetimepicker-widget th.next,.bootstrap-datetimepicker-widget th.prev{font-size:21px}.bootstrap-datetimepicker-widget th.disabled,.bootstrap-datetimepicker-widget th.disabled:hover{background:0 0;color:#777;cursor:not-allowed}.bootstrap-datetimepicker-widget thead tr:first-child th{cursor:pointer}.bootstrap-datetimepicker-widget thead tr:first-child th:hover{background:#eee}.input-group.date .input-group-addon span{display:block;cursor:pointer;width:16px;height:16px}.bootstrap-datetimepicker-widget.left-oriented:before{left:auto;right:6px}.bootstrap-datetimepicker-widget.left-oriented:after{left:auto;right:7px}.bootstrap-datetimepicker-widget ul.list-unstyled li div.timepicker div.timepicker-picker table.table-condensed tbody>tr>td{padding:0!important}@media screen and (max-width:767px){.bootstrap-datetimepicker-widget.timepicker-sbs{width:283px}} .input-group.date span.input-group-clear { + cursor: pointer; position: absolute; z-index: 10; - right: 11%; + left: calc(100% - 57px); + color: #dddddd; line-height: 32px; - cursor: pointer; } \ No newline at end of file diff --git a/src/DateTimeField.jsx b/src/DateTimeField.jsx index f544569f..bfe142c7 100644 --- a/src/DateTimeField.jsx +++ b/src/DateTimeField.jsx @@ -51,6 +51,16 @@ DateTimeField = React.createClass({ return "MM/DD/YY h:mm A"; } }, + getInitialViewDate: function(props) { + props = props ? props : this.props; + if (props.value) { + return moment(props.value, props.format, true); + } else if (props.minDate) { + return props.minDate.startOf("month"); + } else { + return props.dateTime ? moment(props.dateTime, props.format, true).startOf("month") : moment().startOf("month"); + } + }, getInitialState: function() { return { showDatePicker: this.props.mode !== Constants.MODE_TIME, @@ -63,11 +73,19 @@ DateTimeField = React.createClass({ left: -9999, zIndex: '9999 !important' }, - viewDate: this.props.dateTime ? moment(this.props.dateTime, this.props.format, true).startOf("month") : moment().startOf("month"), + viewDate: this.getInitialViewDate(), selectedDate: this.props.value ? moment(this.props.value, this.props.format, true) : null, inputValue: typeof this.props.value != 'undefined' ? moment(this.props.value, this.props.format, true).format(this.resolvePropsInputFormat()) : null }; }, + clearDate: function() { + this.state.selectedDate = null; + this.state.inputValue = null; + this.state.viewDate = this.getInitialViewDate(); + this.forceUpdate(function() { + this.props.onChange(null); + }); + }, getCurrentWorkingDate: function() { return this.state.selectedDate ? this.state.selectedDate : this.state.viewDate; }, @@ -233,14 +251,6 @@ DateTimeField = React.createClass({ showTimePicker: !this.state.showTimePicker }); }, - clearDate: function() { - this.state.selectedDate = null; - this.state.inputValue = null; - this.state.viewDate = moment().startOf('month'); - this.forceUpdate(function() { - this.props.onChange(null); - }); - }, onClick: function() { if(this.props.disabled) return; var classes, gBCR, offset, placePosition, scrollTop, styles; From 45d6ffbb94c3b60c7e091f1eb21150bb006435a3 Mon Sep 17 00:00:00 2001 From: Alejandro Sellero Date: Wed, 27 May 2015 09:38:38 +0200 Subject: [PATCH 09/16] - Sending selectedDate only when necessary --- dist/react-bootstrap-datetimepicker.js | 389 +++++++++++---------- dist/react-bootstrap-datetimepicker.min.js | 4 +- examples/basic/basic.jsx | 6 +- package.json | 2 +- src/DateTimeField.jsx | 7 +- src/DateTimePicker.jsx | 1 - src/DateTimePickerTime.jsx | 9 +- src/DateTimePickerYears.jsx | 5 +- 8 files changed, 221 insertions(+), 202 deletions(-) diff --git a/dist/react-bootstrap-datetimepicker.js b/dist/react-bootstrap-datetimepicker.js index 1659e4bd..b57ba140 100644 --- a/dist/react-bootstrap-datetimepicker.js +++ b/dist/react-bootstrap-datetimepicker.js @@ -114,6 +114,16 @@ return /******/ (function(modules) { // webpackBootstrap return "MM/DD/YY h:mm A"; } }, + getInitialViewDate: function(props) { + props = props ? props : this.props; + if (props.value) { + return moment(props.value, props.format, true); + } else if (props.minDate) { + return props.minDate.startOf("month"); + } else { + return props.dateTime ? moment(props.dateTime, props.format, true).startOf("month") : moment().startOf("month"); + } + }, getInitialState: function() { return { showDatePicker: this.props.mode !== Constants.MODE_TIME, @@ -126,21 +136,33 @@ return /******/ (function(modules) { // webpackBootstrap left: -9999, zIndex: '9999 !important' }, - viewDate: this.props.dateTime ? moment(this.props.dateTime, this.props.format, true).startOf("month") : moment().startOf("month"), + viewDate: this.getInitialViewDate(), selectedDate: this.props.value ? moment(this.props.value, this.props.format, true) : null, inputValue: typeof this.props.value != 'undefined' ? moment(this.props.value, this.props.format, true).format(this.resolvePropsInputFormat()) : null }; }, + clearDate: function() { + this.state.selectedDate = null; + this.state.inputValue = null; + this.state.viewDate = this.getInitialViewDate(); + this.forceUpdate(function() { + this.props.onChange(null); + }); + }, getCurrentWorkingDate: function() { return this.state.selectedDate ? this.state.selectedDate : this.state.viewDate; }, componentWillReceiveProps: function(nextProps) { if(this.props.value !== nextProps.value) { return this.setState({ - viewDate: nextProps.dateTime ? moment(nextProps.dateTime, nextProps.format, true).startOf("month") : moment().startOf("month"), + viewDate: this.getInitialViewDate(nextProps), selectedDate: nextProps.value ? moment(nextProps.value, nextProps.format, true) : null, inputValue: typeof nextProps.value != 'undefined' ? moment(nextProps.value, nextProps.format, true).format(this.resolvePropsInputFormat(nextProps)) : null }); + } else if(this.props.minDate !== nextProps.minDate) { + return this.setState({ + viewDate: this.getInitialViewDate(nextProps) + }); } }, onChange: function(event) { @@ -172,6 +194,7 @@ return /******/ (function(modules) { // webpackBootstrap this.closePicker(); this.props.onChange(this.getCurrentWorkingDate().format(this.props.format)); return this.setState({ + viewDate: this.getCurrentWorkingDate(), inputValue: this.getCurrentWorkingDate().format(this.state.inputFormat) }); }); @@ -296,14 +319,6 @@ return /******/ (function(modules) { // webpackBootstrap showTimePicker: !this.state.showTimePicker }); }, - clearDate: function() { - this.state.selectedDate = null; - this.state.inputValue = null; - this.state.viewDate = moment().startOf('month'); - this.forceUpdate(function() { - this.props.onChange(null); - }); - }, onClick: function() { if(this.props.disabled) return; var classes, gBCR, offset, placePosition, scrollTop, styles; @@ -644,11 +659,11 @@ return /******/ (function(modules) { // webpackBootstrap React = __webpack_require__(2); - DateTimePickerDays = __webpack_require__(12); + DateTimePickerDays = __webpack_require__(10); - DateTimePickerMonths = __webpack_require__(13); + DateTimePickerMonths = __webpack_require__(11); - DateTimePickerYears = __webpack_require__(14); + DateTimePickerYears = __webpack_require__(12); DateTimePickerDate = React.createClass({displayName: "DateTimePickerDate", propTypes: { @@ -793,9 +808,9 @@ return /******/ (function(modules) { // webpackBootstrap React = __webpack_require__(2); - DateTimePickerMinutes = __webpack_require__(10); + DateTimePickerMinutes = __webpack_require__(13); - DateTimePickerHours = __webpack_require__(11); + DateTimePickerHours = __webpack_require__(14); Glyphicon = __webpack_require__(4).Glyphicon; @@ -916,176 +931,6 @@ return /******/ (function(modules) { // webpackBootstrap /***/ }, /* 10 */ -/***/ function(module, exports, __webpack_require__) { - - var DateTimePickerMinutes, React; - - React = __webpack_require__(2); - Glyphicon = __webpack_require__(4).Glyphicon; - - DateTimePickerMinutes = React.createClass({displayName: "DateTimePickerMinutes", - propTypes: { - setSelectedMinute: React.PropTypes.func.isRequired, - onSwitch: React.PropTypes.func.isRequired - }, - renderSwitchButton: function() { - return this.props.mode === Constants.MODE_TIME ? - ( - React.createElement("ul", {className: "list-unstyled"}, - React.createElement("li", null, - React.createElement("span", {className: "btn picker-switch", style: {width:'100%'}, onClick: this.props.onSwitch}, React.createElement(Glyphicon, {glyph: "time"})) - ) - ) - ) : - null; - }, - render: function() { - return ( - React.createElement("div", {className: "timepicker-minutes", "data-action": "selectMinute", style: {display: 'block'}}, - this.renderSwitchButton(), - React.createElement("table", {className: "table-condensed"}, - React.createElement("tbody", null, - React.createElement("tr", null, - React.createElement("td", {className: "minute", onClick: this.props.setSelectedMinute}, "00"), - - React.createElement("td", {className: "minute", onClick: this.props.setSelectedMinute}, "05"), - - React.createElement("td", {className: "minute", onClick: this.props.setSelectedMinute}, "10"), - - React.createElement("td", {className: "minute", onClick: this.props.setSelectedMinute}, "15") - ), - - React.createElement("tr", null, - React.createElement("td", {className: "minute", onClick: this.props.setSelectedMinute}, "20"), - - React.createElement("td", {className: "minute", onClick: this.props.setSelectedMinute}, "25"), - - React.createElement("td", {className: "minute", onClick: this.props.setSelectedMinute}, "30"), - - React.createElement("td", {className: "minute", onClick: this.props.setSelectedMinute}, "35") - ), - - React.createElement("tr", null, - React.createElement("td", {className: "minute", onClick: this.props.setSelectedMinute}, "40"), - - React.createElement("td", {className: "minute", onClick: this.props.setSelectedMinute}, "45"), - - React.createElement("td", {className: "minute", onClick: this.props.setSelectedMinute}, "50"), - - React.createElement("td", {className: "minute", onClick: this.props.setSelectedMinute}, "55") - ) - ) - ) - ) - ); - } - }); - - module.exports = DateTimePickerMinutes; - - -/***/ }, -/* 11 */ -/***/ function(module, exports, __webpack_require__) { - - var DateTimePickerHours, React; - - React = __webpack_require__(2); - Glyphicon = __webpack_require__(4).Glyphicon; - - DateTimePickerHours = React.createClass({displayName: "DateTimePickerHours", - propTypes: { - setSelectedHour: React.PropTypes.func.isRequired, - onSwitch: React.PropTypes.func.isRequired - }, - renderSwitchButton: function() { - return this.props.mode === Constants.MODE_TIME ? - ( - React.createElement("ul", {className: "list-unstyled"}, - React.createElement("li", null, - React.createElement("span", {className: "btn picker-switch", style: {width:'100%'}, onClick: this.props.onSwitch}, React.createElement(Glyphicon, {glyph: "time"})) - ) - ) - ) : - null; - }, - render: function() { - return ( - React.createElement("div", {className: "timepicker-hours", "data-action": "selectHour", style: {display: 'block'}}, - this.renderSwitchButton(), - React.createElement("table", {className: "table-condensed"}, - React.createElement("tbody", null, - React.createElement("tr", null, - React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "01"), - - React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "02"), - - React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "03"), - - React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "04") - ), - - React.createElement("tr", null, - React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "05"), - - React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "06"), - - React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "07"), - - React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "08") - ), - - React.createElement("tr", null, - React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "09"), - - React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "10"), - - React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "11"), - - React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "12") - ), - - React.createElement("tr", null, - React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "13"), - - React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "14"), - - React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "15"), - - React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "16") - ), - - React.createElement("tr", null, - React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "17"), - - React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "18"), - - React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "19"), - - React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "20") - ), - - React.createElement("tr", null, - React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "21"), - - React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "22"), - - React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "23"), - - React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "24") - ) - ) - ) - ) - ); - } - }); - - module.exports = DateTimePickerHours; - - -/***/ }, -/* 12 */ /***/ function(module, exports, __webpack_require__) { var DateTimePickerDays, React, moment; @@ -1216,7 +1061,7 @@ return /******/ (function(modules) { // webpackBootstrap /***/ }, -/* 13 */ +/* 11 */ /***/ function(module, exports, __webpack_require__) { var DateTimePickerMonths, React, moment; @@ -1283,7 +1128,7 @@ return /******/ (function(modules) { // webpackBootstrap /***/ }, -/* 14 */ +/* 12 */ /***/ function(module, exports, __webpack_require__) { var DateTimePickerYears, React; @@ -1347,6 +1192,176 @@ return /******/ (function(modules) { // webpackBootstrap module.exports = DateTimePickerYears; +/***/ }, +/* 13 */ +/***/ function(module, exports, __webpack_require__) { + + var DateTimePickerMinutes, React; + + React = __webpack_require__(2); + Glyphicon = __webpack_require__(4).Glyphicon; + + DateTimePickerMinutes = React.createClass({displayName: "DateTimePickerMinutes", + propTypes: { + setSelectedMinute: React.PropTypes.func.isRequired, + onSwitch: React.PropTypes.func.isRequired + }, + renderSwitchButton: function() { + return this.props.mode === Constants.MODE_TIME ? + ( + React.createElement("ul", {className: "list-unstyled"}, + React.createElement("li", null, + React.createElement("span", {className: "btn picker-switch", style: {width:'100%'}, onClick: this.props.onSwitch}, React.createElement(Glyphicon, {glyph: "time"})) + ) + ) + ) : + null; + }, + render: function() { + return ( + React.createElement("div", {className: "timepicker-minutes", "data-action": "selectMinute", style: {display: 'block'}}, + this.renderSwitchButton(), + React.createElement("table", {className: "table-condensed"}, + React.createElement("tbody", null, + React.createElement("tr", null, + React.createElement("td", {className: "minute", onClick: this.props.setSelectedMinute}, "00"), + + React.createElement("td", {className: "minute", onClick: this.props.setSelectedMinute}, "05"), + + React.createElement("td", {className: "minute", onClick: this.props.setSelectedMinute}, "10"), + + React.createElement("td", {className: "minute", onClick: this.props.setSelectedMinute}, "15") + ), + + React.createElement("tr", null, + React.createElement("td", {className: "minute", onClick: this.props.setSelectedMinute}, "20"), + + React.createElement("td", {className: "minute", onClick: this.props.setSelectedMinute}, "25"), + + React.createElement("td", {className: "minute", onClick: this.props.setSelectedMinute}, "30"), + + React.createElement("td", {className: "minute", onClick: this.props.setSelectedMinute}, "35") + ), + + React.createElement("tr", null, + React.createElement("td", {className: "minute", onClick: this.props.setSelectedMinute}, "40"), + + React.createElement("td", {className: "minute", onClick: this.props.setSelectedMinute}, "45"), + + React.createElement("td", {className: "minute", onClick: this.props.setSelectedMinute}, "50"), + + React.createElement("td", {className: "minute", onClick: this.props.setSelectedMinute}, "55") + ) + ) + ) + ) + ); + } + }); + + module.exports = DateTimePickerMinutes; + + +/***/ }, +/* 14 */ +/***/ function(module, exports, __webpack_require__) { + + var DateTimePickerHours, React; + + React = __webpack_require__(2); + Glyphicon = __webpack_require__(4).Glyphicon; + + DateTimePickerHours = React.createClass({displayName: "DateTimePickerHours", + propTypes: { + setSelectedHour: React.PropTypes.func.isRequired, + onSwitch: React.PropTypes.func.isRequired + }, + renderSwitchButton: function() { + return this.props.mode === Constants.MODE_TIME ? + ( + React.createElement("ul", {className: "list-unstyled"}, + React.createElement("li", null, + React.createElement("span", {className: "btn picker-switch", style: {width:'100%'}, onClick: this.props.onSwitch}, React.createElement(Glyphicon, {glyph: "time"})) + ) + ) + ) : + null; + }, + render: function() { + return ( + React.createElement("div", {className: "timepicker-hours", "data-action": "selectHour", style: {display: 'block'}}, + this.renderSwitchButton(), + React.createElement("table", {className: "table-condensed"}, + React.createElement("tbody", null, + React.createElement("tr", null, + React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "01"), + + React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "02"), + + React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "03"), + + React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "04") + ), + + React.createElement("tr", null, + React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "05"), + + React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "06"), + + React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "07"), + + React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "08") + ), + + React.createElement("tr", null, + React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "09"), + + React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "10"), + + React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "11"), + + React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "12") + ), + + React.createElement("tr", null, + React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "13"), + + React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "14"), + + React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "15"), + + React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "16") + ), + + React.createElement("tr", null, + React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "17"), + + React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "18"), + + React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "19"), + + React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "20") + ), + + React.createElement("tr", null, + React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "21"), + + React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "22"), + + React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "23"), + + React.createElement("td", {className: "hour", onClick: this.props.setSelectedHour}, "24") + ) + ) + ) + ) + ); + } + }); + + module.exports = DateTimePickerHours; + + /***/ } /******/ ]) }); diff --git a/dist/react-bootstrap-datetimepicker.min.js b/dist/react-bootstrap-datetimepicker.min.js index b5e961f4..a1ed4772 100644 --- a/dist/react-bootstrap-datetimepicker.min.js +++ b/dist/react-bootstrap-datetimepicker.min.js @@ -1,6 +1,6 @@ -!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("React"),require("moment"),require("ReactBootstrap")):"function"==typeof define&&define.amd?define(["React","moment","ReactBootstrap"],t):"object"==typeof exports?exports.ReactBootstrapDatetimepicker=t(require("React"),require("moment"),require("ReactBootstrap")):e.ReactBootstrapDatetimepicker=t(e.React,e.moment,e.ReactBootstrap)}(this,function(e,t,s){return function(e){function t(r){if(s[r])return s[r].exports;var a=s[r]={exports:{},id:r,loaded:!1};return e[r].call(a.exports,a,a.exports,t),a.loaded=!0,a.exports}var s={};return t.m=e,t.c=s,t.p="",t(0)}([function(e,t,s){e.exports=s(1)},function(e,t,s){var r,a,i,o,n;o=s(2),classNames=s(7),a=s(5),n=s(3),i=s(4).Glyphicon,Constants=s(6),r=o.createClass({displayName:"DateTimeField",propTypes:{dateTime:o.PropTypes.string,value:o.PropTypes.string,onChange:o.PropTypes.func,format:o.PropTypes.string,inputProps:o.PropTypes.object,inputFormat:o.PropTypes.string,placeholder:o.PropTypes.string,mode:o.PropTypes.oneOf([Constants.MODE_DATE,Constants.MODE_DATETIME,Constants.MODE_TIME]),minDate:o.PropTypes.object,maxDate:o.PropTypes.object,clearable:o.PropTypes.bool,disabled:o.PropTypes.bool},getDefaultProps:function(){return{disabled:!1,clearable:!1,format:"x",showToday:!0,viewMode:"days",daysOfWeekDisabled:[],mode:Constants.MODE_DATETIME,placeholder:"Select a date",onChange:function(e){}}},resolvePropsInputFormat:function(e){if(e=e?e:this.props,e.inputFormat)return e.inputFormat;switch(e.mode){case Constants.MODE_TIME:return"h:mm A";case Constants.MODE_DATE:return"MM/DD/YY";default:return"MM/DD/YY h:mm A"}},getInitialState:function(){return{showDatePicker:this.props.mode!==Constants.MODE_TIME,showTimePicker:this.props.mode===Constants.MODE_TIME,inputFormat:this.resolvePropsInputFormat(),buttonIcon:this.props.mode===Constants.MODE_TIME?"time":"calendar",widgetStyle:{display:"block",position:"absolute",left:-9999,zIndex:"9999 !important"},viewDate:this.props.dateTime?n(this.props.dateTime,this.props.format,!0).startOf("month"):n().startOf("month"),selectedDate:this.props.value?n(this.props.value,this.props.format,!0):null,inputValue:"undefined"!=typeof this.props.value?n(this.props.value,this.props.format,!0).format(this.resolvePropsInputFormat()):null}},getCurrentWorkingDate:function(){return this.state.selectedDate?this.state.selectedDate:this.state.viewDate},componentWillReceiveProps:function(e){return this.props.value!==e.value?this.setState({viewDate:e.dateTime?n(e.dateTime,e.format,!0).startOf("month"):n().startOf("month"),selectedDate:e.value?n(e.value,e.format,!0):null,inputValue:"undefined"!=typeof e.value?n(e.value,e.format,!0).format(this.resolvePropsInputFormat(e)):null}):void 0},onChange:function(e){var t=null==e.target?e:e.target.value;return n(t,this.state.inputFormat,!0).isValid()&&this.setState({selectedDate:n(t,this.state.inputFormat,!0),viewDate:n(t,this.state.inputFormat,!0)}),this.setState({inputValue:t},function(){return this.props.onChange(n(this.state.inputValue,this.state.inputFormat,!0).format(this.props.format))})},setSelectedDate:function(e){var t=e.target;if(t.className&&!t.className.match(/disabled/g)){var s;return s=t.className.includes("new")?this.state.viewDate.month()+1:t.className.includes("old")?this.state.viewDate.month()-1:this.state.viewDate.month(),this.setState({selectedDate:this.state.viewDate.clone().month(s).date(parseInt(e.target.innerHTML)).hour(this.state.viewDate.hours()).minute(this.state.viewDate.minutes())},function(){return this.closePicker(),this.props.onChange(this.getCurrentWorkingDate().format(this.props.format)),this.setState({inputValue:this.getCurrentWorkingDate().format(this.state.inputFormat)})})}},setSelectedHour:function(e){return this.setState({selectedDate:this.getCurrentWorkingDate().clone().hour(parseInt(e.target.innerHTML)).minute(this.getCurrentWorkingDate().minutes())},function(){return this.closePicker(),this.props.onChange(this.getCurrentWorkingDate().format(this.props.format)),this.setState({inputValue:this.getCurrentWorkingDate().format(this.state.inputFormat)})})},setSelectedMinute:function(e){return this.setState({selectedDate:this.getCurrentWorkingDate().clone().hour(this.state.viewDate.hours()).minute(parseInt(e.target.innerHTML))},function(){return this.closePicker(),this.props.onChange(this.state.selectedDate.format(this.props.format)),this.setState({inputValue:this.state.selectedDate.format(this.state.inputFormat)})})},setViewMonth:function(e){return this.setState({viewDate:this.state.viewDate.clone().month(e)})},setViewYear:function(e){return this.setState({viewDate:this.state.viewDate.clone().year(e)})},addMinute:function(){return this.setState({selectedDate:this.getCurrentWorkingDate().clone().add(1,"minutes")},function(){return this.props.onChange(this.getCurrentWorkingDate().format(this.props.format)),this.setState({inputValue:this.getCurrentWorkingDate().format(this.state.inputFormat),viewDate:this.getCurrentWorkingDate()})})},addHour:function(){return this.setState({selectedDate:this.getCurrentWorkingDate().clone().add(1,"hours")},function(){return this.props.onChange(this.getCurrentWorkingDate().format(this.props.format)),this.setState({inputValue:this.getCurrentWorkingDate().format(this.state.inputFormat),viewDate:this.getCurrentWorkingDate()})})},addMonth:function(){return this.setState({viewDate:this.state.viewDate.add(1,"months")})},addYear:function(){return this.setState({viewDate:this.state.viewDate.add(1,"years")})},addDecade:function(){return this.setState({viewDate:this.state.viewDate.add(10,"years")})},subtractMinute:function(){return this.setState({selectedDate:this.getCurrentWorkingDate().clone().subtract(1,"minutes")},function(){return this.props.onChange(this.getCurrentWorkingDate().format(this.props.format)),this.setState({inputValue:this.getCurrentWorkingDate().format(this.state.inputFormat),viewDate:this.getCurrentWorkingDate()})})},subtractHour:function(){return this.setState({selectedDate:this.getCurrentWorkingDate().clone().subtract(1,"hours")},function(){return this.props.onChange(this.getCurrentWorkingDate().format(this.props.format)),this.setState({inputValue:this.getCurrentWorkingDate().format(this.state.inputFormat),viewDate:this.getCurrentWorkingDate()})})},subtractMonth:function(){return this.setState({viewDate:this.state.viewDate.subtract(1,"months")})},subtractYear:function(){return this.setState({viewDate:this.state.viewDate.subtract(1,"years")})},subtractDecade:function(){return this.setState({viewDate:this.state.viewDate.subtract(10,"years")})},togglePeriod:function(){return this.onChange(this.getCurrentWorkingDate().hour()>12?this.getCurrentWorkingDate().clone().subtract(12,"hours").format(this.state.inputFormat):this.getCurrentWorkingDate().clone().add(12,"hours").format(this.state.inputFormat))},togglePicker:function(){return this.setState({showDatePicker:!this.state.showDatePicker,showTimePicker:!this.state.showTimePicker})},clearDate:function(){this.state.selectedDate=null,this.state.inputValue=null,this.state.viewDate=n().startOf("month"),this.forceUpdate(function(){this.props.onChange(null)})},onClick:function(){if(!this.props.disabled){var e,t,s,r,a,i;return this.state.showPicker?this.closePicker():(this.setState({showPicker:!0}),t=this.refs.dtpbutton.getDOMNode().getBoundingClientRect(),e={"bootstrap-datetimepicker-widget":!0,"dropdown-menu":!0},s={top:t.top+window.pageYOffset-document.documentElement.clientTop,left:t.left+window.pageXOffset-document.documentElement.clientLeft},s.top=s.top+this.refs.datetimepicker.getDOMNode().offsetHeight,a=void 0!==window.pageYOffset?window.pageYOffset:(document.documentElement||document.body.parentNode||document.body).scrollTop,r="up"===this.props.direction?"top":"bottom"===this.props.direction?"bottom":"auto"===this.props.direction?s.top+this.refs.widget.getDOMNode().offsetHeight>window.offsetHeight+a&&this.refs.widget.offsetHeight+this.refs.datetimepicker.getDOMNode().offsetHeight>s.top?"top":"bottom":void 0,"top"===r?(s.top=-this.refs.widget.getDOMNode().offsetHeight-this.getDOMNode().clientHeight-2,e.top=!0,e.bottom=!1,e["pull-right"]=!0):(s.top=40,e.top=!1,e.bottom=!0,e["pull-right"]=!0),i={display:"block",position:"absolute",top:s.top,left:"auto",right:40},this.setState({widgetStyle:i,widgetClasses:e}))}},closePicker:function(e){var t;return t=this.state.widgetStyle,t.left=-9999,t.display="none",this.setState({showPicker:!1,widgetStyle:t})},renderOverlay:function(){var e;return e={position:"fixed",top:0,bottom:0,left:0,right:0,zIndex:"999"},this.state.showPicker?o.createElement("div",{style:e,onClick:this.closePicker}):o.createElement("span",null)},render:function(){var e=classNames({"form-control":!0,placeholder:this.props.defaultText===this.state.inputValue});return o.createElement("div",null,this.renderOverlay(),o.createElement(a,{ref:"widget",widgetClasses:this.state.widgetClasses,widgetStyle:this.state.widgetStyle,showDatePicker:this.state.showDatePicker,showTimePicker:this.state.showTimePicker,viewDate:this.state.viewDate,selectedDate:this.state.selectedDate,showToday:this.props.showToday,viewMode:this.props.viewMode,daysOfWeekDisabled:this.props.daysOfWeekDisabled,mode:this.props.mode,minDate:this.props.minDate,maxDate:this.props.maxDate,addDecade:this.addDecade,addYear:this.addYear,addMonth:this.addMonth,addHour:this.addHour,addMinute:this.addMinute,subtractDecade:this.subtractDecade,subtractYear:this.subtractYear,subtractMonth:this.subtractMonth,subtractHour:this.subtractHour,subtractMinute:this.subtractMinute,setViewYear:this.setViewYear,setViewMonth:this.setViewMonth,setSelectedDate:this.setSelectedDate,setSelectedHour:this.setSelectedHour,setSelectedMinute:this.setSelectedMinute,togglePicker:this.togglePicker,togglePeriod:this.togglePeriod}),o.createElement("div",{className:"input-group date",ref:"datetimepicker"},o.createElement("input",o.__spread({type:"text",className:e,onChange:this.onChange,onFocus:this.onClick,disabled:this.props.disabled,value:this.state.inputValue,placeholder:this.props.placeholder},this.props.inputProps)),this.props.clearable&&this.state.selectedDate&&!this.props.disabled?o.createElement("span",{className:"input-group-clear",onClick:this.clearDate},"×"):null,o.createElement("span",{className:"input-group-addon",onClick:this.onClick,onBlur:this.onBlur,ref:"dtpbutton",disabled:this.props.disabled},o.createElement(i,{glyph:this.state.buttonIcon}))))}}),e.exports=r},function(t,s,r){t.exports=e},function(e,s,r){e.exports=t},function(e,t,r){e.exports=s},function(e,t,s){var r,a,i,o,n;n=s(2),classNames=s(7),a=s(8),i=s(9),o=s(4).Glyphicon,Constants=s(6),r=n.createClass({displayName:"DateTimePicker",propTypes:{showDatePicker:n.PropTypes.bool,showTimePicker:n.PropTypes.bool,subtractMonth:n.PropTypes.func.isRequired,addMonth:n.PropTypes.func.isRequired,viewDate:n.PropTypes.object.isRequired,selectedDate:n.PropTypes.object,showToday:n.PropTypes.bool,viewMode:n.PropTypes.oneOfType([n.PropTypes.string,n.PropTypes.number]),mode:n.PropTypes.oneOf([Constants.MODE_DATE,Constants.MODE_DATETIME,Constants.MODE_TIME]),daysOfWeekDisabled:n.PropTypes.array,setSelectedDate:n.PropTypes.func.isRequired,subtractYear:n.PropTypes.func.isRequired,addYear:n.PropTypes.func.isRequired,setViewMonth:n.PropTypes.func.isRequired,setViewYear:n.PropTypes.func.isRequired,subtractHour:n.PropTypes.func.isRequired,addHour:n.PropTypes.func.isRequired,subtractMinute:n.PropTypes.func.isRequired,addMinute:n.PropTypes.func.isRequired,addDecade:n.PropTypes.func.isRequired,subtractDecade:n.PropTypes.func.isRequired,togglePeriod:n.PropTypes.func.isRequired,minDate:n.PropTypes.object,maxDate:n.PropTypes.object},renderDatePicker:function(){return this.props.showDatePicker?n.createElement("li",null,n.createElement(a,{addMonth:this.props.addMonth,subtractMonth:this.props.subtractMonth,setSelectedDate:this.props.setSelectedDate,viewDate:this.props.viewDate,selectedDate:this.props.selectedDate,showToday:this.props.showToday,viewMode:this.props.viewMode,daysOfWeekDisabled:this.props.daysOfWeekDisabled,subtractYear:this.props.subtractYear,addYear:this.props.addYear,setViewMonth:this.props.setViewMonth,setViewYear:this.props.setViewYear,addDecade:this.props.addDecade,subtractDecade:this.props.subtractDecade,minDate:this.props.minDate,maxDate:this.props.maxDate})):void 0},renderTimePicker:function(){return this.props.showTimePicker?n.createElement("li",null,n.createElement(i,{viewDate:this.props.viewDate,selectedDate:this.props.selectedDate,setSelectedHour:this.props.setSelectedHour,setSelectedMinute:this.props.setSelectedMinute,addHour:this.props.addHour,subtractHour:this.props.subtractHour,addMinute:this.props.addMinute,subtractMinute:this.props.subtractMinute,togglePeriod:this.props.togglePeriod,mode:this.props.mode})):void 0},renderSwitchButton:function(){return this.props.mode===Constants.MODE_DATETIME?n.createElement("li",null,n.createElement("span",{className:"btn picker-switch",style:{width:"100%"},onClick:this.props.togglePicker},n.createElement(o,{glyph:this.props.showTimePicker?"calendar":"time"}))):null},render:function(){return n.createElement("div",{className:classNames(this.props.widgetClasses),style:this.props.widgetStyle},n.createElement("ul",{className:"list-unstyled"},this.renderDatePicker(),this.renderSwitchButton(),this.renderTimePicker()))}}),e.exports=r},function(e,t,s){e.exports={MODE_DATE:"date",MODE_DATETIME:"datetime",MODE_TIME:"time"}},function(e,t,s){/*! +!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("React"),require("moment"),require("ReactBootstrap")):"function"==typeof define&&define.amd?define(["React","moment","ReactBootstrap"],t):"object"==typeof exports?exports.ReactBootstrapDatetimepicker=t(require("React"),require("moment"),require("ReactBootstrap")):e.ReactBootstrapDatetimepicker=t(e.React,e.moment,e.ReactBootstrap)}(this,function(e,t,s){return function(e){function t(r){if(s[r])return s[r].exports;var a=s[r]={exports:{},id:r,loaded:!1};return e[r].call(a.exports,a,a.exports,t),a.loaded=!0,a.exports}var s={};return t.m=e,t.c=s,t.p="",t(0)}([function(e,t,s){e.exports=s(1)},function(e,t,s){var r,a,i,o,n;o=s(2),classNames=s(7),a=s(5),n=s(3),i=s(4).Glyphicon,Constants=s(6),r=o.createClass({displayName:"DateTimeField",propTypes:{dateTime:o.PropTypes.string,value:o.PropTypes.string,onChange:o.PropTypes.func,format:o.PropTypes.string,inputProps:o.PropTypes.object,inputFormat:o.PropTypes.string,placeholder:o.PropTypes.string,mode:o.PropTypes.oneOf([Constants.MODE_DATE,Constants.MODE_DATETIME,Constants.MODE_TIME]),minDate:o.PropTypes.object,maxDate:o.PropTypes.object,clearable:o.PropTypes.bool,disabled:o.PropTypes.bool},getDefaultProps:function(){return{disabled:!1,clearable:!1,format:"x",showToday:!0,viewMode:"days",daysOfWeekDisabled:[],mode:Constants.MODE_DATETIME,placeholder:"Select a date",onChange:function(e){}}},resolvePropsInputFormat:function(e){if(e=e?e:this.props,e.inputFormat)return e.inputFormat;switch(e.mode){case Constants.MODE_TIME:return"h:mm A";case Constants.MODE_DATE:return"MM/DD/YY";default:return"MM/DD/YY h:mm A"}},getInitialViewDate:function(e){return e=e?e:this.props,e.value?n(e.value,e.format,!0):e.minDate?e.minDate.startOf("month"):e.dateTime?n(e.dateTime,e.format,!0).startOf("month"):n().startOf("month")},getInitialState:function(){return{showDatePicker:this.props.mode!==Constants.MODE_TIME,showTimePicker:this.props.mode===Constants.MODE_TIME,inputFormat:this.resolvePropsInputFormat(),buttonIcon:this.props.mode===Constants.MODE_TIME?"time":"calendar",widgetStyle:{display:"block",position:"absolute",left:-9999,zIndex:"9999 !important"},viewDate:this.getInitialViewDate(),selectedDate:this.props.value?n(this.props.value,this.props.format,!0):null,inputValue:"undefined"!=typeof this.props.value?n(this.props.value,this.props.format,!0).format(this.resolvePropsInputFormat()):null}},clearDate:function(){this.state.selectedDate=null,this.state.inputValue=null,this.state.viewDate=this.getInitialViewDate(),this.forceUpdate(function(){this.props.onChange(null)})},getCurrentWorkingDate:function(){return this.state.selectedDate?this.state.selectedDate:this.state.viewDate},componentWillReceiveProps:function(e){return this.props.value!==e.value?this.setState({viewDate:this.getInitialViewDate(e),selectedDate:e.value?n(e.value,e.format,!0):null,inputValue:"undefined"!=typeof e.value?n(e.value,e.format,!0).format(this.resolvePropsInputFormat(e)):null}):this.props.minDate!==e.minDate?this.setState({viewDate:this.getInitialViewDate(e)}):void 0},onChange:function(e){var t=null==e.target?e:e.target.value;return n(t,this.state.inputFormat,!0).isValid()&&this.setState({selectedDate:n(t,this.state.inputFormat,!0),viewDate:n(t,this.state.inputFormat,!0)}),this.setState({inputValue:t},function(){return this.props.onChange(n(this.state.inputValue,this.state.inputFormat,!0).format(this.props.format))})},setSelectedDate:function(e){var t=e.target;if(t.className&&!t.className.match(/disabled/g)){var s;return s=t.className.includes("new")?this.state.viewDate.month()+1:t.className.includes("old")?this.state.viewDate.month()-1:this.state.viewDate.month(),this.setState({selectedDate:this.state.viewDate.clone().month(s).date(parseInt(e.target.innerHTML)).hour(this.state.viewDate.hours()).minute(this.state.viewDate.minutes())},function(){return this.closePicker(),this.props.onChange(this.getCurrentWorkingDate().format(this.props.format)),this.setState({viewDate:this.getCurrentWorkingDate(),inputValue:this.getCurrentWorkingDate().format(this.state.inputFormat)})})}},setSelectedHour:function(e){return this.setState({selectedDate:this.getCurrentWorkingDate().clone().hour(parseInt(e.target.innerHTML)).minute(this.getCurrentWorkingDate().minutes())},function(){return this.closePicker(),this.props.onChange(this.getCurrentWorkingDate().format(this.props.format)),this.setState({inputValue:this.getCurrentWorkingDate().format(this.state.inputFormat)})})},setSelectedMinute:function(e){return this.setState({selectedDate:this.getCurrentWorkingDate().clone().hour(this.state.viewDate.hours()).minute(parseInt(e.target.innerHTML))},function(){return this.closePicker(),this.props.onChange(this.state.selectedDate.format(this.props.format)),this.setState({inputValue:this.state.selectedDate.format(this.state.inputFormat)})})},setViewMonth:function(e){return this.setState({viewDate:this.state.viewDate.clone().month(e)})},setViewYear:function(e){return this.setState({viewDate:this.state.viewDate.clone().year(e)})},addMinute:function(){return this.setState({selectedDate:this.getCurrentWorkingDate().clone().add(1,"minutes")},function(){return this.props.onChange(this.getCurrentWorkingDate().format(this.props.format)),this.setState({inputValue:this.getCurrentWorkingDate().format(this.state.inputFormat),viewDate:this.getCurrentWorkingDate()})})},addHour:function(){return this.setState({selectedDate:this.getCurrentWorkingDate().clone().add(1,"hours")},function(){return this.props.onChange(this.getCurrentWorkingDate().format(this.props.format)),this.setState({inputValue:this.getCurrentWorkingDate().format(this.state.inputFormat),viewDate:this.getCurrentWorkingDate()})})},addMonth:function(){return this.setState({viewDate:this.state.viewDate.add(1,"months")})},addYear:function(){return this.setState({viewDate:this.state.viewDate.add(1,"years")})},addDecade:function(){return this.setState({viewDate:this.state.viewDate.add(10,"years")})},subtractMinute:function(){return this.setState({selectedDate:this.getCurrentWorkingDate().clone().subtract(1,"minutes")},function(){return this.props.onChange(this.getCurrentWorkingDate().format(this.props.format)),this.setState({inputValue:this.getCurrentWorkingDate().format(this.state.inputFormat),viewDate:this.getCurrentWorkingDate()})})},subtractHour:function(){return this.setState({selectedDate:this.getCurrentWorkingDate().clone().subtract(1,"hours")},function(){return this.props.onChange(this.getCurrentWorkingDate().format(this.props.format)),this.setState({inputValue:this.getCurrentWorkingDate().format(this.state.inputFormat),viewDate:this.getCurrentWorkingDate()})})},subtractMonth:function(){return this.setState({viewDate:this.state.viewDate.subtract(1,"months")})},subtractYear:function(){return this.setState({viewDate:this.state.viewDate.subtract(1,"years")})},subtractDecade:function(){return this.setState({viewDate:this.state.viewDate.subtract(10,"years")})},togglePeriod:function(){return this.onChange(this.getCurrentWorkingDate().hour()>12?this.getCurrentWorkingDate().clone().subtract(12,"hours").format(this.state.inputFormat):this.getCurrentWorkingDate().clone().add(12,"hours").format(this.state.inputFormat))},togglePicker:function(){return this.setState({showDatePicker:!this.state.showDatePicker,showTimePicker:!this.state.showTimePicker})},onClick:function(){if(!this.props.disabled){var e,t,s,r,a,i;return this.state.showPicker?this.closePicker():(this.setState({showPicker:!0}),t=this.refs.dtpbutton.getDOMNode().getBoundingClientRect(),e={"bootstrap-datetimepicker-widget":!0,"dropdown-menu":!0},s={top:t.top+window.pageYOffset-document.documentElement.clientTop,left:t.left+window.pageXOffset-document.documentElement.clientLeft},s.top=s.top+this.refs.datetimepicker.getDOMNode().offsetHeight,a=void 0!==window.pageYOffset?window.pageYOffset:(document.documentElement||document.body.parentNode||document.body).scrollTop,r="up"===this.props.direction?"top":"bottom"===this.props.direction?"bottom":"auto"===this.props.direction?s.top+this.refs.widget.getDOMNode().offsetHeight>window.offsetHeight+a&&this.refs.widget.offsetHeight+this.refs.datetimepicker.getDOMNode().offsetHeight>s.top?"top":"bottom":void 0,"top"===r?(s.top=-this.refs.widget.getDOMNode().offsetHeight-this.getDOMNode().clientHeight-2,e.top=!0,e.bottom=!1,e["pull-right"]=!0):(s.top=40,e.top=!1,e.bottom=!0,e["pull-right"]=!0),i={display:"block",position:"absolute",top:s.top,left:"auto",right:40},this.setState({widgetStyle:i,widgetClasses:e}))}},closePicker:function(e){var t;return t=this.state.widgetStyle,t.left=-9999,t.display="none",this.setState({showPicker:!1,widgetStyle:t})},renderOverlay:function(){var e;return e={position:"fixed",top:0,bottom:0,left:0,right:0,zIndex:"999"},this.state.showPicker?o.createElement("div",{style:e,onClick:this.closePicker}):o.createElement("span",null)},render:function(){var e=classNames({"form-control":!0,placeholder:this.props.defaultText===this.state.inputValue});return o.createElement("div",null,this.renderOverlay(),o.createElement(a,{ref:"widget",widgetClasses:this.state.widgetClasses,widgetStyle:this.state.widgetStyle,showDatePicker:this.state.showDatePicker,showTimePicker:this.state.showTimePicker,viewDate:this.state.viewDate,selectedDate:this.state.selectedDate,showToday:this.props.showToday,viewMode:this.props.viewMode,daysOfWeekDisabled:this.props.daysOfWeekDisabled,mode:this.props.mode,minDate:this.props.minDate,maxDate:this.props.maxDate,addDecade:this.addDecade,addYear:this.addYear,addMonth:this.addMonth,addHour:this.addHour,addMinute:this.addMinute,subtractDecade:this.subtractDecade,subtractYear:this.subtractYear,subtractMonth:this.subtractMonth,subtractHour:this.subtractHour,subtractMinute:this.subtractMinute,setViewYear:this.setViewYear,setViewMonth:this.setViewMonth,setSelectedDate:this.setSelectedDate,setSelectedHour:this.setSelectedHour,setSelectedMinute:this.setSelectedMinute,togglePicker:this.togglePicker,togglePeriod:this.togglePeriod}),o.createElement("div",{className:"input-group date",ref:"datetimepicker"},o.createElement("input",o.__spread({type:"text",className:e,onChange:this.onChange,onFocus:this.onClick,disabled:this.props.disabled,value:this.state.inputValue,placeholder:this.props.placeholder},this.props.inputProps)),this.props.clearable&&this.state.selectedDate&&!this.props.disabled?o.createElement("span",{className:"input-group-clear",onClick:this.clearDate},"×"):null,o.createElement("span",{className:"input-group-addon",onClick:this.onClick,onBlur:this.onBlur,ref:"dtpbutton",disabled:this.props.disabled},o.createElement(i,{glyph:this.state.buttonIcon}))))}}),e.exports=r},function(t,s,r){t.exports=e},function(e,s,r){e.exports=t},function(e,t,r){e.exports=s},function(e,t,s){var r,a,i,o,n;n=s(2),classNames=s(7),a=s(8),i=s(9),o=s(4).Glyphicon,Constants=s(6),r=n.createClass({displayName:"DateTimePicker",propTypes:{showDatePicker:n.PropTypes.bool,showTimePicker:n.PropTypes.bool,subtractMonth:n.PropTypes.func.isRequired,addMonth:n.PropTypes.func.isRequired,viewDate:n.PropTypes.object.isRequired,selectedDate:n.PropTypes.object,showToday:n.PropTypes.bool,viewMode:n.PropTypes.oneOfType([n.PropTypes.string,n.PropTypes.number]),mode:n.PropTypes.oneOf([Constants.MODE_DATE,Constants.MODE_DATETIME,Constants.MODE_TIME]),daysOfWeekDisabled:n.PropTypes.array,setSelectedDate:n.PropTypes.func.isRequired,subtractYear:n.PropTypes.func.isRequired,addYear:n.PropTypes.func.isRequired,setViewMonth:n.PropTypes.func.isRequired,setViewYear:n.PropTypes.func.isRequired,subtractHour:n.PropTypes.func.isRequired,addHour:n.PropTypes.func.isRequired,subtractMinute:n.PropTypes.func.isRequired,addMinute:n.PropTypes.func.isRequired,addDecade:n.PropTypes.func.isRequired,subtractDecade:n.PropTypes.func.isRequired,togglePeriod:n.PropTypes.func.isRequired,minDate:n.PropTypes.object,maxDate:n.PropTypes.object},renderDatePicker:function(){return this.props.showDatePicker?n.createElement("li",null,n.createElement(a,{addMonth:this.props.addMonth,subtractMonth:this.props.subtractMonth,setSelectedDate:this.props.setSelectedDate,viewDate:this.props.viewDate,selectedDate:this.props.selectedDate,showToday:this.props.showToday,viewMode:this.props.viewMode,daysOfWeekDisabled:this.props.daysOfWeekDisabled,subtractYear:this.props.subtractYear,addYear:this.props.addYear,setViewMonth:this.props.setViewMonth,setViewYear:this.props.setViewYear,addDecade:this.props.addDecade,subtractDecade:this.props.subtractDecade,minDate:this.props.minDate,maxDate:this.props.maxDate})):void 0},renderTimePicker:function(){return this.props.showTimePicker?n.createElement("li",null,n.createElement(i,{viewDate:this.props.viewDate,selectedDate:this.props.selectedDate,setSelectedHour:this.props.setSelectedHour,setSelectedMinute:this.props.setSelectedMinute,addHour:this.props.addHour,subtractHour:this.props.subtractHour,addMinute:this.props.addMinute,subtractMinute:this.props.subtractMinute,togglePeriod:this.props.togglePeriod,mode:this.props.mode})):void 0},renderSwitchButton:function(){return this.props.mode===Constants.MODE_DATETIME?n.createElement("li",null,n.createElement("span",{className:"btn picker-switch",style:{width:"100%"},onClick:this.props.togglePicker},n.createElement(o,{glyph:this.props.showTimePicker?"calendar":"time"}))):null},render:function(){return n.createElement("div",{className:classNames(this.props.widgetClasses),style:this.props.widgetStyle},n.createElement("ul",{className:"list-unstyled"},this.renderDatePicker(),this.renderSwitchButton(),this.renderTimePicker()))}}),e.exports=r},function(e,t,s){e.exports={MODE_DATE:"date",MODE_DATETIME:"datetime",MODE_TIME:"time"}},function(e,t,s){/*! Copyright (c) 2015 Jed Watson. Licensed under the MIT License (MIT), see http://jedwatson.github.io/classnames */ -function r(){for(var e,t="",s=0;sm||l.year()===m&&l.month()>c)&&(s["new"]=!0),this.props.selectedDate&&l.isSame(i({y:e.year(),M:e.month(),d:e.date()}))&&(s.active=!0),this.props.showToday&&l.isSame(i(),"day")&&(s.today=!0),(u&&l.isBefore(u)||d&&l.isAfter(d))&&(s.disabled=!0),this.props.daysOfWeekDisabled)for(f=this.props.daysOfWeekDisabled,D=0,y=f.length;y>D;D++)if(n=f[D],l.day()===this.props.daysOfWeekDisabled[n]){s.disabled=!0;break}t.push(a.createElement("td",{key:l.month()+"-"+l.date(),className:classNames(s),onClick:this.props.setSelectedDate},l.date())),l.weekday()===i().endOf("week").weekday()&&(h=a.createElement("tr",{key:l.month()+"-"+l.date()},t),o.push(h),t=[]),l.add(1,"d")}return o},render:function(){return a.createElement("div",{className:"datepicker-days",style:{display:"block"}},a.createElement("table",{className:"table-condensed"},a.createElement("thead",null,a.createElement("tr",null,a.createElement("th",{className:"prev",onClick:this.props.subtractMonth},"‹"),a.createElement("th",{className:"switch",colSpan:"5",onClick:this.props.showMonths},i.months()[this.props.viewDate.month()]," ",this.props.viewDate.year()),a.createElement("th",{className:"next",onClick:this.props.addMonth},"›")),a.createElement("tr",null,a.createElement("th",{className:"dow"},"Su"),a.createElement("th",{className:"dow"},"Mo"),a.createElement("th",{className:"dow"},"Tu"),a.createElement("th",{className:"dow"},"We"),a.createElement("th",{className:"dow"},"Th"),a.createElement("th",{className:"dow"},"Fr"),a.createElement("th",{className:"dow"},"Sa"))),a.createElement("tbody",null,this.renderDays())))}}),e.exports=r},function(e,t,s){var r,a,i;a=s(2),classNames=s(7),i=s(3),r=a.createClass({displayName:"DateTimePickerMonths",propTypes:{subtractYear:a.PropTypes.func.isRequired,addYear:a.PropTypes.func.isRequired,viewDate:a.PropTypes.object.isRequired,selectedDate:a.PropTypes.object,showYears:a.PropTypes.func.isRequired,setViewMonth:a.PropTypes.func.isRequired},getSelectedDate:function(){return this.props.selectedDate?this.props.selectedDate:this.props.viewDate},renderMonths:function(){var e,t,s,r,o;for(s=this.getSelectedDate().month(),o=i.monthsShort(),t=0,r=[];12>t;)e={month:!0,active:t===s&&this.props.viewDate.year()===this.getSelectedDate().year()},r.push(a.createElement("span",{key:t,className:classNames(e),onClick:this.props.setViewMonth},o[t])),t++;return r},render:function(){return a.createElement("div",{className:"datepicker-months",style:{display:"block"}},a.createElement("table",{className:"table-condensed"},a.createElement("thead",null,a.createElement("tr",null,a.createElement("th",{className:"prev",onClick:this.props.subtractYear},"‹"),a.createElement("th",{className:"switch",colSpan:"5",onClick:this.props.showYears},this.props.viewDate.year()),a.createElement("th",{className:"next",onClick:this.props.addYear},"›"))),a.createElement("tbody",null,a.createElement("tr",null,a.createElement("td",{colSpan:"7"},this.renderMonths())))))}}),e.exports=r},function(e,t,s){var r,a;a=s(2),classNames=s(7),r=a.createClass({displayName:"DateTimePickerYears",propTypes:{subtractDecade:a.PropTypes.func.isRequired,addDecade:a.PropTypes.func.isRequired,viewDate:a.PropTypes.object.isRequired,selectedDate:a.PropTypes.object,setViewYear:a.PropTypes.func.isRequired},renderYears:function(){var e,t,s,r;for(r=[],s=10*parseInt(this.props.viewDate.year()/10,10),s--,t=-1;11>t;)e={year:!0,old:-1===t|10===t,active:this.props.viewDate.year()===s},r.push(a.createElement("span",{key:s,className:classNames(e),onClick:this.props.setViewYear},s)),s++,t++;return r},render:function(){var e;return e=10*parseInt(this.props.viewDate.year()/10,10),a.createElement("div",{className:"datepicker-years",style:{display:"block"}},a.createElement("table",{className:"table-condensed"},a.createElement("thead",null,a.createElement("tr",null,a.createElement("th",{className:"prev",onClick:this.props.subtractDecade},"‹"),a.createElement("th",{className:"switch",colSpan:"5"},e," - ",e+9),a.createElement("th",{className:"next",onClick:this.props.addDecade},"›"))),a.createElement("tbody",null,a.createElement("tr",null,a.createElement("td",{colSpan:"7"},this.renderYears())))))}}),e.exports=r},function(e,t,s){var r,a;a=s(2),Glyphicon=s(4).Glyphicon,r=a.createClass({displayName:"DateTimePickerMinutes",propTypes:{setSelectedMinute:a.PropTypes.func.isRequired,onSwitch:a.PropTypes.func.isRequired},renderSwitchButton:function(){return this.props.mode===Constants.MODE_TIME?a.createElement("ul",{className:"list-unstyled"},a.createElement("li",null,a.createElement("span",{className:"btn picker-switch",style:{width:"100%"},onClick:this.props.onSwitch},a.createElement(Glyphicon,{glyph:"time"})))):null},render:function(){return a.createElement("div",{className:"timepicker-minutes","data-action":"selectMinute",style:{display:"block"}},this.renderSwitchButton(),a.createElement("table",{className:"table-condensed"},a.createElement("tbody",null,a.createElement("tr",null,a.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"00"),a.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"05"),a.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"10"),a.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"15")),a.createElement("tr",null,a.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"20"),a.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"25"),a.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"30"),a.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"35")),a.createElement("tr",null,a.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"40"),a.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"45"),a.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"50"),a.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"55")))))}}),e.exports=r},function(e,t,s){var r,a;a=s(2),Glyphicon=s(4).Glyphicon,r=a.createClass({displayName:"DateTimePickerHours",propTypes:{setSelectedHour:a.PropTypes.func.isRequired,onSwitch:a.PropTypes.func.isRequired},renderSwitchButton:function(){return this.props.mode===Constants.MODE_TIME?a.createElement("ul",{className:"list-unstyled"},a.createElement("li",null,a.createElement("span",{className:"btn picker-switch",style:{width:"100%"},onClick:this.props.onSwitch},a.createElement(Glyphicon,{glyph:"time"})))):null},render:function(){return a.createElement("div",{className:"timepicker-hours","data-action":"selectHour",style:{display:"block"}},this.renderSwitchButton(),a.createElement("table",{className:"table-condensed"},a.createElement("tbody",null,a.createElement("tr",null,a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"01"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"02"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"03"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"04")),a.createElement("tr",null,a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"05"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"06"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"07"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"08")),a.createElement("tr",null,a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"09"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"10"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"11"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"12")),a.createElement("tr",null,a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"13"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"14"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"15"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"16")),a.createElement("tr",null,a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"17"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"18"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"19"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"20")),a.createElement("tr",null,a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"21"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"22"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"23"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"24")))))}}),e.exports=r}])}); \ No newline at end of file +function r(){for(var e,t="",s=0;sm||p.year()===m&&p.month()>c)&&(s["new"]=!0),this.props.selectedDate&&p.isSame(i({y:e.year(),M:e.month(),d:e.date()}))&&(s.active=!0),this.props.showToday&&p.isSame(i(),"day")&&(s.today=!0),(u&&p.isBefore(u)||d&&p.isAfter(d))&&(s.disabled=!0),this.props.daysOfWeekDisabled)for(f=this.props.daysOfWeekDisabled,D=0,y=f.length;y>D;D++)if(n=f[D],p.day()===this.props.daysOfWeekDisabled[n]){s.disabled=!0;break}t.push(a.createElement("td",{key:p.month()+"-"+p.date(),className:classNames(s),onClick:this.props.setSelectedDate},p.date())),p.weekday()===i().endOf("week").weekday()&&(h=a.createElement("tr",{key:p.month()+"-"+p.date()},t),o.push(h),t=[]),p.add(1,"d")}return o},render:function(){return a.createElement("div",{className:"datepicker-days",style:{display:"block"}},a.createElement("table",{className:"table-condensed"},a.createElement("thead",null,a.createElement("tr",null,a.createElement("th",{className:"prev",onClick:this.props.subtractMonth},"‹"),a.createElement("th",{className:"switch",colSpan:"5",onClick:this.props.showMonths},i.months()[this.props.viewDate.month()]," ",this.props.viewDate.year()),a.createElement("th",{className:"next",onClick:this.props.addMonth},"›")),a.createElement("tr",null,a.createElement("th",{className:"dow"},"Su"),a.createElement("th",{className:"dow"},"Mo"),a.createElement("th",{className:"dow"},"Tu"),a.createElement("th",{className:"dow"},"We"),a.createElement("th",{className:"dow"},"Th"),a.createElement("th",{className:"dow"},"Fr"),a.createElement("th",{className:"dow"},"Sa"))),a.createElement("tbody",null,this.renderDays())))}}),e.exports=r},function(e,t,s){var r,a,i;a=s(2),classNames=s(7),i=s(3),r=a.createClass({displayName:"DateTimePickerMonths",propTypes:{subtractYear:a.PropTypes.func.isRequired,addYear:a.PropTypes.func.isRequired,viewDate:a.PropTypes.object.isRequired,selectedDate:a.PropTypes.object,showYears:a.PropTypes.func.isRequired,setViewMonth:a.PropTypes.func.isRequired},getSelectedDate:function(){return this.props.selectedDate?this.props.selectedDate:this.props.viewDate},renderMonths:function(){var e,t,s,r,o;for(s=this.getSelectedDate().month(),o=i.monthsShort(),t=0,r=[];12>t;)e={month:!0,active:t===s&&this.props.viewDate.year()===this.getSelectedDate().year()},r.push(a.createElement("span",{key:t,className:classNames(e),onClick:this.props.setViewMonth},o[t])),t++;return r},render:function(){return a.createElement("div",{className:"datepicker-months",style:{display:"block"}},a.createElement("table",{className:"table-condensed"},a.createElement("thead",null,a.createElement("tr",null,a.createElement("th",{className:"prev",onClick:this.props.subtractYear},"‹"),a.createElement("th",{className:"switch",colSpan:"5",onClick:this.props.showYears},this.props.viewDate.year()),a.createElement("th",{className:"next",onClick:this.props.addYear},"›"))),a.createElement("tbody",null,a.createElement("tr",null,a.createElement("td",{colSpan:"7"},this.renderMonths())))))}}),e.exports=r},function(e,t,s){var r,a;a=s(2),classNames=s(7),r=a.createClass({displayName:"DateTimePickerYears",propTypes:{subtractDecade:a.PropTypes.func.isRequired,addDecade:a.PropTypes.func.isRequired,viewDate:a.PropTypes.object.isRequired,selectedDate:a.PropTypes.object,setViewYear:a.PropTypes.func.isRequired},renderYears:function(){var e,t,s,r;for(r=[],s=10*parseInt(this.props.viewDate.year()/10,10),s--,t=-1;11>t;)e={year:!0,old:-1===t|10===t,active:this.props.viewDate.year()===s},r.push(a.createElement("span",{key:s,className:classNames(e),onClick:this.props.setViewYear},s)),s++,t++;return r},render:function(){var e;return e=10*parseInt(this.props.viewDate.year()/10,10),a.createElement("div",{className:"datepicker-years",style:{display:"block"}},a.createElement("table",{className:"table-condensed"},a.createElement("thead",null,a.createElement("tr",null,a.createElement("th",{className:"prev",onClick:this.props.subtractDecade},"‹"),a.createElement("th",{className:"switch",colSpan:"5"},e," - ",e+9),a.createElement("th",{className:"next",onClick:this.props.addDecade},"›"))),a.createElement("tbody",null,a.createElement("tr",null,a.createElement("td",{colSpan:"7"},this.renderYears())))))}}),e.exports=r},function(e,t,s){var r,a;a=s(2),Glyphicon=s(4).Glyphicon,r=a.createClass({displayName:"DateTimePickerMinutes",propTypes:{setSelectedMinute:a.PropTypes.func.isRequired,onSwitch:a.PropTypes.func.isRequired},renderSwitchButton:function(){return this.props.mode===Constants.MODE_TIME?a.createElement("ul",{className:"list-unstyled"},a.createElement("li",null,a.createElement("span",{className:"btn picker-switch",style:{width:"100%"},onClick:this.props.onSwitch},a.createElement(Glyphicon,{glyph:"time"})))):null},render:function(){return a.createElement("div",{className:"timepicker-minutes","data-action":"selectMinute",style:{display:"block"}},this.renderSwitchButton(),a.createElement("table",{className:"table-condensed"},a.createElement("tbody",null,a.createElement("tr",null,a.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"00"),a.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"05"),a.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"10"),a.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"15")),a.createElement("tr",null,a.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"20"),a.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"25"),a.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"30"),a.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"35")),a.createElement("tr",null,a.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"40"),a.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"45"),a.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"50"),a.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"55")))))}}),e.exports=r},function(e,t,s){var r,a;a=s(2),Glyphicon=s(4).Glyphicon,r=a.createClass({displayName:"DateTimePickerHours",propTypes:{setSelectedHour:a.PropTypes.func.isRequired,onSwitch:a.PropTypes.func.isRequired},renderSwitchButton:function(){return this.props.mode===Constants.MODE_TIME?a.createElement("ul",{className:"list-unstyled"},a.createElement("li",null,a.createElement("span",{className:"btn picker-switch",style:{width:"100%"},onClick:this.props.onSwitch},a.createElement(Glyphicon,{glyph:"time"})))):null},render:function(){return a.createElement("div",{className:"timepicker-hours","data-action":"selectHour",style:{display:"block"}},this.renderSwitchButton(),a.createElement("table",{className:"table-condensed"},a.createElement("tbody",null,a.createElement("tr",null,a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"01"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"02"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"03"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"04")),a.createElement("tr",null,a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"05"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"06"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"07"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"08")),a.createElement("tr",null,a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"09"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"10"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"11"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"12")),a.createElement("tr",null,a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"13"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"14"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"15"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"16")),a.createElement("tr",null,a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"17"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"18"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"19"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"20")),a.createElement("tr",null,a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"21"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"22"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"23"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"24")))))}}),e.exports=r}])}); \ No newline at end of file diff --git a/examples/basic/basic.jsx b/examples/basic/basic.jsx index c7599644..9d32123c 100644 --- a/examples/basic/basic.jsx +++ b/examples/basic/basic.jsx @@ -70,10 +70,10 @@ var Basic = React.createClass({
minDate and maxDate - 
 {''}
+ 
 {''}
diff --git a/package.json b/package.json index 5cb9ded3..69d67f7a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "mnq-react-bootstrap-datetimepicker", - "version": "0.1.0", + "version": "0.1.4", "description": "A bootstrap datetime picker component for React.js", "repository": { "type": "git", diff --git a/src/DateTimeField.jsx b/src/DateTimeField.jsx index bfe142c7..66cd5e97 100644 --- a/src/DateTimeField.jsx +++ b/src/DateTimeField.jsx @@ -92,10 +92,14 @@ DateTimeField = React.createClass({ componentWillReceiveProps: function(nextProps) { if(this.props.value !== nextProps.value) { return this.setState({ - viewDate: nextProps.dateTime ? moment(nextProps.dateTime, nextProps.format, true).startOf("month") : moment().startOf("month"), + viewDate: this.getInitialViewDate(nextProps), selectedDate: nextProps.value ? moment(nextProps.value, nextProps.format, true) : null, inputValue: typeof nextProps.value != 'undefined' ? moment(nextProps.value, nextProps.format, true).format(this.resolvePropsInputFormat(nextProps)) : null }); + } else if(this.props.minDate !== nextProps.minDate) { + return this.setState({ + viewDate: this.getInitialViewDate(nextProps) + }); } }, onChange: function(event) { @@ -127,6 +131,7 @@ DateTimeField = React.createClass({ this.closePicker(); this.props.onChange(this.getCurrentWorkingDate().format(this.props.format)); return this.setState({ + viewDate: this.getCurrentWorkingDate(), inputValue: this.getCurrentWorkingDate().format(this.state.inputFormat) }); }); diff --git a/src/DateTimePicker.jsx b/src/DateTimePicker.jsx index 2f755c0b..9e0bd27c 100644 --- a/src/DateTimePicker.jsx +++ b/src/DateTimePicker.jsx @@ -73,7 +73,6 @@ DateTimePicker = React.createClass({
  • - {this.getCurrentWorkingDate().format('h')} + {this.props.viewDate.format('h')} : - {this.getCurrentWorkingDate().format('mm')} + {this.props.viewDate.format('mm')} - + diff --git a/src/DateTimePickerYears.jsx b/src/DateTimePickerYears.jsx index dd2a8b3a..2756b540 100644 --- a/src/DateTimePickerYears.jsx +++ b/src/DateTimePickerYears.jsx @@ -11,10 +11,13 @@ DateTimePickerYears = React.createClass({ selectedDate: React.PropTypes.object, setViewYear: React.PropTypes.func.isRequired }, + getSelectedDate: function() { + return this.props.selectedDate ? this.props.selectedDate : this.props.viewDate; + }, renderYears: function() { var classes, i, year, years; years = []; - year = parseInt(this.props.viewDate.year() / 10, 10) * 10; + year = parseInt(this.getSelectedDate().year() / 10, 10) * 10; year--; i = -1; while (i < 11) { From b703e82abc65b28450f9aca2f6cc0b1d19873339 Mon Sep 17 00:00:00 2001 From: Alejandro Sellero Date: Wed, 27 May 2015 09:52:11 +0200 Subject: [PATCH 10/16] - Bugfix taking care of not losing the minDate --- dist/react-bootstrap-datetimepicker.js | 17 ++++++++--------- dist/react-bootstrap-datetimepicker.min.js | 4 ++-- package.json | 2 +- src/DateTimeField.jsx | 2 +- 4 files changed, 12 insertions(+), 13 deletions(-) diff --git a/dist/react-bootstrap-datetimepicker.js b/dist/react-bootstrap-datetimepicker.js index b57ba140..b7b44320 100644 --- a/dist/react-bootstrap-datetimepicker.js +++ b/dist/react-bootstrap-datetimepicker.js @@ -119,7 +119,7 @@ return /******/ (function(modules) { // webpackBootstrap if (props.value) { return moment(props.value, props.format, true); } else if (props.minDate) { - return props.minDate.startOf("month"); + return props.minDate.clone().startOf("month"); } else { return props.dateTime ? moment(props.dateTime, props.format, true).startOf("month") : moment().startOf("month"); } @@ -546,7 +546,6 @@ return /******/ (function(modules) { // webpackBootstrap React.createElement("li", null, React.createElement(DateTimePickerTime, { viewDate: this.props.viewDate, - selectedDate: this.props.selectedDate, setSelectedHour: this.props.setSelectedHour, setSelectedMinute: this.props.setSelectedMinute, addHour: this.props.addHour, @@ -835,9 +834,6 @@ return /******/ (function(modules) { // webpackBootstrap hoursDisplayed: false }; }, - getCurrentWorkingDate: function() { - return this.props.selectedDate ? this.props.selectedDate : this.props.viewDate; - }, goBack: function() { return this.setState({ minutesDisplayed: false, @@ -885,15 +881,15 @@ return /******/ (function(modules) { // webpackBootstrap ), React.createElement("tr", null, - React.createElement("td", null, React.createElement("span", {className: "timepicker-hour", onClick: this.showHours}, this.getCurrentWorkingDate().format('h'))), + React.createElement("td", null, React.createElement("span", {className: "timepicker-hour", onClick: this.showHours}, this.props.viewDate.format('h'))), React.createElement("td", {className: "separator"}, ":"), - React.createElement("td", null, React.createElement("span", {className: "timepicker-minute", onClick: this.showMinutes}, this.getCurrentWorkingDate().format('mm'))), + React.createElement("td", null, React.createElement("span", {className: "timepicker-minute", onClick: this.showMinutes}, this.props.viewDate.format('mm'))), React.createElement("td", {className: "separator"}), - React.createElement("td", null, React.createElement("button", {className: "btn btn-primary", onClick: this.props.togglePeriod, type: "button"}, this.getCurrentWorkingDate().format('A'))) + React.createElement("td", null, React.createElement("button", {className: "btn btn-primary", onClick: this.props.togglePeriod, type: "button"}, this.props.viewDate.format('A'))) ), React.createElement("tr", null, @@ -1144,10 +1140,13 @@ return /******/ (function(modules) { // webpackBootstrap selectedDate: React.PropTypes.object, setViewYear: React.PropTypes.func.isRequired }, + getSelectedDate: function() { + return this.props.selectedDate ? this.props.selectedDate : this.props.viewDate; + }, renderYears: function() { var classes, i, year, years; years = []; - year = parseInt(this.props.viewDate.year() / 10, 10) * 10; + year = parseInt(this.getSelectedDate().year() / 10, 10) * 10; year--; i = -1; while (i < 11) { diff --git a/dist/react-bootstrap-datetimepicker.min.js b/dist/react-bootstrap-datetimepicker.min.js index a1ed4772..ad08ed10 100644 --- a/dist/react-bootstrap-datetimepicker.min.js +++ b/dist/react-bootstrap-datetimepicker.min.js @@ -1,6 +1,6 @@ -!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("React"),require("moment"),require("ReactBootstrap")):"function"==typeof define&&define.amd?define(["React","moment","ReactBootstrap"],t):"object"==typeof exports?exports.ReactBootstrapDatetimepicker=t(require("React"),require("moment"),require("ReactBootstrap")):e.ReactBootstrapDatetimepicker=t(e.React,e.moment,e.ReactBootstrap)}(this,function(e,t,s){return function(e){function t(r){if(s[r])return s[r].exports;var a=s[r]={exports:{},id:r,loaded:!1};return e[r].call(a.exports,a,a.exports,t),a.loaded=!0,a.exports}var s={};return t.m=e,t.c=s,t.p="",t(0)}([function(e,t,s){e.exports=s(1)},function(e,t,s){var r,a,i,o,n;o=s(2),classNames=s(7),a=s(5),n=s(3),i=s(4).Glyphicon,Constants=s(6),r=o.createClass({displayName:"DateTimeField",propTypes:{dateTime:o.PropTypes.string,value:o.PropTypes.string,onChange:o.PropTypes.func,format:o.PropTypes.string,inputProps:o.PropTypes.object,inputFormat:o.PropTypes.string,placeholder:o.PropTypes.string,mode:o.PropTypes.oneOf([Constants.MODE_DATE,Constants.MODE_DATETIME,Constants.MODE_TIME]),minDate:o.PropTypes.object,maxDate:o.PropTypes.object,clearable:o.PropTypes.bool,disabled:o.PropTypes.bool},getDefaultProps:function(){return{disabled:!1,clearable:!1,format:"x",showToday:!0,viewMode:"days",daysOfWeekDisabled:[],mode:Constants.MODE_DATETIME,placeholder:"Select a date",onChange:function(e){}}},resolvePropsInputFormat:function(e){if(e=e?e:this.props,e.inputFormat)return e.inputFormat;switch(e.mode){case Constants.MODE_TIME:return"h:mm A";case Constants.MODE_DATE:return"MM/DD/YY";default:return"MM/DD/YY h:mm A"}},getInitialViewDate:function(e){return e=e?e:this.props,e.value?n(e.value,e.format,!0):e.minDate?e.minDate.startOf("month"):e.dateTime?n(e.dateTime,e.format,!0).startOf("month"):n().startOf("month")},getInitialState:function(){return{showDatePicker:this.props.mode!==Constants.MODE_TIME,showTimePicker:this.props.mode===Constants.MODE_TIME,inputFormat:this.resolvePropsInputFormat(),buttonIcon:this.props.mode===Constants.MODE_TIME?"time":"calendar",widgetStyle:{display:"block",position:"absolute",left:-9999,zIndex:"9999 !important"},viewDate:this.getInitialViewDate(),selectedDate:this.props.value?n(this.props.value,this.props.format,!0):null,inputValue:"undefined"!=typeof this.props.value?n(this.props.value,this.props.format,!0).format(this.resolvePropsInputFormat()):null}},clearDate:function(){this.state.selectedDate=null,this.state.inputValue=null,this.state.viewDate=this.getInitialViewDate(),this.forceUpdate(function(){this.props.onChange(null)})},getCurrentWorkingDate:function(){return this.state.selectedDate?this.state.selectedDate:this.state.viewDate},componentWillReceiveProps:function(e){return this.props.value!==e.value?this.setState({viewDate:this.getInitialViewDate(e),selectedDate:e.value?n(e.value,e.format,!0):null,inputValue:"undefined"!=typeof e.value?n(e.value,e.format,!0).format(this.resolvePropsInputFormat(e)):null}):this.props.minDate!==e.minDate?this.setState({viewDate:this.getInitialViewDate(e)}):void 0},onChange:function(e){var t=null==e.target?e:e.target.value;return n(t,this.state.inputFormat,!0).isValid()&&this.setState({selectedDate:n(t,this.state.inputFormat,!0),viewDate:n(t,this.state.inputFormat,!0)}),this.setState({inputValue:t},function(){return this.props.onChange(n(this.state.inputValue,this.state.inputFormat,!0).format(this.props.format))})},setSelectedDate:function(e){var t=e.target;if(t.className&&!t.className.match(/disabled/g)){var s;return s=t.className.includes("new")?this.state.viewDate.month()+1:t.className.includes("old")?this.state.viewDate.month()-1:this.state.viewDate.month(),this.setState({selectedDate:this.state.viewDate.clone().month(s).date(parseInt(e.target.innerHTML)).hour(this.state.viewDate.hours()).minute(this.state.viewDate.minutes())},function(){return this.closePicker(),this.props.onChange(this.getCurrentWorkingDate().format(this.props.format)),this.setState({viewDate:this.getCurrentWorkingDate(),inputValue:this.getCurrentWorkingDate().format(this.state.inputFormat)})})}},setSelectedHour:function(e){return this.setState({selectedDate:this.getCurrentWorkingDate().clone().hour(parseInt(e.target.innerHTML)).minute(this.getCurrentWorkingDate().minutes())},function(){return this.closePicker(),this.props.onChange(this.getCurrentWorkingDate().format(this.props.format)),this.setState({inputValue:this.getCurrentWorkingDate().format(this.state.inputFormat)})})},setSelectedMinute:function(e){return this.setState({selectedDate:this.getCurrentWorkingDate().clone().hour(this.state.viewDate.hours()).minute(parseInt(e.target.innerHTML))},function(){return this.closePicker(),this.props.onChange(this.state.selectedDate.format(this.props.format)),this.setState({inputValue:this.state.selectedDate.format(this.state.inputFormat)})})},setViewMonth:function(e){return this.setState({viewDate:this.state.viewDate.clone().month(e)})},setViewYear:function(e){return this.setState({viewDate:this.state.viewDate.clone().year(e)})},addMinute:function(){return this.setState({selectedDate:this.getCurrentWorkingDate().clone().add(1,"minutes")},function(){return this.props.onChange(this.getCurrentWorkingDate().format(this.props.format)),this.setState({inputValue:this.getCurrentWorkingDate().format(this.state.inputFormat),viewDate:this.getCurrentWorkingDate()})})},addHour:function(){return this.setState({selectedDate:this.getCurrentWorkingDate().clone().add(1,"hours")},function(){return this.props.onChange(this.getCurrentWorkingDate().format(this.props.format)),this.setState({inputValue:this.getCurrentWorkingDate().format(this.state.inputFormat),viewDate:this.getCurrentWorkingDate()})})},addMonth:function(){return this.setState({viewDate:this.state.viewDate.add(1,"months")})},addYear:function(){return this.setState({viewDate:this.state.viewDate.add(1,"years")})},addDecade:function(){return this.setState({viewDate:this.state.viewDate.add(10,"years")})},subtractMinute:function(){return this.setState({selectedDate:this.getCurrentWorkingDate().clone().subtract(1,"minutes")},function(){return this.props.onChange(this.getCurrentWorkingDate().format(this.props.format)),this.setState({inputValue:this.getCurrentWorkingDate().format(this.state.inputFormat),viewDate:this.getCurrentWorkingDate()})})},subtractHour:function(){return this.setState({selectedDate:this.getCurrentWorkingDate().clone().subtract(1,"hours")},function(){return this.props.onChange(this.getCurrentWorkingDate().format(this.props.format)),this.setState({inputValue:this.getCurrentWorkingDate().format(this.state.inputFormat),viewDate:this.getCurrentWorkingDate()})})},subtractMonth:function(){return this.setState({viewDate:this.state.viewDate.subtract(1,"months")})},subtractYear:function(){return this.setState({viewDate:this.state.viewDate.subtract(1,"years")})},subtractDecade:function(){return this.setState({viewDate:this.state.viewDate.subtract(10,"years")})},togglePeriod:function(){return this.onChange(this.getCurrentWorkingDate().hour()>12?this.getCurrentWorkingDate().clone().subtract(12,"hours").format(this.state.inputFormat):this.getCurrentWorkingDate().clone().add(12,"hours").format(this.state.inputFormat))},togglePicker:function(){return this.setState({showDatePicker:!this.state.showDatePicker,showTimePicker:!this.state.showTimePicker})},onClick:function(){if(!this.props.disabled){var e,t,s,r,a,i;return this.state.showPicker?this.closePicker():(this.setState({showPicker:!0}),t=this.refs.dtpbutton.getDOMNode().getBoundingClientRect(),e={"bootstrap-datetimepicker-widget":!0,"dropdown-menu":!0},s={top:t.top+window.pageYOffset-document.documentElement.clientTop,left:t.left+window.pageXOffset-document.documentElement.clientLeft},s.top=s.top+this.refs.datetimepicker.getDOMNode().offsetHeight,a=void 0!==window.pageYOffset?window.pageYOffset:(document.documentElement||document.body.parentNode||document.body).scrollTop,r="up"===this.props.direction?"top":"bottom"===this.props.direction?"bottom":"auto"===this.props.direction?s.top+this.refs.widget.getDOMNode().offsetHeight>window.offsetHeight+a&&this.refs.widget.offsetHeight+this.refs.datetimepicker.getDOMNode().offsetHeight>s.top?"top":"bottom":void 0,"top"===r?(s.top=-this.refs.widget.getDOMNode().offsetHeight-this.getDOMNode().clientHeight-2,e.top=!0,e.bottom=!1,e["pull-right"]=!0):(s.top=40,e.top=!1,e.bottom=!0,e["pull-right"]=!0),i={display:"block",position:"absolute",top:s.top,left:"auto",right:40},this.setState({widgetStyle:i,widgetClasses:e}))}},closePicker:function(e){var t;return t=this.state.widgetStyle,t.left=-9999,t.display="none",this.setState({showPicker:!1,widgetStyle:t})},renderOverlay:function(){var e;return e={position:"fixed",top:0,bottom:0,left:0,right:0,zIndex:"999"},this.state.showPicker?o.createElement("div",{style:e,onClick:this.closePicker}):o.createElement("span",null)},render:function(){var e=classNames({"form-control":!0,placeholder:this.props.defaultText===this.state.inputValue});return o.createElement("div",null,this.renderOverlay(),o.createElement(a,{ref:"widget",widgetClasses:this.state.widgetClasses,widgetStyle:this.state.widgetStyle,showDatePicker:this.state.showDatePicker,showTimePicker:this.state.showTimePicker,viewDate:this.state.viewDate,selectedDate:this.state.selectedDate,showToday:this.props.showToday,viewMode:this.props.viewMode,daysOfWeekDisabled:this.props.daysOfWeekDisabled,mode:this.props.mode,minDate:this.props.minDate,maxDate:this.props.maxDate,addDecade:this.addDecade,addYear:this.addYear,addMonth:this.addMonth,addHour:this.addHour,addMinute:this.addMinute,subtractDecade:this.subtractDecade,subtractYear:this.subtractYear,subtractMonth:this.subtractMonth,subtractHour:this.subtractHour,subtractMinute:this.subtractMinute,setViewYear:this.setViewYear,setViewMonth:this.setViewMonth,setSelectedDate:this.setSelectedDate,setSelectedHour:this.setSelectedHour,setSelectedMinute:this.setSelectedMinute,togglePicker:this.togglePicker,togglePeriod:this.togglePeriod}),o.createElement("div",{className:"input-group date",ref:"datetimepicker"},o.createElement("input",o.__spread({type:"text",className:e,onChange:this.onChange,onFocus:this.onClick,disabled:this.props.disabled,value:this.state.inputValue,placeholder:this.props.placeholder},this.props.inputProps)),this.props.clearable&&this.state.selectedDate&&!this.props.disabled?o.createElement("span",{className:"input-group-clear",onClick:this.clearDate},"×"):null,o.createElement("span",{className:"input-group-addon",onClick:this.onClick,onBlur:this.onBlur,ref:"dtpbutton",disabled:this.props.disabled},o.createElement(i,{glyph:this.state.buttonIcon}))))}}),e.exports=r},function(t,s,r){t.exports=e},function(e,s,r){e.exports=t},function(e,t,r){e.exports=s},function(e,t,s){var r,a,i,o,n;n=s(2),classNames=s(7),a=s(8),i=s(9),o=s(4).Glyphicon,Constants=s(6),r=n.createClass({displayName:"DateTimePicker",propTypes:{showDatePicker:n.PropTypes.bool,showTimePicker:n.PropTypes.bool,subtractMonth:n.PropTypes.func.isRequired,addMonth:n.PropTypes.func.isRequired,viewDate:n.PropTypes.object.isRequired,selectedDate:n.PropTypes.object,showToday:n.PropTypes.bool,viewMode:n.PropTypes.oneOfType([n.PropTypes.string,n.PropTypes.number]),mode:n.PropTypes.oneOf([Constants.MODE_DATE,Constants.MODE_DATETIME,Constants.MODE_TIME]),daysOfWeekDisabled:n.PropTypes.array,setSelectedDate:n.PropTypes.func.isRequired,subtractYear:n.PropTypes.func.isRequired,addYear:n.PropTypes.func.isRequired,setViewMonth:n.PropTypes.func.isRequired,setViewYear:n.PropTypes.func.isRequired,subtractHour:n.PropTypes.func.isRequired,addHour:n.PropTypes.func.isRequired,subtractMinute:n.PropTypes.func.isRequired,addMinute:n.PropTypes.func.isRequired,addDecade:n.PropTypes.func.isRequired,subtractDecade:n.PropTypes.func.isRequired,togglePeriod:n.PropTypes.func.isRequired,minDate:n.PropTypes.object,maxDate:n.PropTypes.object},renderDatePicker:function(){return this.props.showDatePicker?n.createElement("li",null,n.createElement(a,{addMonth:this.props.addMonth,subtractMonth:this.props.subtractMonth,setSelectedDate:this.props.setSelectedDate,viewDate:this.props.viewDate,selectedDate:this.props.selectedDate,showToday:this.props.showToday,viewMode:this.props.viewMode,daysOfWeekDisabled:this.props.daysOfWeekDisabled,subtractYear:this.props.subtractYear,addYear:this.props.addYear,setViewMonth:this.props.setViewMonth,setViewYear:this.props.setViewYear,addDecade:this.props.addDecade,subtractDecade:this.props.subtractDecade,minDate:this.props.minDate,maxDate:this.props.maxDate})):void 0},renderTimePicker:function(){return this.props.showTimePicker?n.createElement("li",null,n.createElement(i,{viewDate:this.props.viewDate,selectedDate:this.props.selectedDate,setSelectedHour:this.props.setSelectedHour,setSelectedMinute:this.props.setSelectedMinute,addHour:this.props.addHour,subtractHour:this.props.subtractHour,addMinute:this.props.addMinute,subtractMinute:this.props.subtractMinute,togglePeriod:this.props.togglePeriod,mode:this.props.mode})):void 0},renderSwitchButton:function(){return this.props.mode===Constants.MODE_DATETIME?n.createElement("li",null,n.createElement("span",{className:"btn picker-switch",style:{width:"100%"},onClick:this.props.togglePicker},n.createElement(o,{glyph:this.props.showTimePicker?"calendar":"time"}))):null},render:function(){return n.createElement("div",{className:classNames(this.props.widgetClasses),style:this.props.widgetStyle},n.createElement("ul",{className:"list-unstyled"},this.renderDatePicker(),this.renderSwitchButton(),this.renderTimePicker()))}}),e.exports=r},function(e,t,s){e.exports={MODE_DATE:"date",MODE_DATETIME:"datetime",MODE_TIME:"time"}},function(e,t,s){/*! +!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("React"),require("moment"),require("ReactBootstrap")):"function"==typeof define&&define.amd?define(["React","moment","ReactBootstrap"],t):"object"==typeof exports?exports.ReactBootstrapDatetimepicker=t(require("React"),require("moment"),require("ReactBootstrap")):e.ReactBootstrapDatetimepicker=t(e.React,e.moment,e.ReactBootstrap)}(this,function(e,t,s){return function(e){function t(r){if(s[r])return s[r].exports;var a=s[r]={exports:{},id:r,loaded:!1};return e[r].call(a.exports,a,a.exports,t),a.loaded=!0,a.exports}var s={};return t.m=e,t.c=s,t.p="",t(0)}([function(e,t,s){e.exports=s(1)},function(e,t,s){var r,a,i,o,n;o=s(2),classNames=s(7),a=s(5),n=s(3),i=s(4).Glyphicon,Constants=s(6),r=o.createClass({displayName:"DateTimeField",propTypes:{dateTime:o.PropTypes.string,value:o.PropTypes.string,onChange:o.PropTypes.func,format:o.PropTypes.string,inputProps:o.PropTypes.object,inputFormat:o.PropTypes.string,placeholder:o.PropTypes.string,mode:o.PropTypes.oneOf([Constants.MODE_DATE,Constants.MODE_DATETIME,Constants.MODE_TIME]),minDate:o.PropTypes.object,maxDate:o.PropTypes.object,clearable:o.PropTypes.bool,disabled:o.PropTypes.bool},getDefaultProps:function(){return{disabled:!1,clearable:!1,format:"x",showToday:!0,viewMode:"days",daysOfWeekDisabled:[],mode:Constants.MODE_DATETIME,placeholder:"Select a date",onChange:function(e){}}},resolvePropsInputFormat:function(e){if(e=e?e:this.props,e.inputFormat)return e.inputFormat;switch(e.mode){case Constants.MODE_TIME:return"h:mm A";case Constants.MODE_DATE:return"MM/DD/YY";default:return"MM/DD/YY h:mm A"}},getInitialViewDate:function(e){return e=e?e:this.props,e.value?n(e.value,e.format,!0):e.minDate?e.minDate.clone().startOf("month"):e.dateTime?n(e.dateTime,e.format,!0).startOf("month"):n().startOf("month")},getInitialState:function(){return{showDatePicker:this.props.mode!==Constants.MODE_TIME,showTimePicker:this.props.mode===Constants.MODE_TIME,inputFormat:this.resolvePropsInputFormat(),buttonIcon:this.props.mode===Constants.MODE_TIME?"time":"calendar",widgetStyle:{display:"block",position:"absolute",left:-9999,zIndex:"9999 !important"},viewDate:this.getInitialViewDate(),selectedDate:this.props.value?n(this.props.value,this.props.format,!0):null,inputValue:"undefined"!=typeof this.props.value?n(this.props.value,this.props.format,!0).format(this.resolvePropsInputFormat()):null}},clearDate:function(){this.state.selectedDate=null,this.state.inputValue=null,this.state.viewDate=this.getInitialViewDate(),this.forceUpdate(function(){this.props.onChange(null)})},getCurrentWorkingDate:function(){return this.state.selectedDate?this.state.selectedDate:this.state.viewDate},componentWillReceiveProps:function(e){return this.props.value!==e.value?this.setState({viewDate:this.getInitialViewDate(e),selectedDate:e.value?n(e.value,e.format,!0):null,inputValue:"undefined"!=typeof e.value?n(e.value,e.format,!0).format(this.resolvePropsInputFormat(e)):null}):this.props.minDate!==e.minDate?this.setState({viewDate:this.getInitialViewDate(e)}):void 0},onChange:function(e){var t=null==e.target?e:e.target.value;return n(t,this.state.inputFormat,!0).isValid()&&this.setState({selectedDate:n(t,this.state.inputFormat,!0),viewDate:n(t,this.state.inputFormat,!0)}),this.setState({inputValue:t},function(){return this.props.onChange(n(this.state.inputValue,this.state.inputFormat,!0).format(this.props.format))})},setSelectedDate:function(e){var t=e.target;if(t.className&&!t.className.match(/disabled/g)){var s;return s=t.className.includes("new")?this.state.viewDate.month()+1:t.className.includes("old")?this.state.viewDate.month()-1:this.state.viewDate.month(),this.setState({selectedDate:this.state.viewDate.clone().month(s).date(parseInt(e.target.innerHTML)).hour(this.state.viewDate.hours()).minute(this.state.viewDate.minutes())},function(){return this.closePicker(),this.props.onChange(this.getCurrentWorkingDate().format(this.props.format)),this.setState({viewDate:this.getCurrentWorkingDate(),inputValue:this.getCurrentWorkingDate().format(this.state.inputFormat)})})}},setSelectedHour:function(e){return this.setState({selectedDate:this.getCurrentWorkingDate().clone().hour(parseInt(e.target.innerHTML)).minute(this.getCurrentWorkingDate().minutes())},function(){return this.closePicker(),this.props.onChange(this.getCurrentWorkingDate().format(this.props.format)),this.setState({inputValue:this.getCurrentWorkingDate().format(this.state.inputFormat)})})},setSelectedMinute:function(e){return this.setState({selectedDate:this.getCurrentWorkingDate().clone().hour(this.state.viewDate.hours()).minute(parseInt(e.target.innerHTML))},function(){return this.closePicker(),this.props.onChange(this.state.selectedDate.format(this.props.format)),this.setState({inputValue:this.state.selectedDate.format(this.state.inputFormat)})})},setViewMonth:function(e){return this.setState({viewDate:this.state.viewDate.clone().month(e)})},setViewYear:function(e){return this.setState({viewDate:this.state.viewDate.clone().year(e)})},addMinute:function(){return this.setState({selectedDate:this.getCurrentWorkingDate().clone().add(1,"minutes")},function(){return this.props.onChange(this.getCurrentWorkingDate().format(this.props.format)),this.setState({inputValue:this.getCurrentWorkingDate().format(this.state.inputFormat),viewDate:this.getCurrentWorkingDate()})})},addHour:function(){return this.setState({selectedDate:this.getCurrentWorkingDate().clone().add(1,"hours")},function(){return this.props.onChange(this.getCurrentWorkingDate().format(this.props.format)),this.setState({inputValue:this.getCurrentWorkingDate().format(this.state.inputFormat),viewDate:this.getCurrentWorkingDate()})})},addMonth:function(){return this.setState({viewDate:this.state.viewDate.add(1,"months")})},addYear:function(){return this.setState({viewDate:this.state.viewDate.add(1,"years")})},addDecade:function(){return this.setState({viewDate:this.state.viewDate.add(10,"years")})},subtractMinute:function(){return this.setState({selectedDate:this.getCurrentWorkingDate().clone().subtract(1,"minutes")},function(){return this.props.onChange(this.getCurrentWorkingDate().format(this.props.format)),this.setState({inputValue:this.getCurrentWorkingDate().format(this.state.inputFormat),viewDate:this.getCurrentWorkingDate()})})},subtractHour:function(){return this.setState({selectedDate:this.getCurrentWorkingDate().clone().subtract(1,"hours")},function(){return this.props.onChange(this.getCurrentWorkingDate().format(this.props.format)),this.setState({inputValue:this.getCurrentWorkingDate().format(this.state.inputFormat),viewDate:this.getCurrentWorkingDate()})})},subtractMonth:function(){return this.setState({viewDate:this.state.viewDate.subtract(1,"months")})},subtractYear:function(){return this.setState({viewDate:this.state.viewDate.subtract(1,"years")})},subtractDecade:function(){return this.setState({viewDate:this.state.viewDate.subtract(10,"years")})},togglePeriod:function(){return this.onChange(this.getCurrentWorkingDate().hour()>12?this.getCurrentWorkingDate().clone().subtract(12,"hours").format(this.state.inputFormat):this.getCurrentWorkingDate().clone().add(12,"hours").format(this.state.inputFormat))},togglePicker:function(){return this.setState({showDatePicker:!this.state.showDatePicker,showTimePicker:!this.state.showTimePicker})},onClick:function(){if(!this.props.disabled){var e,t,s,r,a,i;return this.state.showPicker?this.closePicker():(this.setState({showPicker:!0}),t=this.refs.dtpbutton.getDOMNode().getBoundingClientRect(),e={"bootstrap-datetimepicker-widget":!0,"dropdown-menu":!0},s={top:t.top+window.pageYOffset-document.documentElement.clientTop,left:t.left+window.pageXOffset-document.documentElement.clientLeft},s.top=s.top+this.refs.datetimepicker.getDOMNode().offsetHeight,a=void 0!==window.pageYOffset?window.pageYOffset:(document.documentElement||document.body.parentNode||document.body).scrollTop,r="up"===this.props.direction?"top":"bottom"===this.props.direction?"bottom":"auto"===this.props.direction?s.top+this.refs.widget.getDOMNode().offsetHeight>window.offsetHeight+a&&this.refs.widget.offsetHeight+this.refs.datetimepicker.getDOMNode().offsetHeight>s.top?"top":"bottom":void 0,"top"===r?(s.top=-this.refs.widget.getDOMNode().offsetHeight-this.getDOMNode().clientHeight-2,e.top=!0,e.bottom=!1,e["pull-right"]=!0):(s.top=40,e.top=!1,e.bottom=!0,e["pull-right"]=!0),i={display:"block",position:"absolute",top:s.top,left:"auto",right:40},this.setState({widgetStyle:i,widgetClasses:e}))}},closePicker:function(e){var t;return t=this.state.widgetStyle,t.left=-9999,t.display="none",this.setState({showPicker:!1,widgetStyle:t})},renderOverlay:function(){var e;return e={position:"fixed",top:0,bottom:0,left:0,right:0,zIndex:"999"},this.state.showPicker?o.createElement("div",{style:e,onClick:this.closePicker}):o.createElement("span",null)},render:function(){var e=classNames({"form-control":!0,placeholder:this.props.defaultText===this.state.inputValue});return o.createElement("div",null,this.renderOverlay(),o.createElement(a,{ref:"widget",widgetClasses:this.state.widgetClasses,widgetStyle:this.state.widgetStyle,showDatePicker:this.state.showDatePicker,showTimePicker:this.state.showTimePicker,viewDate:this.state.viewDate,selectedDate:this.state.selectedDate,showToday:this.props.showToday,viewMode:this.props.viewMode,daysOfWeekDisabled:this.props.daysOfWeekDisabled,mode:this.props.mode,minDate:this.props.minDate,maxDate:this.props.maxDate,addDecade:this.addDecade,addYear:this.addYear,addMonth:this.addMonth,addHour:this.addHour,addMinute:this.addMinute,subtractDecade:this.subtractDecade,subtractYear:this.subtractYear,subtractMonth:this.subtractMonth,subtractHour:this.subtractHour,subtractMinute:this.subtractMinute,setViewYear:this.setViewYear,setViewMonth:this.setViewMonth,setSelectedDate:this.setSelectedDate,setSelectedHour:this.setSelectedHour,setSelectedMinute:this.setSelectedMinute,togglePicker:this.togglePicker,togglePeriod:this.togglePeriod}),o.createElement("div",{className:"input-group date",ref:"datetimepicker"},o.createElement("input",o.__spread({type:"text",className:e,onChange:this.onChange,onFocus:this.onClick,disabled:this.props.disabled,value:this.state.inputValue,placeholder:this.props.placeholder},this.props.inputProps)),this.props.clearable&&this.state.selectedDate&&!this.props.disabled?o.createElement("span",{className:"input-group-clear",onClick:this.clearDate},"×"):null,o.createElement("span",{className:"input-group-addon",onClick:this.onClick,onBlur:this.onBlur,ref:"dtpbutton",disabled:this.props.disabled},o.createElement(i,{glyph:this.state.buttonIcon}))))}}),e.exports=r},function(t,s,r){t.exports=e},function(e,s,r){e.exports=t},function(e,t,r){e.exports=s},function(e,t,s){var r,a,i,o,n;n=s(2),classNames=s(7),a=s(8),i=s(9),o=s(4).Glyphicon,Constants=s(6),r=n.createClass({displayName:"DateTimePicker",propTypes:{showDatePicker:n.PropTypes.bool,showTimePicker:n.PropTypes.bool,subtractMonth:n.PropTypes.func.isRequired,addMonth:n.PropTypes.func.isRequired,viewDate:n.PropTypes.object.isRequired,selectedDate:n.PropTypes.object,showToday:n.PropTypes.bool,viewMode:n.PropTypes.oneOfType([n.PropTypes.string,n.PropTypes.number]),mode:n.PropTypes.oneOf([Constants.MODE_DATE,Constants.MODE_DATETIME,Constants.MODE_TIME]),daysOfWeekDisabled:n.PropTypes.array,setSelectedDate:n.PropTypes.func.isRequired,subtractYear:n.PropTypes.func.isRequired,addYear:n.PropTypes.func.isRequired,setViewMonth:n.PropTypes.func.isRequired,setViewYear:n.PropTypes.func.isRequired,subtractHour:n.PropTypes.func.isRequired,addHour:n.PropTypes.func.isRequired,subtractMinute:n.PropTypes.func.isRequired,addMinute:n.PropTypes.func.isRequired,addDecade:n.PropTypes.func.isRequired,subtractDecade:n.PropTypes.func.isRequired,togglePeriod:n.PropTypes.func.isRequired,minDate:n.PropTypes.object,maxDate:n.PropTypes.object},renderDatePicker:function(){return this.props.showDatePicker?n.createElement("li",null,n.createElement(a,{addMonth:this.props.addMonth,subtractMonth:this.props.subtractMonth,setSelectedDate:this.props.setSelectedDate,viewDate:this.props.viewDate,selectedDate:this.props.selectedDate,showToday:this.props.showToday,viewMode:this.props.viewMode,daysOfWeekDisabled:this.props.daysOfWeekDisabled,subtractYear:this.props.subtractYear,addYear:this.props.addYear,setViewMonth:this.props.setViewMonth,setViewYear:this.props.setViewYear,addDecade:this.props.addDecade,subtractDecade:this.props.subtractDecade,minDate:this.props.minDate,maxDate:this.props.maxDate})):void 0},renderTimePicker:function(){return this.props.showTimePicker?n.createElement("li",null,n.createElement(i,{viewDate:this.props.viewDate,setSelectedHour:this.props.setSelectedHour,setSelectedMinute:this.props.setSelectedMinute,addHour:this.props.addHour,subtractHour:this.props.subtractHour,addMinute:this.props.addMinute,subtractMinute:this.props.subtractMinute,togglePeriod:this.props.togglePeriod,mode:this.props.mode})):void 0},renderSwitchButton:function(){return this.props.mode===Constants.MODE_DATETIME?n.createElement("li",null,n.createElement("span",{className:"btn picker-switch",style:{width:"100%"},onClick:this.props.togglePicker},n.createElement(o,{glyph:this.props.showTimePicker?"calendar":"time"}))):null},render:function(){return n.createElement("div",{className:classNames(this.props.widgetClasses),style:this.props.widgetStyle},n.createElement("ul",{className:"list-unstyled"},this.renderDatePicker(),this.renderSwitchButton(),this.renderTimePicker()))}}),e.exports=r},function(e,t,s){e.exports={MODE_DATE:"date",MODE_DATETIME:"datetime",MODE_TIME:"time"}},function(e,t,s){/*! Copyright (c) 2015 Jed Watson. Licensed under the MIT License (MIT), see http://jedwatson.github.io/classnames */ -function r(){for(var e,t="",s=0;sm||p.year()===m&&p.month()>c)&&(s["new"]=!0),this.props.selectedDate&&p.isSame(i({y:e.year(),M:e.month(),d:e.date()}))&&(s.active=!0),this.props.showToday&&p.isSame(i(),"day")&&(s.today=!0),(u&&p.isBefore(u)||d&&p.isAfter(d))&&(s.disabled=!0),this.props.daysOfWeekDisabled)for(f=this.props.daysOfWeekDisabled,D=0,y=f.length;y>D;D++)if(n=f[D],p.day()===this.props.daysOfWeekDisabled[n]){s.disabled=!0;break}t.push(a.createElement("td",{key:p.month()+"-"+p.date(),className:classNames(s),onClick:this.props.setSelectedDate},p.date())),p.weekday()===i().endOf("week").weekday()&&(h=a.createElement("tr",{key:p.month()+"-"+p.date()},t),o.push(h),t=[]),p.add(1,"d")}return o},render:function(){return a.createElement("div",{className:"datepicker-days",style:{display:"block"}},a.createElement("table",{className:"table-condensed"},a.createElement("thead",null,a.createElement("tr",null,a.createElement("th",{className:"prev",onClick:this.props.subtractMonth},"‹"),a.createElement("th",{className:"switch",colSpan:"5",onClick:this.props.showMonths},i.months()[this.props.viewDate.month()]," ",this.props.viewDate.year()),a.createElement("th",{className:"next",onClick:this.props.addMonth},"›")),a.createElement("tr",null,a.createElement("th",{className:"dow"},"Su"),a.createElement("th",{className:"dow"},"Mo"),a.createElement("th",{className:"dow"},"Tu"),a.createElement("th",{className:"dow"},"We"),a.createElement("th",{className:"dow"},"Th"),a.createElement("th",{className:"dow"},"Fr"),a.createElement("th",{className:"dow"},"Sa"))),a.createElement("tbody",null,this.renderDays())))}}),e.exports=r},function(e,t,s){var r,a,i;a=s(2),classNames=s(7),i=s(3),r=a.createClass({displayName:"DateTimePickerMonths",propTypes:{subtractYear:a.PropTypes.func.isRequired,addYear:a.PropTypes.func.isRequired,viewDate:a.PropTypes.object.isRequired,selectedDate:a.PropTypes.object,showYears:a.PropTypes.func.isRequired,setViewMonth:a.PropTypes.func.isRequired},getSelectedDate:function(){return this.props.selectedDate?this.props.selectedDate:this.props.viewDate},renderMonths:function(){var e,t,s,r,o;for(s=this.getSelectedDate().month(),o=i.monthsShort(),t=0,r=[];12>t;)e={month:!0,active:t===s&&this.props.viewDate.year()===this.getSelectedDate().year()},r.push(a.createElement("span",{key:t,className:classNames(e),onClick:this.props.setViewMonth},o[t])),t++;return r},render:function(){return a.createElement("div",{className:"datepicker-months",style:{display:"block"}},a.createElement("table",{className:"table-condensed"},a.createElement("thead",null,a.createElement("tr",null,a.createElement("th",{className:"prev",onClick:this.props.subtractYear},"‹"),a.createElement("th",{className:"switch",colSpan:"5",onClick:this.props.showYears},this.props.viewDate.year()),a.createElement("th",{className:"next",onClick:this.props.addYear},"›"))),a.createElement("tbody",null,a.createElement("tr",null,a.createElement("td",{colSpan:"7"},this.renderMonths())))))}}),e.exports=r},function(e,t,s){var r,a;a=s(2),classNames=s(7),r=a.createClass({displayName:"DateTimePickerYears",propTypes:{subtractDecade:a.PropTypes.func.isRequired,addDecade:a.PropTypes.func.isRequired,viewDate:a.PropTypes.object.isRequired,selectedDate:a.PropTypes.object,setViewYear:a.PropTypes.func.isRequired},renderYears:function(){var e,t,s,r;for(r=[],s=10*parseInt(this.props.viewDate.year()/10,10),s--,t=-1;11>t;)e={year:!0,old:-1===t|10===t,active:this.props.viewDate.year()===s},r.push(a.createElement("span",{key:s,className:classNames(e),onClick:this.props.setViewYear},s)),s++,t++;return r},render:function(){var e;return e=10*parseInt(this.props.viewDate.year()/10,10),a.createElement("div",{className:"datepicker-years",style:{display:"block"}},a.createElement("table",{className:"table-condensed"},a.createElement("thead",null,a.createElement("tr",null,a.createElement("th",{className:"prev",onClick:this.props.subtractDecade},"‹"),a.createElement("th",{className:"switch",colSpan:"5"},e," - ",e+9),a.createElement("th",{className:"next",onClick:this.props.addDecade},"›"))),a.createElement("tbody",null,a.createElement("tr",null,a.createElement("td",{colSpan:"7"},this.renderYears())))))}}),e.exports=r},function(e,t,s){var r,a;a=s(2),Glyphicon=s(4).Glyphicon,r=a.createClass({displayName:"DateTimePickerMinutes",propTypes:{setSelectedMinute:a.PropTypes.func.isRequired,onSwitch:a.PropTypes.func.isRequired},renderSwitchButton:function(){return this.props.mode===Constants.MODE_TIME?a.createElement("ul",{className:"list-unstyled"},a.createElement("li",null,a.createElement("span",{className:"btn picker-switch",style:{width:"100%"},onClick:this.props.onSwitch},a.createElement(Glyphicon,{glyph:"time"})))):null},render:function(){return a.createElement("div",{className:"timepicker-minutes","data-action":"selectMinute",style:{display:"block"}},this.renderSwitchButton(),a.createElement("table",{className:"table-condensed"},a.createElement("tbody",null,a.createElement("tr",null,a.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"00"),a.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"05"),a.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"10"),a.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"15")),a.createElement("tr",null,a.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"20"),a.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"25"),a.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"30"),a.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"35")),a.createElement("tr",null,a.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"40"),a.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"45"),a.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"50"),a.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"55")))))}}),e.exports=r},function(e,t,s){var r,a;a=s(2),Glyphicon=s(4).Glyphicon,r=a.createClass({displayName:"DateTimePickerHours",propTypes:{setSelectedHour:a.PropTypes.func.isRequired,onSwitch:a.PropTypes.func.isRequired},renderSwitchButton:function(){return this.props.mode===Constants.MODE_TIME?a.createElement("ul",{className:"list-unstyled"},a.createElement("li",null,a.createElement("span",{className:"btn picker-switch",style:{width:"100%"},onClick:this.props.onSwitch},a.createElement(Glyphicon,{glyph:"time"})))):null},render:function(){return a.createElement("div",{className:"timepicker-hours","data-action":"selectHour",style:{display:"block"}},this.renderSwitchButton(),a.createElement("table",{className:"table-condensed"},a.createElement("tbody",null,a.createElement("tr",null,a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"01"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"02"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"03"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"04")),a.createElement("tr",null,a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"05"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"06"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"07"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"08")),a.createElement("tr",null,a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"09"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"10"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"11"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"12")),a.createElement("tr",null,a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"13"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"14"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"15"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"16")),a.createElement("tr",null,a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"17"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"18"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"19"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"20")),a.createElement("tr",null,a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"21"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"22"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"23"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"24")))))}}),e.exports=r}])}); \ No newline at end of file +function r(){for(var e,t="",s=0;sm||p.year()===m&&p.month()>c)&&(s["new"]=!0),this.props.selectedDate&&p.isSame(i({y:e.year(),M:e.month(),d:e.date()}))&&(s.active=!0),this.props.showToday&&p.isSame(i(),"day")&&(s.today=!0),(u&&p.isBefore(u)||d&&p.isAfter(d))&&(s.disabled=!0),this.props.daysOfWeekDisabled)for(f=this.props.daysOfWeekDisabled,D=0,y=f.length;y>D;D++)if(n=f[D],p.day()===this.props.daysOfWeekDisabled[n]){s.disabled=!0;break}t.push(a.createElement("td",{key:p.month()+"-"+p.date(),className:classNames(s),onClick:this.props.setSelectedDate},p.date())),p.weekday()===i().endOf("week").weekday()&&(h=a.createElement("tr",{key:p.month()+"-"+p.date()},t),o.push(h),t=[]),p.add(1,"d")}return o},render:function(){return a.createElement("div",{className:"datepicker-days",style:{display:"block"}},a.createElement("table",{className:"table-condensed"},a.createElement("thead",null,a.createElement("tr",null,a.createElement("th",{className:"prev",onClick:this.props.subtractMonth},"‹"),a.createElement("th",{className:"switch",colSpan:"5",onClick:this.props.showMonths},i.months()[this.props.viewDate.month()]," ",this.props.viewDate.year()),a.createElement("th",{className:"next",onClick:this.props.addMonth},"›")),a.createElement("tr",null,a.createElement("th",{className:"dow"},"Su"),a.createElement("th",{className:"dow"},"Mo"),a.createElement("th",{className:"dow"},"Tu"),a.createElement("th",{className:"dow"},"We"),a.createElement("th",{className:"dow"},"Th"),a.createElement("th",{className:"dow"},"Fr"),a.createElement("th",{className:"dow"},"Sa"))),a.createElement("tbody",null,this.renderDays())))}}),e.exports=r},function(e,t,s){var r,a,i;a=s(2),classNames=s(7),i=s(3),r=a.createClass({displayName:"DateTimePickerMonths",propTypes:{subtractYear:a.PropTypes.func.isRequired,addYear:a.PropTypes.func.isRequired,viewDate:a.PropTypes.object.isRequired,selectedDate:a.PropTypes.object,showYears:a.PropTypes.func.isRequired,setViewMonth:a.PropTypes.func.isRequired},getSelectedDate:function(){return this.props.selectedDate?this.props.selectedDate:this.props.viewDate},renderMonths:function(){var e,t,s,r,o;for(s=this.getSelectedDate().month(),o=i.monthsShort(),t=0,r=[];12>t;)e={month:!0,active:t===s&&this.props.viewDate.year()===this.getSelectedDate().year()},r.push(a.createElement("span",{key:t,className:classNames(e),onClick:this.props.setViewMonth},o[t])),t++;return r},render:function(){return a.createElement("div",{className:"datepicker-months",style:{display:"block"}},a.createElement("table",{className:"table-condensed"},a.createElement("thead",null,a.createElement("tr",null,a.createElement("th",{className:"prev",onClick:this.props.subtractYear},"‹"),a.createElement("th",{className:"switch",colSpan:"5",onClick:this.props.showYears},this.props.viewDate.year()),a.createElement("th",{className:"next",onClick:this.props.addYear},"›"))),a.createElement("tbody",null,a.createElement("tr",null,a.createElement("td",{colSpan:"7"},this.renderMonths())))))}}),e.exports=r},function(e,t,s){var r,a;a=s(2),classNames=s(7),r=a.createClass({displayName:"DateTimePickerYears",propTypes:{subtractDecade:a.PropTypes.func.isRequired,addDecade:a.PropTypes.func.isRequired,viewDate:a.PropTypes.object.isRequired,selectedDate:a.PropTypes.object,setViewYear:a.PropTypes.func.isRequired},getSelectedDate:function(){return this.props.selectedDate?this.props.selectedDate:this.props.viewDate},renderYears:function(){var e,t,s,r;for(r=[],s=10*parseInt(this.getSelectedDate().year()/10,10),s--,t=-1;11>t;)e={year:!0,old:-1===t|10===t,active:this.props.viewDate.year()===s},r.push(a.createElement("span",{key:s,className:classNames(e),onClick:this.props.setViewYear},s)),s++,t++;return r},render:function(){var e;return e=10*parseInt(this.props.viewDate.year()/10,10),a.createElement("div",{className:"datepicker-years",style:{display:"block"}},a.createElement("table",{className:"table-condensed"},a.createElement("thead",null,a.createElement("tr",null,a.createElement("th",{className:"prev",onClick:this.props.subtractDecade},"‹"),a.createElement("th",{className:"switch",colSpan:"5"},e," - ",e+9),a.createElement("th",{className:"next",onClick:this.props.addDecade},"›"))),a.createElement("tbody",null,a.createElement("tr",null,a.createElement("td",{colSpan:"7"},this.renderYears())))))}}),e.exports=r},function(e,t,s){var r,a;a=s(2),Glyphicon=s(4).Glyphicon,r=a.createClass({displayName:"DateTimePickerMinutes",propTypes:{setSelectedMinute:a.PropTypes.func.isRequired,onSwitch:a.PropTypes.func.isRequired},renderSwitchButton:function(){return this.props.mode===Constants.MODE_TIME?a.createElement("ul",{className:"list-unstyled"},a.createElement("li",null,a.createElement("span",{className:"btn picker-switch",style:{width:"100%"},onClick:this.props.onSwitch},a.createElement(Glyphicon,{glyph:"time"})))):null},render:function(){return a.createElement("div",{className:"timepicker-minutes","data-action":"selectMinute",style:{display:"block"}},this.renderSwitchButton(),a.createElement("table",{className:"table-condensed"},a.createElement("tbody",null,a.createElement("tr",null,a.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"00"),a.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"05"),a.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"10"),a.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"15")),a.createElement("tr",null,a.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"20"),a.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"25"),a.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"30"),a.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"35")),a.createElement("tr",null,a.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"40"),a.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"45"),a.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"50"),a.createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"55")))))}}),e.exports=r},function(e,t,s){var r,a;a=s(2),Glyphicon=s(4).Glyphicon,r=a.createClass({displayName:"DateTimePickerHours",propTypes:{setSelectedHour:a.PropTypes.func.isRequired,onSwitch:a.PropTypes.func.isRequired},renderSwitchButton:function(){return this.props.mode===Constants.MODE_TIME?a.createElement("ul",{className:"list-unstyled"},a.createElement("li",null,a.createElement("span",{className:"btn picker-switch",style:{width:"100%"},onClick:this.props.onSwitch},a.createElement(Glyphicon,{glyph:"time"})))):null},render:function(){return a.createElement("div",{className:"timepicker-hours","data-action":"selectHour",style:{display:"block"}},this.renderSwitchButton(),a.createElement("table",{className:"table-condensed"},a.createElement("tbody",null,a.createElement("tr",null,a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"01"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"02"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"03"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"04")),a.createElement("tr",null,a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"05"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"06"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"07"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"08")),a.createElement("tr",null,a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"09"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"10"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"11"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"12")),a.createElement("tr",null,a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"13"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"14"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"15"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"16")),a.createElement("tr",null,a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"17"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"18"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"19"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"20")),a.createElement("tr",null,a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"21"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"22"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"23"),a.createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"24")))))}}),e.exports=r}])}); \ No newline at end of file diff --git a/package.json b/package.json index 69d67f7a..a486a20a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "mnq-react-bootstrap-datetimepicker", - "version": "0.1.4", + "version": "0.1.5", "description": "A bootstrap datetime picker component for React.js", "repository": { "type": "git", diff --git a/src/DateTimeField.jsx b/src/DateTimeField.jsx index 66cd5e97..eea613e6 100644 --- a/src/DateTimeField.jsx +++ b/src/DateTimeField.jsx @@ -56,7 +56,7 @@ DateTimeField = React.createClass({ if (props.value) { return moment(props.value, props.format, true); } else if (props.minDate) { - return props.minDate.startOf("month"); + return props.minDate.clone().startOf("month"); } else { return props.dateTime ? moment(props.dateTime, props.format, true).startOf("month") : moment().startOf("month"); } From afe6ff4698a529e2eb8300be8cb0c9e44499bece Mon Sep 17 00:00:00 2001 From: Alejandro Sellero Date: Sat, 30 May 2015 15:21:45 +0200 Subject: [PATCH 11/16] Completely separation of viewDate and selectedDate to be able to have nothing as selected date --- README.md | 3 +- src/DateTimeField.jsx | 63 ++++++++++++++++------------------- src/DateTimePicker.jsx | 4 +-- src/DateTimePickerDays.jsx | 5 +-- src/DateTimePickerHours.jsx | 3 +- src/DateTimePickerMinutes.jsx | 3 +- src/DateTimePickerMonths.jsx | 7 ++-- src/DateTimePickerTime.jsx | 5 ++- src/DateTimePickerYears.jsx | 7 ++-- 9 files changed, 44 insertions(+), 56 deletions(-) diff --git a/README.md b/README.md index 635776e5..a7940d1b 100644 --- a/README.md +++ b/README.md @@ -21,7 +21,7 @@ render: function() { return ; } ``` -See [Examples](examples/README.md) for more details. +See [Examples](examples/) for more details. API =============================== @@ -41,6 +41,7 @@ DateTimeField | **inputProps** | object | undefined | Defines additional attributes for the input element of the component. | | **minDate** | moment | undefined | The earliest date allowed for entry in the calendar view. | | **maxDate** | moment | undefined | The latest date allowed for entry in the calendar view. | +| **mode** | string | undefined | Allows to selectively display only the time picker ('time') or the date picker ('date') | Update Warning =============================== diff --git a/src/DateTimeField.jsx b/src/DateTimeField.jsx index eea613e6..1b3fa47b 100644 --- a/src/DateTimeField.jsx +++ b/src/DateTimeField.jsx @@ -7,9 +7,9 @@ DateTimePicker = require('./DateTimePicker'); moment = require('moment'); -Glyphicon = require('react-bootstrap').Glyphicon; +var Glyphicon = require('react-bootstrap').Glyphicon; -Constants = require('./Constants'); +var Constants = require('./Constants'); DateTimeField = React.createClass({ propTypes: { @@ -39,18 +39,6 @@ DateTimeField = React.createClass({ onChange: function (x) {} }; }, - resolvePropsInputFormat: function(props) { - props = props ? props : this.props; - if(props.inputFormat) return props.inputFormat; - switch(props.mode) { - case Constants.MODE_TIME: - return "h:mm A"; - case Constants.MODE_DATE: - return "MM/DD/YY"; - default: - return "MM/DD/YY h:mm A"; - } - }, getInitialViewDate: function(props) { props = props ? props : this.props; if (props.value) { @@ -75,26 +63,15 @@ DateTimeField = React.createClass({ }, viewDate: this.getInitialViewDate(), selectedDate: this.props.value ? moment(this.props.value, this.props.format, true) : null, - inputValue: typeof this.props.value != 'undefined' ? moment(this.props.value, this.props.format, true).format(this.resolvePropsInputFormat()) : null + inputValue: this.props.value ? moment(this.props.value, this.props.format, true).format(this.resolvePropsInputFormat()) : null }; }, - clearDate: function() { - this.state.selectedDate = null; - this.state.inputValue = null; - this.state.viewDate = this.getInitialViewDate(); - this.forceUpdate(function() { - this.props.onChange(null); - }); - }, - getCurrentWorkingDate: function() { - return this.state.selectedDate ? this.state.selectedDate : this.state.viewDate; - }, componentWillReceiveProps: function(nextProps) { if(this.props.value !== nextProps.value) { return this.setState({ viewDate: this.getInitialViewDate(nextProps), selectedDate: nextProps.value ? moment(nextProps.value, nextProps.format, true) : null, - inputValue: typeof nextProps.value != 'undefined' ? moment(nextProps.value, nextProps.format, true).format(this.resolvePropsInputFormat(nextProps)) : null + inputValue: nextProps.value ? moment(nextProps.value, nextProps.format, true).format(this.resolvePropsInputFormat(nextProps)) : null }); } else if(this.props.minDate !== nextProps.minDate) { return this.setState({ @@ -102,6 +79,18 @@ DateTimeField = React.createClass({ }); } }, + resolvePropsInputFormat: function(props) { + props = props ? props : this.props; + if(props.inputFormat) return props.inputFormat; + switch(props.mode) { + case Constants.MODE_TIME: + return "h:mm A"; + case Constants.MODE_DATE: + return "MM/DD/YY"; + default: + return "MM/DD/YY h:mm A"; + } + }, onChange: function(event) { var value = event.target == null ? event : event.target.value; if (moment(value, this.state.inputFormat, true).isValid()) { @@ -118,6 +107,17 @@ DateTimeField = React.createClass({ }); }, + clearDate: function() { + this.state.selectedDate = null; + this.state.inputValue = null; + this.state.viewDate = this.getInitialViewDate(); + this.forceUpdate(function() { + this.props.onChange(); + }); + }, + getCurrentWorkingDate: function() { + return this.state.selectedDate ? this.state.selectedDate.clone() : this.state.viewDate.clone(); + }, setSelectedDate: function(e) { var target = e.target; if (target.className && !target.className.match(/disabled/g)) { @@ -312,8 +312,7 @@ DateTimeField = React.createClass({ }); }, renderOverlay: function() { - var styles; - styles = { + var styles = { position: 'fixed', top: 0, bottom: 0, @@ -328,10 +327,6 @@ DateTimeField = React.createClass({ } }, render: function() { - var inputClasses = classNames({ - 'form-control': true, - placeholder: this.props.defaultText === this.state.inputValue - }); return (
    {this.renderOverlay()} @@ -367,7 +362,7 @@ DateTimeField = React.createClass({ togglePeriod={this.togglePeriod} />
    - { this.props.clearable && this.state.selectedDate && !this.props.disabled ? diff --git a/src/DateTimePicker.jsx b/src/DateTimePicker.jsx index 9e0bd27c..2f8a2233 100644 --- a/src/DateTimePicker.jsx +++ b/src/DateTimePicker.jsx @@ -7,9 +7,9 @@ DateTimePickerDate = require('./DateTimePickerDate'); DateTimePickerTime = require('./DateTimePickerTime'); -Glyphicon = require('react-bootstrap').Glyphicon; +var Glyphicon = require('react-bootstrap').Glyphicon; -Constants = require('./Constants'); +var Constants = require('./Constants'); DateTimePicker = React.createClass({ propTypes: { diff --git a/src/DateTimePickerDays.jsx b/src/DateTimePickerDays.jsx index 08498f78..cc316b89 100644 --- a/src/DateTimePickerDays.jsx +++ b/src/DateTimePickerDays.jsx @@ -23,12 +23,9 @@ DateTimePickerDays = React.createClass({ showToday: true }; }, - getSelectedDate: function() { - return this.props.selectedDate ? this.props.selectedDate : this.props.viewDate; - }, renderDays: function() { var selectedDate, cells, classes, days, html, i, month, nextMonth, prevMonth, minDate, maxDate, row, year, _i, _len, _ref; - selectedDate = this.getSelectedDate(); + selectedDate = this.props.selectedDate; year = this.props.viewDate.year(); month = this.props.viewDate.month(); prevMonth = this.props.viewDate.clone().subtract(1, "months"); diff --git a/src/DateTimePickerHours.jsx b/src/DateTimePickerHours.jsx index a404c989..42370d93 100644 --- a/src/DateTimePickerHours.jsx +++ b/src/DateTimePickerHours.jsx @@ -1,7 +1,8 @@ var DateTimePickerHours, React; React = require('react'); -Glyphicon = require('react-bootstrap').Glyphicon; +var Glyphicon = require('react-bootstrap').Glyphicon; +var Constants = require('./Constants'); DateTimePickerHours = React.createClass({ propTypes: { diff --git a/src/DateTimePickerMinutes.jsx b/src/DateTimePickerMinutes.jsx index 0849b87a..0dbb9420 100644 --- a/src/DateTimePickerMinutes.jsx +++ b/src/DateTimePickerMinutes.jsx @@ -1,7 +1,8 @@ var DateTimePickerMinutes, React; React = require('react'); -Glyphicon = require('react-bootstrap').Glyphicon; +var Glyphicon = require('react-bootstrap').Glyphicon; +var Constants = require('./Constants'); DateTimePickerMinutes = React.createClass({ propTypes: { diff --git a/src/DateTimePickerMonths.jsx b/src/DateTimePickerMonths.jsx index 13937edc..fc1900ae 100644 --- a/src/DateTimePickerMonths.jsx +++ b/src/DateTimePickerMonths.jsx @@ -14,19 +14,16 @@ DateTimePickerMonths = React.createClass({ showYears: React.PropTypes.func.isRequired, setViewMonth: React.PropTypes.func.isRequired }, - getSelectedDate: function() { - return this.props.selectedDate ? this.props.selectedDate : this.props.viewDate; - }, renderMonths: function() { var classes, i, month, months, monthsShort; - month = this.getSelectedDate().month(); + month = this.props.viewDate.month(); monthsShort = moment.monthsShort(); i = 0; months = []; while (i < 12) { classes = { month: true, - 'active': i === month && this.props.viewDate.year() === this.getSelectedDate().year() + 'active': i === month && this.props.selectedDate && this.props.viewDate.year() === this.props.selectedDate.year() }; months.push({monthsShort[i]}); i++; diff --git a/src/DateTimePickerTime.jsx b/src/DateTimePickerTime.jsx index de3c2b15..d91cbf50 100644 --- a/src/DateTimePickerTime.jsx +++ b/src/DateTimePickerTime.jsx @@ -6,9 +6,9 @@ DateTimePickerMinutes = require('./DateTimePickerMinutes'); DateTimePickerHours = require('./DateTimePickerHours'); -Glyphicon = require('react-bootstrap').Glyphicon; +var Glyphicon = require('react-bootstrap').Glyphicon; -Constants = require('./Constants'); +var Constants = require('./Constants'); DateTimePickerTime = React.createClass({ propTypes: { @@ -19,7 +19,6 @@ DateTimePickerTime = React.createClass({ subtractMinute: React.PropTypes.func.isRequired, addMinute: React.PropTypes.func.isRequired, viewDate: React.PropTypes.object.isRequired, - selectedDate: React.PropTypes.object, togglePeriod: React.PropTypes.func.isRequired, mode: React.PropTypes.oneOf([Constants.MODE_DATE, Constants.MODE_DATETIME, Constants.MODE_TIME]) }, diff --git a/src/DateTimePickerYears.jsx b/src/DateTimePickerYears.jsx index 2756b540..a7ea595c 100644 --- a/src/DateTimePickerYears.jsx +++ b/src/DateTimePickerYears.jsx @@ -11,20 +11,17 @@ DateTimePickerYears = React.createClass({ selectedDate: React.PropTypes.object, setViewYear: React.PropTypes.func.isRequired }, - getSelectedDate: function() { - return this.props.selectedDate ? this.props.selectedDate : this.props.viewDate; - }, renderYears: function() { var classes, i, year, years; years = []; - year = parseInt(this.getSelectedDate().year() / 10, 10) * 10; + year = parseInt(this.props.viewDate.year() / 10, 10) * 10; year--; i = -1; while (i < 11) { classes = { year: true, old: i === -1 | i === 10, - active: this.props.viewDate.year() === year + active: this.props.selectedDate && this.props.selectedDate.year() === year }; years.push({year}); year++; From 95249ade74daa03defbf7212ce636a67dd6266d6 Mon Sep 17 00:00:00 2001 From: Alejandro Sellero Date: Sat, 30 May 2015 15:32:07 +0200 Subject: [PATCH 12/16] Minimize css and if simplified --- css/bootstrap-datetimepicker.min.css | 11 +---------- src/DateTimeField.jsx | 2 +- 2 files changed, 2 insertions(+), 11 deletions(-) diff --git a/css/bootstrap-datetimepicker.min.css b/css/bootstrap-datetimepicker.min.css index fc167f16..e857d205 100644 --- a/css/bootstrap-datetimepicker.min.css +++ b/css/bootstrap-datetimepicker.min.css @@ -2,13 +2,4 @@ * Datetimepicker for Bootstrap v3 * https://github.com/Eonasdan/bootstrap-datetimepicker/ */ -.bootstrap-datetimepicker-widget{top:0;left:0;width:250px;padding:4px;margin-top:1px;z-index:99999!important;border-radius:4px}.bootstrap-datetimepicker-widget.timepicker-sbs{width:600px}.bootstrap-datetimepicker-widget.bottom:before{content:'';display:inline-block;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:7px solid #ccc;border-bottom-color:rgba(0,0,0,.2);position:absolute;top:-7px;left:7px}.bootstrap-datetimepicker-widget.bottom:after{content:'';display:inline-block;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid #fff;position:absolute;top:-6px;left:8px}.bootstrap-datetimepicker-widget.top:before{content:'';display:inline-block;border-left:7px solid transparent;border-right:7px solid transparent;border-top:7px solid #ccc;border-top-color:rgba(0,0,0,.2);position:absolute;bottom:-7px;left:6px}.bootstrap-datetimepicker-widget.top:after{content:'';display:inline-block;border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid #fff;position:absolute;bottom:-6px;left:7px}.bootstrap-datetimepicker-widget .dow{width:14.2857%}.bootstrap-datetimepicker-widget.pull-right:before{left:auto;right:6px}.bootstrap-datetimepicker-widget.pull-right:after{left:auto;right:7px}.bootstrap-datetimepicker-widget>ul{list-style-type:none;margin:0}.bootstrap-datetimepicker-widget .timepicker-hour,.bootstrap-datetimepicker-widget .timepicker-minute,.bootstrap-datetimepicker-widget .timepicker-second{width:100%;font-weight:bold;font-size:1.2em}.bootstrap-datetimepicker-widget table[data-hour-format="12"] .separator{width:4px;padding:0;margin:0}.bootstrap-datetimepicker-widget .datepicker>div{display:none}.bootstrap-datetimepicker-widget .picker-switch{text-align:center}.bootstrap-datetimepicker-widget table{width:100%;margin:0}.bootstrap-datetimepicker-widget td,.bootstrap-datetimepicker-widget th{text-align:center;width:20px;height:20px;border-radius:4px}.bootstrap-datetimepicker-widget td.day:hover,.bootstrap-datetimepicker-widget td.hour:hover,.bootstrap-datetimepicker-widget td.minute:hover,.bootstrap-datetimepicker-widget td.second:hover{background:#eee;cursor:pointer}.bootstrap-datetimepicker-widget td.old,.bootstrap-datetimepicker-widget td.new{color:#999}.bootstrap-datetimepicker-widget td.today{position:relative}.bootstrap-datetimepicker-widget td.today:before{content:'';display:inline-block;border-left:7px solid transparent;border-bottom:7px solid #428bca;border-top-color:rgba(0,0,0,.2);position:absolute;bottom:4px;right:4px}.bootstrap-datetimepicker-widget td.active,.bootstrap-datetimepicker-widget td.active:hover{background-color:#428bca;color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,.25)}.bootstrap-datetimepicker-widget td.active.today:before{border-bottom-color:#fff}.bootstrap-datetimepicker-widget td.disabled,.bootstrap-datetimepicker-widget td.disabled:hover{background:none;color:#999;cursor:not-allowed}.bootstrap-datetimepicker-widget td span{display:block;width:47px;height:54px;line-height:54px;float:left;margin:2px;cursor:pointer;border-radius:4px}.bootstrap-datetimepicker-widget td span:hover{background:#eee}.bootstrap-datetimepicker-widget td span.active{background-color:#428bca;color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,.25)}.bootstrap-datetimepicker-widget td span.old{color:#999}.bootstrap-datetimepicker-widget td span.disabled,.bootstrap-datetimepicker-widget td span.disabled:hover{background:none;color:#999;cursor:not-allowed}.bootstrap-datetimepicker-widget th.switch{width:145px}.bootstrap-datetimepicker-widget th.next,.bootstrap-datetimepicker-widget th.prev{font-size:21px}.bootstrap-datetimepicker-widget th.disabled,.bootstrap-datetimepicker-widget th.disabled:hover{background:none;color:#999;cursor:not-allowed}.bootstrap-datetimepicker-widget thead tr:first-child th{cursor:pointer}.bootstrap-datetimepicker-widget thead tr:first-child th:hover{background:#eee}.input-group.date .input-group-addon span{display:block;cursor:pointer;width:16px;height:16px}.bootstrap-datetimepicker-widget.left-oriented:before{left:auto;right:6px}.bootstrap-datetimepicker-widget.left-oriented:after{left:auto;right:7px}.bootstrap-datetimepicker-widget ul.list-unstyled li div.timepicker div.timepicker-picker table.table-condensed tbody>tr>td{padding:0!important} - -.input-group.date span.input-group-clear { - cursor: pointer; - position: absolute; - z-index: 10; - left: calc(100% - 57px); - color: #dddddd; - line-height: 32px; -} \ No newline at end of file +.bootstrap-datetimepicker-widget{top:0;left:0;width:250px;padding:4px;margin-top:1px;z-index:99999 !important;border-radius:4px}.bootstrap-datetimepicker-widget.timepicker-sbs{width:600px}.bootstrap-datetimepicker-widget.bottom:before{content:'';display:inline-block;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:7px solid #ccc;border-bottom-color:rgba(0, 0, 0, 0.2);position:absolute;top:-7px;left:7px}.bootstrap-datetimepicker-widget.bottom:after{content:'';display:inline-block;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid white;position:absolute;top:-6px;left:8px}.bootstrap-datetimepicker-widget.top:before{content:'';display:inline-block;border-left:7px solid transparent;border-right:7px solid transparent;border-top:7px solid #ccc;border-top-color:rgba(0, 0, 0, 0.2);position:absolute;bottom:-7px;left:6px}.bootstrap-datetimepicker-widget.top:after{content:'';display:inline-block;border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid white;position:absolute;bottom:-6px;left:7px}.bootstrap-datetimepicker-widget .dow{width:14.2857%}.bootstrap-datetimepicker-widget.pull-right:before{left:auto;right:6px}.bootstrap-datetimepicker-widget.pull-right:after{left:auto;right:7px}.bootstrap-datetimepicker-widget > ul{list-style-type:none;margin:0}.bootstrap-datetimepicker-widget .timepicker-hour,.bootstrap-datetimepicker-widget .timepicker-minute,.bootstrap-datetimepicker-widget .timepicker-second{width:100%;font-weight:bold;font-size:1.2em}.bootstrap-datetimepicker-widget table[data-hour-format="12"] .separator{width:4px;padding:0;margin:0}.bootstrap-datetimepicker-widget .datepicker > div{display:none}.bootstrap-datetimepicker-widget .picker-switch{text-align:center}.bootstrap-datetimepicker-widget table{width:100%;margin:0}.bootstrap-datetimepicker-widget td,.bootstrap-datetimepicker-widget th{text-align:center;width:20px;height:20px;border-radius:4px}.bootstrap-datetimepicker-widget td.day:hover,.bootstrap-datetimepicker-widget td.hour:hover,.bootstrap-datetimepicker-widget td.minute:hover,.bootstrap-datetimepicker-widget td.second:hover{background:#eeeeee;cursor:pointer}.bootstrap-datetimepicker-widget td.old,.bootstrap-datetimepicker-widget td.new{color:#999999}.bootstrap-datetimepicker-widget td.today{position:relative}.bootstrap-datetimepicker-widget td.today:before{content:'';display:inline-block;border-left:7px solid transparent;border-bottom:7px solid #428bca;border-top-color:rgba(0, 0, 0, 0.2);position:absolute;bottom:4px;right:4px}.bootstrap-datetimepicker-widget td.active,.bootstrap-datetimepicker-widget td.active:hover{background-color:#428bca;color:#fff;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25)}.bootstrap-datetimepicker-widget td.active.today:before{border-bottom-color:#fff}.bootstrap-datetimepicker-widget td.disabled,.bootstrap-datetimepicker-widget td.disabled:hover{background:none;color:#999999;cursor:not-allowed}.bootstrap-datetimepicker-widget td span{display:block;width:47px;height:54px;line-height:54px;float:left;margin:2px;cursor:pointer;border-radius:4px}.bootstrap-datetimepicker-widget td span:hover{background:#eeeeee}.bootstrap-datetimepicker-widget td span.active{background-color:#428bca;color:#fff;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25)}.bootstrap-datetimepicker-widget td span.old{color:#999999}.bootstrap-datetimepicker-widget td span.disabled,.bootstrap-datetimepicker-widget td span.disabled:hover{background:none;color:#999999;cursor:not-allowed}.bootstrap-datetimepicker-widget th.switch{width:145px}.bootstrap-datetimepicker-widget th.next,.bootstrap-datetimepicker-widget th.prev{font-size:21px}.bootstrap-datetimepicker-widget th.disabled,.bootstrap-datetimepicker-widget th.disabled:hover{background:none;color:#999999;cursor:not-allowed}.bootstrap-datetimepicker-widget thead tr:first-child th{cursor:pointer}.bootstrap-datetimepicker-widget thead tr:first-child th:hover{background:#eeeeee}.input-group.date .input-group-addon span{display:block;cursor:pointer;width:16px;height:16px}.input-group.date span.input-group-clear{cursor:pointer;position:absolute;z-index:10;left:calc(100% - 57px);color:#dddddd;line-height:32px}.bootstrap-datetimepicker-widget.left-oriented:before{left:auto;right:6px}.bootstrap-datetimepicker-widget.left-oriented:after{left:auto;right:7px}.bootstrap-datetimepicker-widget ul.list-unstyled li div.timepicker div.timepicker-picker table.table-condensed tbody > tr > td{padding:0px !important} \ No newline at end of file diff --git a/src/DateTimeField.jsx b/src/DateTimeField.jsx index 1b3fa47b..2c18ee37 100644 --- a/src/DateTimeField.jsx +++ b/src/DateTimeField.jsx @@ -80,7 +80,7 @@ DateTimeField = React.createClass({ } }, resolvePropsInputFormat: function(props) { - props = props ? props : this.props; + props = props || this.props; if(props.inputFormat) return props.inputFormat; switch(props.mode) { case Constants.MODE_TIME: From bf2b0c3a447b10cdf6b0b5841f7b265efa0a2579 Mon Sep 17 00:00:00 2001 From: Alejandro Sellero Date: Sat, 30 May 2015 15:33:49 +0200 Subject: [PATCH 13/16] Minimize css --- css/bootstrap-datetimepicker.min.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css/bootstrap-datetimepicker.min.css b/css/bootstrap-datetimepicker.min.css index e857d205..868e17ae 100644 --- a/css/bootstrap-datetimepicker.min.css +++ b/css/bootstrap-datetimepicker.min.css @@ -2,4 +2,4 @@ * Datetimepicker for Bootstrap v3 * https://github.com/Eonasdan/bootstrap-datetimepicker/ */ -.bootstrap-datetimepicker-widget{top:0;left:0;width:250px;padding:4px;margin-top:1px;z-index:99999 !important;border-radius:4px}.bootstrap-datetimepicker-widget.timepicker-sbs{width:600px}.bootstrap-datetimepicker-widget.bottom:before{content:'';display:inline-block;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:7px solid #ccc;border-bottom-color:rgba(0, 0, 0, 0.2);position:absolute;top:-7px;left:7px}.bootstrap-datetimepicker-widget.bottom:after{content:'';display:inline-block;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid white;position:absolute;top:-6px;left:8px}.bootstrap-datetimepicker-widget.top:before{content:'';display:inline-block;border-left:7px solid transparent;border-right:7px solid transparent;border-top:7px solid #ccc;border-top-color:rgba(0, 0, 0, 0.2);position:absolute;bottom:-7px;left:6px}.bootstrap-datetimepicker-widget.top:after{content:'';display:inline-block;border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid white;position:absolute;bottom:-6px;left:7px}.bootstrap-datetimepicker-widget .dow{width:14.2857%}.bootstrap-datetimepicker-widget.pull-right:before{left:auto;right:6px}.bootstrap-datetimepicker-widget.pull-right:after{left:auto;right:7px}.bootstrap-datetimepicker-widget > ul{list-style-type:none;margin:0}.bootstrap-datetimepicker-widget .timepicker-hour,.bootstrap-datetimepicker-widget .timepicker-minute,.bootstrap-datetimepicker-widget .timepicker-second{width:100%;font-weight:bold;font-size:1.2em}.bootstrap-datetimepicker-widget table[data-hour-format="12"] .separator{width:4px;padding:0;margin:0}.bootstrap-datetimepicker-widget .datepicker > div{display:none}.bootstrap-datetimepicker-widget .picker-switch{text-align:center}.bootstrap-datetimepicker-widget table{width:100%;margin:0}.bootstrap-datetimepicker-widget td,.bootstrap-datetimepicker-widget th{text-align:center;width:20px;height:20px;border-radius:4px}.bootstrap-datetimepicker-widget td.day:hover,.bootstrap-datetimepicker-widget td.hour:hover,.bootstrap-datetimepicker-widget td.minute:hover,.bootstrap-datetimepicker-widget td.second:hover{background:#eeeeee;cursor:pointer}.bootstrap-datetimepicker-widget td.old,.bootstrap-datetimepicker-widget td.new{color:#999999}.bootstrap-datetimepicker-widget td.today{position:relative}.bootstrap-datetimepicker-widget td.today:before{content:'';display:inline-block;border-left:7px solid transparent;border-bottom:7px solid #428bca;border-top-color:rgba(0, 0, 0, 0.2);position:absolute;bottom:4px;right:4px}.bootstrap-datetimepicker-widget td.active,.bootstrap-datetimepicker-widget td.active:hover{background-color:#428bca;color:#fff;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25)}.bootstrap-datetimepicker-widget td.active.today:before{border-bottom-color:#fff}.bootstrap-datetimepicker-widget td.disabled,.bootstrap-datetimepicker-widget td.disabled:hover{background:none;color:#999999;cursor:not-allowed}.bootstrap-datetimepicker-widget td span{display:block;width:47px;height:54px;line-height:54px;float:left;margin:2px;cursor:pointer;border-radius:4px}.bootstrap-datetimepicker-widget td span:hover{background:#eeeeee}.bootstrap-datetimepicker-widget td span.active{background-color:#428bca;color:#fff;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25)}.bootstrap-datetimepicker-widget td span.old{color:#999999}.bootstrap-datetimepicker-widget td span.disabled,.bootstrap-datetimepicker-widget td span.disabled:hover{background:none;color:#999999;cursor:not-allowed}.bootstrap-datetimepicker-widget th.switch{width:145px}.bootstrap-datetimepicker-widget th.next,.bootstrap-datetimepicker-widget th.prev{font-size:21px}.bootstrap-datetimepicker-widget th.disabled,.bootstrap-datetimepicker-widget th.disabled:hover{background:none;color:#999999;cursor:not-allowed}.bootstrap-datetimepicker-widget thead tr:first-child th{cursor:pointer}.bootstrap-datetimepicker-widget thead tr:first-child th:hover{background:#eeeeee}.input-group.date .input-group-addon span{display:block;cursor:pointer;width:16px;height:16px}.input-group.date span.input-group-clear{cursor:pointer;position:absolute;z-index:10;left:calc(100% - 57px);color:#dddddd;line-height:32px}.bootstrap-datetimepicker-widget.left-oriented:before{left:auto;right:6px}.bootstrap-datetimepicker-widget.left-oriented:after{left:auto;right:7px}.bootstrap-datetimepicker-widget ul.list-unstyled li div.timepicker div.timepicker-picker table.table-condensed tbody > tr > td{padding:0px !important} \ No newline at end of file +.bootstrap-datetimepicker-widget{top:0;left:0;width:250px;padding:4px;margin-top:1px;z-index:99999!important;border-radius:4px}.bootstrap-datetimepicker-widget.timepicker-sbs{width:600px}.bootstrap-datetimepicker-widget.bottom:before{content:'';display:inline-block;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:7px solid #ccc;border-bottom-color:rgba(0,0,0,0.2);position:absolute;top:-7px;left:7px}.bootstrap-datetimepicker-widget.bottom:after{content:'';display:inline-block;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid #fff;position:absolute;top:-6px;left:8px}.bootstrap-datetimepicker-widget.top:before{content:'';display:inline-block;border-left:7px solid transparent;border-right:7px solid transparent;border-top:7px solid #ccc;border-top-color:rgba(0,0,0,0.2);position:absolute;bottom:-7px;left:6px}.bootstrap-datetimepicker-widget.top:after{content:'';display:inline-block;border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid #fff;position:absolute;bottom:-6px;left:7px}.bootstrap-datetimepicker-widget .dow{width:14.2857%}.bootstrap-datetimepicker-widget.pull-right:before{left:auto;right:6px}.bootstrap-datetimepicker-widget.pull-right:after{left:auto;right:7px}.bootstrap-datetimepicker-widget > ul{list-style-type:none;margin:0}.bootstrap-datetimepicker-widget .timepicker-hour,.bootstrap-datetimepicker-widget .timepicker-minute,.bootstrap-datetimepicker-widget .timepicker-second{width:100%;font-weight:700;font-size:1.2em}.bootstrap-datetimepicker-widget table[data-hour-format="12"] .separator{width:4px;padding:0;margin:0}.bootstrap-datetimepicker-widget .datepicker > div{display:none}.bootstrap-datetimepicker-widget .picker-switch{text-align:center}.bootstrap-datetimepicker-widget table{width:100%;margin:0}.bootstrap-datetimepicker-widget td,.bootstrap-datetimepicker-widget th{text-align:center;width:20px;height:20px;border-radius:4px}.bootstrap-datetimepicker-widget td.day:hover,.bootstrap-datetimepicker-widget td.hour:hover,.bootstrap-datetimepicker-widget td.minute:hover,.bootstrap-datetimepicker-widget td.second:hover{background:#eee;cursor:pointer}.bootstrap-datetimepicker-widget td.old,.bootstrap-datetimepicker-widget td.new{color:#999}.bootstrap-datetimepicker-widget td.today{position:relative}.bootstrap-datetimepicker-widget td.today:before{content:'';display:inline-block;border-left:7px solid transparent;border-bottom:7px solid #428bca;border-top-color:rgba(0,0,0,0.2);position:absolute;bottom:4px;right:4px}.bootstrap-datetimepicker-widget td.active,.bootstrap-datetimepicker-widget td.active:hover{background-color:#428bca;color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,0.25)}.bootstrap-datetimepicker-widget td.active.today:before{border-bottom-color:#fff}.bootstrap-datetimepicker-widget td.disabled,.bootstrap-datetimepicker-widget td.disabled:hover{background:none;color:#999;cursor:not-allowed}.bootstrap-datetimepicker-widget td span{display:block;width:47px;height:54px;line-height:54px;float:left;margin:2px;cursor:pointer;border-radius:4px}.bootstrap-datetimepicker-widget td span:hover{background:#eee}.bootstrap-datetimepicker-widget td span.active{background-color:#428bca;color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,0.25)}.bootstrap-datetimepicker-widget td span.old{color:#999}.bootstrap-datetimepicker-widget td span.disabled,.bootstrap-datetimepicker-widget td span.disabled:hover{background:none;color:#999;cursor:not-allowed}.bootstrap-datetimepicker-widget th.switch{width:145px}.bootstrap-datetimepicker-widget th.next,.bootstrap-datetimepicker-widget th.prev{font-size:21px}.bootstrap-datetimepicker-widget th.disabled,.bootstrap-datetimepicker-widget th.disabled:hover{background:none;color:#999;cursor:not-allowed}.bootstrap-datetimepicker-widget thead tr:first-child th{cursor:pointer}.bootstrap-datetimepicker-widget thead tr:first-child th:hover{background:#eee}.input-group.date .input-group-addon span{display:block;cursor:pointer;width:16px;height:16px}.bootstrap-datetimepicker-widget.left-oriented:before{left:auto;right:6px}.bootstrap-datetimepicker-widget.left-oriented:after{left:auto;right:7px}.bootstrap-datetimepicker-widget ul.list-unstyled li div.timepicker div.timepicker-picker table.table-condensed tbody > tr > td{padding:0!important} \ No newline at end of file From 88d64bfbb558995ebf041eb771c6e40b7dea2df2 Mon Sep 17 00:00:00 2001 From: Alejandro Sellero Date: Sat, 30 May 2015 15:44:48 +0200 Subject: [PATCH 14/16] Updating readme --- README.md | 30 +++++++++++++++++------------- 1 file changed, 17 insertions(+), 13 deletions(-) diff --git a/README.md b/README.md index a7940d1b..f9b239f9 100644 --- a/README.md +++ b/README.md @@ -29,19 +29,23 @@ API DateTimeField ======== -| Name | Type | Default | Description | -| ------------ | ------- | ------- | ----------- | -| **dateTime** | string | moment().format('x') | Represents the inital dateTime, this string is then parsed by moment.js | -| **format** | string | "x" | Defines the format moment.js should use to parse and output the date to onChange | -| **inputFormat** | string | "MM/DD/YY h:mm A" | Defines the way the date is represented in the HTML input | -| **onChange** | function | x => console.log(x) | Callback trigger when the date changes | -| **showToday** | boolean | true | Highlights today's date | -| **daysOfWeekDisabled** | array of integer | [] | Disables clicking on some days. Goes from 0 (Sunday) to 6 (Saturday). | -| **viewMode** | string or number | 'days' | The default view to display when the picker is shown. ('years', 'months', 'days') | -| **inputProps** | object | undefined | Defines additional attributes for the input element of the component. | -| **minDate** | moment | undefined | The earliest date allowed for entry in the calendar view. | -| **maxDate** | moment | undefined | The latest date allowed for entry in the calendar view. | -| **mode** | string | undefined | Allows to selectively display only the time picker ('time') or the date picker ('date') | +| Name | Type | Default | Description | +| ------------ | ------- | ------- | ----------- | +| **dateTime** | string | moment().format('x') | Represents the inital view dateTime, this string is then parsed by moment.js | +| **value** | string | undefined | Represent the selectedDate of the picker. | +| **placeholder** | string | "Select a Date" | Placeholder of the input field (replace defaultText). | +| **clearable** | boolean | false | Defined if the selector should offer the possibility to clean the selected date. | +| **disabled** | boolean | false | Defines if the selector its enabled or disabled. | +| **format** | string | "x" | Defines the format moment.js should use to parse and output the date to onChange | +| **inputFormat** | string | "MM/DD/YY h:mm A" | Defines the way the date is represented in the HTML input | +| **onChange** | function | x => console.log(x) | Callback trigger when the date changes | +| **showToday** | boolean | true | Highlights today's date | +| **daysOfWeekDisabled** | array of integer | [] | Disables clicking on some days. Goes from 0 (Sunday) to 6 (Saturday). | +| **viewMode** | string or number | 'days' | The default view to display when the picker is shown. ('years', 'months', 'days') | +| **inputProps** | object | undefined | Defines additional attributes for the input element of the component. | +| **minDate** | moment | undefined | The earliest date allowed for entry in the calendar view. | +| **maxDate** | moment | undefined | The latest date allowed for entry in the calendar view. | +| **mode** | string | undefined | Allows to selectively display only the time picker ('time') or the date picker ('date') | Update Warning =============================== From 446300febd71efb376b259895f522e3b515b8e76 Mon Sep 17 00:00:00 2001 From: Alejandro Sellero Date: Sat, 30 May 2015 15:46:56 +0200 Subject: [PATCH 15/16] Examples texts --- examples/basic/basic.jsx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/examples/basic/basic.jsx b/examples/basic/basic.jsx index 9d32123c..9440dd86 100644 --- a/examples/basic/basic.jsx +++ b/examples/basic/basic.jsx @@ -22,11 +22,11 @@ var Basic = React.createClass({
    - Example with default Text + Example with custom placeholder - 
     {''}
    + 
     {''}
    @@ -50,7 +50,7 @@ var Basic = React.createClass({
    - just time picker + Just time picker @@ -59,7 +59,7 @@ var Basic = React.createClass({
    - just date picker + Just date picker @@ -78,7 +78,7 @@ var Basic = React.createClass({
    - clearable + Clearable @@ -101,7 +101,7 @@ var Basic = React.createClass({
    - disables + Disables 
     {''}
    From a0df722396d313524ca00f2c1fd85d54b7ad21ea Mon Sep 17 00:00:00 2001 From: Alejandro Sellero Date: Mon, 1 Jun 2015 19:06:57 +0200 Subject: [PATCH 16/16] Cleaning package.json and bower.json for eventual merge to original project. --- bower.json | 2 +- package.json | 9 +++++---- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/bower.json b/bower.json index 47bd086c..791c25f8 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "react-bootstrap-datetimepicker", - "version": "0.0.15", + "version": "0.0.17", "main": [ "./dist/react-bootstrap-datetimepicker.min.js" ], diff --git a/package.json b/package.json index a486a20a..141e8c4d 100644 --- a/package.json +++ b/package.json @@ -1,10 +1,11 @@ { - "name": "mnq-react-bootstrap-datetimepicker", - "version": "0.1.5", + "name": "react-bootstrap-datetimepicker", + "version": "0.0.17", "description": "A bootstrap datetime picker component for React.js", + "homepage": "http://dev.quri.com/react-bootstrap-datetimepicker/", "repository": { "type": "git", - "url": "http://github.com/alex1712/react-bootstrap-datetimepicker" + "url": "http://github.com/quri/react-bootstrap-datetimepicker" }, "main": "./lib/DateTimeField.js", "scripts": { @@ -22,7 +23,7 @@ "datetimepicker", "datetime" ], - "author": "Alex", + "author": "Loïc CHOLLIER ", "license": "MIT", "peerDependencies": { "react": ">=0.12"