diff --git a/README.md b/README.md index 635776e5..f9b239f9 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 =============================== @@ -29,18 +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. | +| 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 =============================== 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/css/bootstrap-datetimepicker.css b/css/bootstrap-datetimepicker.css index 05c1d8c9..7de85d62 100644 --- a/css/bootstrap-datetimepicker.css +++ b/css/bootstrap-datetimepicker.css @@ -191,6 +191,14 @@ 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; diff --git a/css/bootstrap-datetimepicker.min.css b/css/bootstrap-datetimepicker.min.css index c685f7bf..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,.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,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 diff --git a/dist/react-bootstrap-datetimepicker.js b/dist/react-bootstrap-datetimepicker.js index b8689fc7..b7b44320 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); @@ -71,102 +72,153 @@ return /******/ (function(modules) { // webpackBootstrap Glyphicon = __webpack_require__(4).Glyphicon; + Constants = __webpack_require__(6); + DateTimeField = React.createClass({displayName: "DateTimeField", propTypes: { dateTime: React.PropTypes.string, + value: React.PropTypes.string, onChange: React.PropTypes.func, format: React.PropTypes.string, - inputFormat: React.PropTypes.string, inputProps: React.PropTypes.object, - defaultText: React.PropTypes.string, + inputFormat: 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', - inputFormat: "MM/DD/YY h:mm A", showToday: true, viewMode: 'days', daysOfWeekDisabled: [], - onChange: function (x) { - console.log(x); - } + mode: Constants.MODE_DATETIME, + placeholder: "Select a date", + 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) { + return moment(props.value, props.format, true); + } else if (props.minDate) { + return props.minDate.clone().startOf("month"); + } else { + return props.dateTime ? moment(props.dateTime, props.format, true).startOf("month") : moment().startOf("month"); + } + }, 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', 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.props.inputFormat) + 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(moment(nextProps.dateTime, nextProps.format, true).isValid()) { + 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 + }); + } else if(this.props.minDate !== nextProps.minDate) { 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: this.getInitialViewDate(nextProps) }); } }, 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) }); } 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.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.props.inputFormat) + viewDate: this.getCurrentWorkingDate(), + 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.props.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)); return this.setState({ - inputValue: this.state.selectedDate.format(this.props.inputFormat) + inputValue: this.state.selectedDate.format(this.state.inputFormat) }); }); }, @@ -182,21 +234,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() }); }); }, @@ -217,21 +271,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() }); }); }, @@ -251,10 +307,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.props.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.props.inputFormat)); + return this.onChange(this.getCurrentWorkingDate().clone().add(12, 'hours').format(this.state.inputFormat)); } }, togglePicker: function() { @@ -264,6 +320,7 @@ return /******/ (function(modules) { // webpackBootstrap }); }, onClick: function() { + if(this.props.disabled) return; var classes, gBCR, offset, placePosition, scrollTop, styles; if (this.state.showPicker) { return this.closePicker(); @@ -334,6 +391,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(), @@ -347,6 +408,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, @@ -368,8 +430,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: "calendar"})) + 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}) + ) ) ) ); @@ -404,13 +474,16 @@ return /******/ (function(modules) { // webpackBootstrap var DateTimePicker, DateTimePickerDate, DateTimePickerTime, Glyphicon, React; React = __webpack_require__(2); + classNames = __webpack_require__(7); - DateTimePickerDate = __webpack_require__(6); + DateTimePickerDate = __webpack_require__(8); - DateTimePickerTime = __webpack_require__(7); + DateTimePickerTime = __webpack_require__(9); Glyphicon = __webpack_require__(4).Glyphicon; + Constants = __webpack_require__(6); + DateTimePicker = React.createClass({displayName: "DateTimePicker", propTypes: { showDatePicker: React.PropTypes.bool, @@ -418,12 +491,13 @@ 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, 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, @@ -472,30 +546,37 @@ 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, 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}, + React.createElement("div", {className: classNames(this.props.widgetClasses), style: this.props.widgetStyle}, React.createElement("ul", {className: "list-unstyled"}, 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,6 +593,65 @@ 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 __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; @@ -529,7 +669,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, @@ -660,19 +800,21 @@ return /******/ (function(modules) { // webpackBootstrap /***/ }, -/* 7 */ +/* 9 */ /***/ function(module, exports, __webpack_require__) { var DateTimePickerHours, DateTimePickerMinutes, DateTimePickerTime, Glyphicon, React; React = __webpack_require__(2); - DateTimePickerMinutes = __webpack_require__(8); + DateTimePickerMinutes = __webpack_require__(13); - DateTimePickerHours = __webpack_require__(9); + DateTimePickerHours = __webpack_require__(14); Glyphicon = __webpack_require__(4).Glyphicon; + Constants = __webpack_require__(6); + DateTimePickerTime = React.createClass({displayName: "DateTimePickerTime", propTypes: { setSelectedHour: React.PropTypes.func.isRequired, @@ -682,8 +824,9 @@ return /******/ (function(modules) { // webpackBootstrap subtractMinute: React.PropTypes.func.isRequired, addMinute: React.PropTypes.func.isRequired, viewDate: React.PropTypes.object.isRequired, - selectedDate: React.PropTypes.object.isRequired, - togglePeriod: React.PropTypes.func.isRequired + selectedDate: React.PropTypes.object, + togglePeriod: React.PropTypes.func.isRequired, + mode: React.PropTypes.oneOf([Constants.MODE_DATE, Constants.MODE_DATETIME, Constants.MODE_TIME]) }, getInitialState: function() { return { @@ -691,6 +834,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 +852,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; } @@ -738,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.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, @@ -782,148 +925,6 @@ 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__) { @@ -931,6 +932,7 @@ return /******/ (function(modules) { // webpackBootstrap var DateTimePickerDays, React, moment; React = __webpack_require__(2); + classNames = __webpack_require__(7); moment = __webpack_require__(3); @@ -939,7 +941,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, @@ -952,8 +954,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"); @@ -973,10 +979,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; } @@ -998,7 +1004,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); @@ -1057,6 +1063,7 @@ return /******/ (function(modules) { // webpackBootstrap var DateTimePickerMonths, React, moment; React = __webpack_require__(2); + classNames = __webpack_require__(7); moment = __webpack_require__(3); @@ -1065,22 +1072,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", {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; @@ -1120,28 +1130,32 @@ return /******/ (function(modules) { // webpackBootstrap 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 }, + 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) { 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", {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++; } @@ -1177,6 +1191,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 262a2f58..ad08ed10 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,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(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},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/examples/basic/basic.jsx b/examples/basic/basic.jsx index 5d40ec50..9440dd86 100644 --- a/examples/basic/basic.jsx +++ b/examples/basic/basic.jsx @@ -5,63 +5,112 @@ var moment = require('moment'); var Basic = React.createClass({ render: function() { - return
-
-
-

React Bootstrap DateTimePicker

- This project is a port of https://github.com/Eonasdan/bootstrap-datetimepicker for React.js -
-
-
-
- Default Basic Example - - 
 {''}
-
-
-
-
- Example with default Text - - 
 {''}
-
-
-
-
- ViewMode set to years view with custom inputFormat - - 
 {''}
-
-
-
-
- daysOfWeekDisabled - - 
 {''}
- -
-
-
-
- minDate and maxDate - - 
 {''}
- -
-
-
; + return ( +
+
+
+

React Bootstrap DateTimePicker

+ This project is a port of https://github.com/Eonasdan/bootstrap-datetimepicker for React.js +
+
+
+
+ Default Basic Example + + 
 {''}
+
+
+
+
+ Example with custom placeholder + + 
 {''}
+
+
+
+
+ ViewMode set to years view with custom inputFormat + + 
 {''}
+
+
+
+
+ daysOfWeekDisabled + + 
 {''}
+
+
+
+
+ Just time picker + + 
 {''}
+
+
+
+
+ Just date picker + + 
 {''}
+
+
+
+
+ minDate and maxDate + + 
 {''}
+
+
+
+
+ Clearable + + 
 {''}
+
+
+
+
+ Empty + + 
 {''}
+
+
+
+
+ Initial Value + + 
 {''}
+
+
+
+
+ Disables + + 
 {''}
+ + 
 {''}
+
+
+
+ ); } - }); diff --git a/examples/bootstrap-datetimepicker.min.css b/examples/bootstrap-datetimepicker.min.css index c3e9a233..7efd9894 100644 --- a/examples/bootstrap-datetimepicker.min.css +++ b/examples/bootstrap-datetimepicker.min.css @@ -3,3 +3,11 @@ //! 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 { + cursor: pointer; + position: absolute; + z-index: 10; + left: calc(100% - 57px); + color: #dddddd; + line-height: 32px; +} \ No newline at end of file diff --git a/package.json b/package.json index 6ea38b7f..141e8c4d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-bootstrap-datetimepicker", - "version": "0.0.15", + "version": "0.0.17", "description": "A bootstrap datetime picker component for React.js", "homepage": "http://dev.quri.com/react-bootstrap-datetimepicker/", "repository": { @@ -50,6 +50,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/Constants.jsx b/src/Constants.jsx new file mode 100644 index 00000000..9036c9d8 --- /dev/null +++ b/src/Constants.jsx @@ -0,0 +1,5 @@ +module.exports = { + MODE_DATE: 'date', + MODE_DATETIME: 'datetime', + MODE_TIME: 'time' +}; \ No newline at end of file diff --git a/src/DateTimeField.jsx b/src/DateTimeField.jsx index 35e74453..2c18ee37 100644 --- a/src/DateTimeField.jsx +++ b/src/DateTimeField.jsx @@ -1,109 +1,161 @@ var DateTimeField, DateTimePicker, Glyphicon, React, moment; React = require('react'); +classNames = require('classnames'); DateTimePicker = require('./DateTimePicker'); moment = require('moment'); -Glyphicon = require('react-bootstrap').Glyphicon; +var Glyphicon = require('react-bootstrap').Glyphicon; + +var Constants = require('./Constants'); DateTimeField = React.createClass({ propTypes: { dateTime: React.PropTypes.string, + value: React.PropTypes.string, onChange: React.PropTypes.func, format: React.PropTypes.string, - inputFormat: React.PropTypes.string, inputProps: React.PropTypes.object, - defaultText: React.PropTypes.string, + inputFormat: 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', - inputFormat: "MM/DD/YY h:mm A", showToday: true, viewMode: 'days', daysOfWeekDisabled: [], - onChange: function (x) { - console.log(x); - } + mode: Constants.MODE_DATETIME, + placeholder: "Select a date", + onChange: function (x) {} }; }, + 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.clone().startOf("month"); + } else { + return props.dateTime ? moment(props.dateTime, props.format, true).startOf("month") : moment().startOf("month"); + } + }, 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', 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.props.inputFormat) + viewDate: this.getInitialViewDate(), + selectedDate: this.props.value ? moment(this.props.value, this.props.format, true) : null, + inputValue: this.props.value ? moment(this.props.value, this.props.format, true).format(this.resolvePropsInputFormat()) : null }; }, 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: this.getInitialViewDate(nextProps), + selectedDate: nextProps.value ? moment(nextProps.value, nextProps.format, true) : 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({ + viewDate: this.getInitialViewDate(nextProps) }); } }, + resolvePropsInputFormat: function(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.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) }); } 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)); }); }, + 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) { - 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.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.props.inputFormat) + viewDate: this.getCurrentWorkingDate(), + 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.props.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)); return this.setState({ - inputValue: this.state.selectedDate.format(this.props.inputFormat) + inputValue: this.state.selectedDate.format(this.state.inputFormat) }); }); }, @@ -119,21 +171,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() }); }); }, @@ -154,21 +208,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() }); }); }, @@ -188,10 +244,10 @@ DateTimeField = React.createClass({ }); }, togglePeriod: function() { - if (this.state.selectedDate.hour() > 12) { - return this.onChange(this.state.selectedDate.clone().subtract(12, 'hours').format(this.props.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.props.inputFormat)); + return this.onChange(this.getCurrentWorkingDate().clone().add(12, 'hours').format(this.state.inputFormat)); } }, togglePicker: function() { @@ -201,6 +257,7 @@ DateTimeField = React.createClass({ }); }, onClick: function() { + if(this.props.disabled) return; var classes, gBCR, offset, placePosition, scrollTop, styles; if (this.state.showPicker) { return this.closePicker(); @@ -255,8 +312,7 @@ DateTimeField = React.createClass({ }); }, renderOverlay: function() { - var styles; - styles = { + var styles = { position: 'fixed', top: 0, bottom: 0, @@ -284,6 +340,7 @@ DateTimeField = React.createClass({ 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} @@ -305,8 +362,16 @@ DateTimeField = React.createClass({ togglePeriod={this.togglePeriod} />
- - + + { + this.props.clearable && this.state.selectedDate && !this.props.disabled ? + × : + null + } + + +
); diff --git a/src/DateTimePicker.jsx b/src/DateTimePicker.jsx index ae566ed0..2f8a2233 100644 --- a/src/DateTimePicker.jsx +++ b/src/DateTimePicker.jsx @@ -1,12 +1,15 @@ var DateTimePicker, DateTimePickerDate, DateTimePickerTime, Glyphicon, React; React = require('react/addons'); +classNames = require('classnames'); DateTimePickerDate = require('./DateTimePickerDate'); DateTimePickerTime = require('./DateTimePickerTime'); -Glyphicon = require('react-bootstrap').Glyphicon; +var Glyphicon = require('react-bootstrap').Glyphicon; + +var Constants = require('./Constants'); DateTimePicker = React.createClass({ propTypes: { @@ -15,12 +18,13 @@ 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, 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, @@ -69,7 +73,6 @@ DateTimePicker = React.createClass({
    • ); } }, + renderSwitchButton: function() { + return this.props.mode === Constants.MODE_DATETIME ? + ( +
  • + +
    • + ) : + null; + }, render: function() { return ( -
    +
      {this.renderDatePicker()} -
    • - -
      • + {this.renderSwitchButton()} {this.renderTimePicker()} 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..cc316b89 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, @@ -23,7 +24,8 @@ DateTimePickerDays = React.createClass({ }; }, 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.props.selectedDate; year = this.props.viewDate.year(); month = this.props.viewDate.month(); prevMonth = this.props.viewDate.clone().subtract(1, "months"); @@ -43,10 +45,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 +70,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/DateTimePickerHours.jsx b/src/DateTimePickerHours.jsx index 05832a1d..42370d93 100644 --- a/src/DateTimePickerHours.jsx +++ b/src/DateTimePickerHours.jsx @@ -1,14 +1,29 @@ var DateTimePickerHours, React; React = require('react'); +var Glyphicon = require('react-bootstrap').Glyphicon; +var Constants = require('./Constants'); DateTimePickerHours = React.createClass({ propTypes: { - setSelectedHour: React.PropTypes.func.isRequired + setSelectedHour: React.PropTypes.func.isRequired, + onSwitch: React.PropTypes.func.isRequired + }, + renderSwitchButton: function() { + return this.props.mode === Constants.MODE_TIME ? + ( +
        +
      • + +
        • +
      + ) : + null; }, render: function() { return (
      + {this.renderSwitchButton()} diff --git a/src/DateTimePickerMinutes.jsx b/src/DateTimePickerMinutes.jsx index fe9784d7..0dbb9420 100644 --- a/src/DateTimePickerMinutes.jsx +++ b/src/DateTimePickerMinutes.jsx @@ -1,14 +1,29 @@ var DateTimePickerMinutes, React; React = require('react'); +var Glyphicon = require('react-bootstrap').Glyphicon; +var Constants = require('./Constants'); DateTimePickerMinutes = React.createClass({ propTypes: { - setSelectedMinute: React.PropTypes.func.isRequired + setSelectedMinute: React.PropTypes.func.isRequired, + onSwitch: React.PropTypes.func.isRequired + }, + renderSwitchButton: function() { + return this.props.mode === Constants.MODE_TIME ? + ( +
        +
      • + +
        • +
      + ) : + null; }, render: function() { return (
      + {this.renderSwitchButton()}
      diff --git a/src/DateTimePickerMonths.jsx b/src/DateTimePickerMonths.jsx index 6b723653..fc1900ae 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,22 @@ 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 }, renderMonths: function() { var classes, i, month, months, monthsShort; - month = this.props.selectedDate.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.props.selectedDate.year() + 'active': i === month && this.props.selectedDate && this.props.viewDate.year() === this.props.selectedDate.year() }; - months.push({monthsShort[i]}); + months.push({monthsShort[i]}); i++; } return months; diff --git a/src/DateTimePickerTime.jsx b/src/DateTimePickerTime.jsx index 66aca42a..d91cbf50 100644 --- a/src/DateTimePickerTime.jsx +++ b/src/DateTimePickerTime.jsx @@ -6,7 +6,9 @@ DateTimePickerMinutes = require('./DateTimePickerMinutes'); DateTimePickerHours = require('./DateTimePickerHours'); -Glyphicon = require('react-bootstrap').Glyphicon; +var Glyphicon = require('react-bootstrap').Glyphicon; + +var Constants = require('./Constants'); DateTimePickerTime = React.createClass({ propTypes: { @@ -17,8 +19,8 @@ DateTimePickerTime = React.createClass({ subtractMinute: React.PropTypes.func.isRequired, 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 { @@ -26,6 +28,12 @@ DateTimePickerTime = React.createClass({ hoursDisplayed: false }; }, + goBack: function() { + return this.setState({ + minutesDisplayed: false, + hoursDisplayed: false + }); + }, showMinutes: function() { return this.setState({ minutesDisplayed: true @@ -38,20 +46,14 @@ DateTimePickerTime = React.createClass({ }, renderMinutes: function() { if (this.state.minutesDisplayed) { - return ( - ); + return ; } else { return null; } }, renderHours: function() { if (this.state.hoursDisplayed) { - return ( - ); + return ; } else { return null; } @@ -73,15 +75,15 @@ DateTimePickerTime = React.createClass({ - + - + - + diff --git a/src/DateTimePickerYears.jsx b/src/DateTimePickerYears.jsx index 663306b3..a7ea595c 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.selectedDate && this.props.selectedDate.year() === year }; - years.push({year}); + years.push({year}); year++; i++; }
      {this.props.selectedDate.format('h')}{this.props.viewDate.format('h')} :{this.props.selectedDate.format('mm')}{this.props.viewDate.format('mm')}