diff --git a/README.md b/README.md index d3960fc4..3fe2ff23 100644 --- a/README.md +++ b/README.md @@ -6,15 +6,17 @@ This project is a port of https://github.com/Eonasdan/bootstrap-datetimepicker f Usage =============================== -Installation : -``` -npm install react-bootstrap-datetimepicker -``` +Installation : `npm install --save react-bootstrap-datetimepicker` Then + ```javascript +//ES5 var DateTimeField = require('react-bootstrap-datetimepicker'); +//ES6 +import DateTimeField from "react-bootstrap-datetimepicker" + ... render: function() { @@ -33,8 +35,9 @@ DateTimeField | ------------ | ------- | ------- | ----------- | | **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. It must be a format understanable by moment.js | +| **inputFormat** | string | "MM/DD/YY h:mm A" | Defines the way the date is represented in the HTML input. It must be a format understandable by moment.js | | **onChange** | function | x => console.log(x) | Callback trigger when the date changes. `x` is the new datetime value. | +| **onBlur** | function | x => console.log(x) | Callback trigger when the date field blurs. `x` is the new datetime value. | | **showToday** | boolean | true | Highlights today's date | | **size** | string | "md" | Changes the size of the date picker input field. Sizes: "sm", "md", "lg" | | **daysOfWeekDisabled** | array of integer | [] | Disables clicking on some days. Goes from 0 (Sunday) to 6 (Saturday). | @@ -42,17 +45,19 @@ DateTimeField | **inputProps** | object | undefined | Defines additional attributes for the input element of the component. | | **minDate** | moment | undefined | The earliest date allowed for entry in the calendar view. | | **maxDate** | moment | undefined | The latest date allowed for entry in the calendar view. | -| **mode** | string | undefined | Allows to selectively display only the time picker ('time') or the date picker ('date') | +| **mode** | string | undefined | Allows to selectively display only the time picker ('time'), date picker ('date'), or month picker ('month') | | **defaultText** | string | {dateTime} | Sets the initial value. Could be an empty string, or helper text. | Update Warning =============================== Starting from 0.0.6, the 3 github repositories `react-bootstrap-datetimepicker`, `react-bootstrap-datetimepicker-npm` and `react-bootstrap-datetimepicker-bower` are merged in a single one. The build process changed but the API is the same. However now the package exports DateTimeField directly, no need to do : + ```javascript var DateTimeField = require('react-bootstrap-datetimepicker').DateTimeField; ``` instead use : + ```javascript var DateTimeField = require('react-bootstrap-datetimepicker'); ``` diff --git a/dist/react-bootstrap-datetimepicker.js b/dist/react-bootstrap-datetimepicker.js deleted file mode 100644 index 6fa6d9d3..00000000 --- a/dist/react-bootstrap-datetimepicker.js +++ /dev/null @@ -1,2611 +0,0 @@ -(function webpackUniversalModuleDefinition(root, factory) { - if(typeof exports === 'object' && typeof module === 'object') - module.exports = factory(require("React"), require("moment")); - else if(typeof define === 'function' && define.amd) - define(["React", "moment"], factory); - else if(typeof exports === 'object') - exports["ReactBootstrapDatetimepicker"] = factory(require("React"), require("moment")); - else - root["ReactBootstrapDatetimepicker"] = factory(root["React"], root["moment"]); -})(this, function(__WEBPACK_EXTERNAL_MODULE_38__, __WEBPACK_EXTERNAL_MODULE_39__) { -return /******/ (function(modules) { // webpackBootstrap -/******/ // The module cache -/******/ var installedModules = {}; - -/******/ // The require function -/******/ function __webpack_require__(moduleId) { - -/******/ // Check if module is in cache -/******/ if(installedModules[moduleId]) -/******/ return installedModules[moduleId].exports; - -/******/ // Create a new module (and put it into the cache) -/******/ var module = installedModules[moduleId] = { -/******/ exports: {}, -/******/ id: moduleId, -/******/ loaded: false -/******/ }; - -/******/ // Execute the module function -/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); - -/******/ // Flag the module as loaded -/******/ module.loaded = true; - -/******/ // Return the exports of the module -/******/ return module.exports; -/******/ } - - -/******/ // expose the modules object (__webpack_modules__) -/******/ __webpack_require__.m = modules; - -/******/ // expose the module cache -/******/ __webpack_require__.c = installedModules; - -/******/ // __webpack_public_path__ -/******/ __webpack_require__.p = ""; - -/******/ // Load entry module and return exports -/******/ return __webpack_require__(0); -/******/ }) -/************************************************************************/ -/******/ ([ -/* 0 */ -/***/ function(module, exports, __webpack_require__) { - - module.exports = __webpack_require__(1); - - -/***/ }, -/* 1 */ -/***/ function(module, exports, __webpack_require__) { - - "use strict"; - - var _get = __webpack_require__(2)["default"]; - - var _inherits = __webpack_require__(18)["default"]; - - var _createClass = __webpack_require__(27)["default"]; - - var _classCallCheck = __webpack_require__(30)["default"]; - - var _extends = __webpack_require__(31)["default"]; - - var _interopRequireDefault = __webpack_require__(37)["default"]; - - Object.defineProperty(exports, "__esModule", { - value: true - }); - - var _react = __webpack_require__(38); - - var _react2 = _interopRequireDefault(_react); - - var _moment = __webpack_require__(39); - - var _moment2 = _interopRequireDefault(_moment); - - var _classnames = __webpack_require__(40); - - var _classnames2 = _interopRequireDefault(_classnames); - - var _DateTimePickerJs = __webpack_require__(41); - - var _DateTimePickerJs2 = _interopRequireDefault(_DateTimePickerJs); - - var _ConstantsJs = __webpack_require__(51); - - var _ConstantsJs2 = _interopRequireDefault(_ConstantsJs); - - var DateTimeField = (function (_Component) { - _inherits(DateTimeField, _Component); - - function DateTimeField() { - var _this = this; - - _classCallCheck(this, DateTimeField); - - _get(Object.getPrototypeOf(DateTimeField.prototype), "constructor", this).apply(this, arguments); - - this.resolvePropsInputFormat = function () { - if (_this.props.inputFormat) { - return _this.props.inputFormat; - } - switch (_this.props.mode) { - case _ConstantsJs2["default"].MODE_TIME: - return "h:mm A"; - case _ConstantsJs2["default"].MODE_DATE: - return "MM/DD/YY"; - default: - return "MM/DD/YY h:mm A"; - } - }; - - this.state = { - showDatePicker: this.props.mode !== _ConstantsJs2["default"].MODE_TIME, - showTimePicker: this.props.mode === _ConstantsJs2["default"].MODE_TIME, - inputFormat: this.resolvePropsInputFormat(), - buttonIcon: this.props.mode === _ConstantsJs2["default"].MODE_TIME ? "glyphicon-time" : "glyphicon-calendar", - widgetStyle: { - display: "block", - position: "absolute", - left: -9999, - zIndex: "9999 !important" - }, - viewDate: (0, _moment2["default"])(this.props.dateTime, this.props.format, true).startOf("month"), - selectedDate: (0, _moment2["default"])(this.props.dateTime, this.props.format, true), - inputValue: typeof this.props.defaultText !== "undefined" ? this.props.defaultText : (0, _moment2["default"])(this.props.dateTime, this.props.format, true).format(this.resolvePropsInputFormat()) - }; - - this.componentWillReceiveProps = function (nextProps) { - var state = {}; - if (nextProps.inputFormat !== _this.props.inputFormat) { - state.inputFormat = nextProps.inputFormat; - state.inputValue = (0, _moment2["default"])(nextProps.dateTime, nextProps.format, true).format(nextProps.inputFormat); - } - - if (nextProps.dateTime !== _this.props.dateTime && (0, _moment2["default"])(nextProps.dateTime, nextProps.format, true).isValid()) { - state.viewDate = (0, _moment2["default"])(nextProps.dateTime, nextProps.format, true).startOf("month"); - state.selectedDate = (0, _moment2["default"])(nextProps.dateTime, nextProps.format, true); - state.inputValue = (0, _moment2["default"])(nextProps.dateTime, nextProps.format, true).format(nextProps.inputFormat ? nextProps.inputFormat : _this.state.inputFormat); - } - return _this.setState(state); - }; - - this.onChange = function (event) { - var value = event.target == null ? event : event.target.value; - if ((0, _moment2["default"])(value, _this.state.inputFormat, true).isValid()) { - _this.setState({ - selectedDate: (0, _moment2["default"])(value, _this.state.inputFormat, true), - viewDate: (0, _moment2["default"])(value, _this.state.inputFormat, true).startOf("month") - }); - } - - return _this.setState({ - inputValue: value - }, function () { - return this.props.onChange((0, _moment2["default"])(this.state.inputValue, this.state.inputFormat, true).format(this.props.format), value); - }); - }; - - this.getValue = function () { - return (0, _moment2["default"])(_this.state.inputValue, _this.props.inputFormat, true).format(_this.props.format); - }; - - this.setSelectedDate = function (e) { - var target = e.target; - - if (target.className && !target.className.match(/disabled/g)) { - var month = undefined; - if (target.className.indexOf("new") >= 0) month = _this.state.viewDate.month() + 1;else if (target.className.indexOf("old") >= 0) month = _this.state.viewDate.month() - 1;else month = _this.state.viewDate.month(); - return _this.setState({ - selectedDate: _this.state.viewDate.clone().month(month).date(parseInt(e.target.innerHTML)).hour(_this.state.selectedDate.hours()).minute(_this.state.selectedDate.minutes()) - }, function () { - this.closePicker(); - this.props.onChange(this.state.selectedDate.format(this.props.format)); - return this.setState({ - inputValue: this.state.selectedDate.format(this.state.inputFormat) - }); - }); - } - }; - - this.setSelectedHour = function (e) { - return _this.setState({ - selectedDate: _this.state.selectedDate.clone().hour(parseInt(e.target.innerHTML)).minute(_this.state.selectedDate.minutes()) - }, function () { - this.closePicker(); - this.props.onChange(this.state.selectedDate.format(this.props.format)); - return this.setState({ - inputValue: this.state.selectedDate.format(this.state.inputFormat) - }); - }); - }; - - this.setSelectedMinute = function (e) { - return _this.setState({ - selectedDate: _this.state.selectedDate.clone().hour(_this.state.selectedDate.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.state.inputFormat) - }); - }); - }; - - this.setViewMonth = function (month) { - return _this.setState({ - viewDate: _this.state.viewDate.clone().month(month) - }); - }; - - this.setViewYear = function (year) { - return _this.setState({ - viewDate: _this.state.viewDate.clone().year(year) - }); - }; - - this.addMinute = function () { - return _this.setState({ - selectedDate: _this.state.selectedDate.clone().add(1, "minutes") - }, function () { - this.props.onChange(this.state.selectedDate.format(this.props.format)); - return this.setState({ - inputValue: this.state.selectedDate.format(this.resolvePropsInputFormat()) - }); - }); - }; - - this.addHour = function () { - return _this.setState({ - selectedDate: _this.state.selectedDate.clone().add(1, "hours") - }, function () { - this.props.onChange(this.state.selectedDate.format(this.props.format)); - return this.setState({ - inputValue: this.state.selectedDate.format(this.resolvePropsInputFormat()) - }); - }); - }; - - this.addMonth = function () { - return _this.setState({ - viewDate: _this.state.viewDate.add(1, "months") - }); - }; - - this.addYear = function () { - return _this.setState({ - viewDate: _this.state.viewDate.add(1, "years") - }); - }; - - this.addDecade = function () { - return _this.setState({ - viewDate: _this.state.viewDate.add(10, "years") - }); - }; - - this.subtractMinute = function () { - return _this.setState({ - selectedDate: _this.state.selectedDate.clone().subtract(1, "minutes") - }, function () { - _this.props.onChange(_this.state.selectedDate.format(_this.props.format)); - return _this.setState({ - inputValue: _this.state.selectedDate.format(_this.resolvePropsInputFormat()) - }); - }); - }; - - this.subtractHour = function () { - return _this.setState({ - selectedDate: _this.state.selectedDate.clone().subtract(1, "hours") - }, function () { - _this.props.onChange(_this.state.selectedDate.format(_this.props.format)); - return _this.setState({ - inputValue: _this.state.selectedDate.format(_this.resolvePropsInputFormat()) - }); - }); - }; - - this.subtractMonth = function () { - return _this.setState({ - viewDate: _this.state.viewDate.subtract(1, "months") - }); - }; - - this.subtractYear = function () { - return _this.setState({ - viewDate: _this.state.viewDate.subtract(1, "years") - }); - }; - - this.subtractDecade = function () { - return _this.setState({ - viewDate: _this.state.viewDate.subtract(10, "years") - }); - }; - - this.togglePeriod = function () { - if (_this.state.selectedDate.hour() > 12) { - return _this.onChange(_this.state.selectedDate.clone().subtract(12, "hours").format(_this.state.inputFormat)); - } else { - return _this.onChange(_this.state.selectedDate.clone().add(12, "hours").format(_this.state.inputFormat)); - } - }; - - this.togglePicker = function () { - return _this.setState({ - showDatePicker: !_this.state.showDatePicker, - showTimePicker: !_this.state.showTimePicker - }); - }; - - this.onClick = function () { - var classes = undefined, - gBCR = undefined, - offset = undefined, - placePosition = undefined, - scrollTop = undefined, - styles = undefined; - if (_this.state.showPicker) { - return _this.closePicker(); - } else { - _this.setState({ - showPicker: true - }); - gBCR = _this.refs.dtpbutton.getBoundingClientRect(); - classes = { - "bootstrap-datetimepicker-widget": true, - "dropdown-menu": true - }; - offset = { - top: gBCR.top + window.pageYOffset - document.documentElement.clientTop, - left: gBCR.left + window.pageXOffset - document.documentElement.clientLeft - }; - offset.top = offset.top + _this.refs.datetimepicker.offsetHeight; - scrollTop = window.pageYOffset !== undefined ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop; - placePosition = _this.props.direction === "up" ? "top" : _this.props.direction === "bottom" ? "bottom" : _this.props.direction === "auto" ? offset.top + _this.refs.widget.offsetHeight > window.offsetHeight + scrollTop && _this.refs.widget.offsetHeight + _this.refs.datetimepicker.offsetHeight > offset.top ? "top" : "bottom" : void 0; - if (placePosition === "top") { - offset.top = -_this.refs.widget.offsetHeight - _this.clientHeight - 2; - classes.top = true; - classes.bottom = false; - classes["pull-right"] = true; - } else { - offset.top = 40; - classes.top = false; - classes.bottom = true; - classes["pull-right"] = true; - } - styles = { - display: "block", - position: "absolute", - top: offset.top, - left: "auto", - right: 40 - }; - return _this.setState({ - widgetStyle: styles, - widgetClasses: classes - }); - } - }; - - this.closePicker = function () { - var style = _extends({}, _this.state.widgetStyle); - style.left = -9999; - style.display = "none"; - return _this.setState({ - showPicker: false, - widgetStyle: style - }); - }; - - this.size = function () { - switch (_this.props.size) { - case _ConstantsJs2["default"].SIZE_SMALL: - return "form-group-sm"; - case _ConstantsJs2["default"].SIZE_LARGE: - return "form-group-lg"; - } - - return ""; - }; - - this.renderOverlay = function () { - var styles = { - position: "fixed", - top: 0, - bottom: 0, - left: 0, - right: 0, - zIndex: "999" - }; - if (_this.state.showPicker) { - return _react2["default"].createElement("div", { onClick: _this.closePicker, style: styles }); - } else { - return _react2["default"].createElement("span", null); - } - }; - } - - _createClass(DateTimeField, [{ - key: "render", - value: function render() { - return _react2["default"].createElement( - "div", - null, - this.renderOverlay(), - _react2["default"].createElement(_DateTimePickerJs2["default"], { - addDecade: this.addDecade, - addHour: this.addHour, - addMinute: this.addMinute, - addMonth: this.addMonth, - addYear: this.addYear, - daysOfWeekDisabled: this.props.daysOfWeekDisabled, - maxDate: this.props.maxDate, - minDate: this.props.minDate, - mode: this.props.mode, - ref: "widget", - selectedDate: this.state.selectedDate, - setSelectedDate: this.setSelectedDate, - setSelectedHour: this.setSelectedHour, - setSelectedMinute: this.setSelectedMinute, - setViewMonth: this.setViewMonth, - setViewYear: this.setViewYear, - showDatePicker: this.state.showDatePicker, - showTimePicker: this.state.showTimePicker, - showToday: this.props.showToday, - subtractDecade: this.subtractDecade, - subtractHour: this.subtractHour, - subtractMinute: this.subtractMinute, - subtractMonth: this.subtractMonth, - subtractYear: this.subtractYear, - togglePeriod: this.togglePeriod, - togglePicker: this.togglePicker, - viewDate: this.state.viewDate, - viewMode: this.props.viewMode, - widgetClasses: this.state.widgetClasses, - widgetStyle: this.state.widgetStyle - }), - _react2["default"].createElement( - "div", - { className: "input-group date " + this.size(), ref: "datetimepicker" }, - _react2["default"].createElement("input", _extends({ className: "form-control", onChange: this.onChange, type: "text", value: this.state.inputValue }, this.props.inputProps)), - _react2["default"].createElement( - "span", - { className: "input-group-addon", onBlur: this.onBlur, onClick: this.onClick, ref: "dtpbutton" }, - _react2["default"].createElement("span", { className: (0, _classnames2["default"])("glyphicon", this.state.buttonIcon) }) - ) - ) - ); - } - }], [{ - key: "defaultProps", - value: { - dateTime: (0, _moment2["default"])().format("x"), - format: "x", - showToday: true, - viewMode: "days", - daysOfWeekDisabled: [], - size: _ConstantsJs2["default"].SIZE_MEDIUM, - mode: _ConstantsJs2["default"].MODE_DATETIME, - onChange: function onChange(x) { - console.log(x); - } - }, - enumerable: true - }, { - key: "propTypes", - value: { - dateTime: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.number]), - onChange: _react.PropTypes.func, - format: _react.PropTypes.string, - inputProps: _react.PropTypes.object, - inputFormat: _react.PropTypes.string, - defaultText: _react.PropTypes.string, - mode: _react.PropTypes.oneOf([_ConstantsJs2["default"].MODE_DATE, _ConstantsJs2["default"].MODE_DATETIME, _ConstantsJs2["default"].MODE_TIME]), - minDate: _react.PropTypes.object, - maxDate: _react.PropTypes.object, - direction: _react.PropTypes.string, - showToday: _react.PropTypes.bool, - viewMode: _react.PropTypes.string, - size: _react.PropTypes.oneOf([_ConstantsJs2["default"].SIZE_SMALL, _ConstantsJs2["default"].SIZE_MEDIUM, _ConstantsJs2["default"].SIZE_LARGE]), - daysOfWeekDisabled: _react.PropTypes.arrayOf(_react.PropTypes.number) - }, - enumerable: true - }]); - - return DateTimeField; - })(_react.Component); - - exports["default"] = DateTimeField; - module.exports = exports["default"]; - -/***/ }, -/* 2 */ -/***/ function(module, exports, __webpack_require__) { - - "use strict"; - - var _Object$getOwnPropertyDescriptor = __webpack_require__(3)["default"]; - - exports["default"] = function get(_x, _x2, _x3) { - var _again = true; - - _function: while (_again) { - var object = _x, - property = _x2, - receiver = _x3; - _again = false; - if (object === null) object = Function.prototype; - - var desc = _Object$getOwnPropertyDescriptor(object, property); - - if (desc === undefined) { - var parent = Object.getPrototypeOf(object); - - if (parent === null) { - return undefined; - } else { - _x = parent; - _x2 = property; - _x3 = receiver; - _again = true; - desc = parent = undefined; - continue _function; - } - } else if ("value" in desc) { - return desc.value; - } else { - var getter = desc.get; - - if (getter === undefined) { - return undefined; - } - - return getter.call(receiver); - } - } - }; - - exports.__esModule = true; - -/***/ }, -/* 3 */ -/***/ function(module, exports, __webpack_require__) { - - module.exports = { "default": __webpack_require__(4), __esModule: true }; - -/***/ }, -/* 4 */ -/***/ function(module, exports, __webpack_require__) { - - var $ = __webpack_require__(5); - __webpack_require__(6); - module.exports = function getOwnPropertyDescriptor(it, key){ - return $.getDesc(it, key); - }; - -/***/ }, -/* 5 */ -/***/ function(module, exports) { - - var $Object = Object; - module.exports = { - create: $Object.create, - getProto: $Object.getPrototypeOf, - isEnum: {}.propertyIsEnumerable, - getDesc: $Object.getOwnPropertyDescriptor, - setDesc: $Object.defineProperty, - setDescs: $Object.defineProperties, - getKeys: $Object.keys, - getNames: $Object.getOwnPropertyNames, - getSymbols: $Object.getOwnPropertySymbols, - each: [].forEach - }; - -/***/ }, -/* 6 */ -/***/ function(module, exports, __webpack_require__) { - - // 19.1.2.6 Object.getOwnPropertyDescriptor(O, P) - var toIObject = __webpack_require__(7); - - __webpack_require__(11)('getOwnPropertyDescriptor', function($getOwnPropertyDescriptor){ - return function getOwnPropertyDescriptor(it, key){ - return $getOwnPropertyDescriptor(toIObject(it), key); - }; - }); - -/***/ }, -/* 7 */ -/***/ function(module, exports, __webpack_require__) { - - // to indexed object, toObject with fallback for non-array-like ES3 strings - var IObject = __webpack_require__(8) - , defined = __webpack_require__(10); - module.exports = function(it){ - return IObject(defined(it)); - }; - -/***/ }, -/* 8 */ -/***/ function(module, exports, __webpack_require__) { - - // fallback for non-array-like ES3 and non-enumerable old V8 strings - var cof = __webpack_require__(9); - module.exports = Object('z').propertyIsEnumerable(0) ? Object : function(it){ - return cof(it) == 'String' ? it.split('') : Object(it); - }; - -/***/ }, -/* 9 */ -/***/ function(module, exports) { - - var toString = {}.toString; - - module.exports = function(it){ - return toString.call(it).slice(8, -1); - }; - -/***/ }, -/* 10 */ -/***/ function(module, exports) { - - // 7.2.1 RequireObjectCoercible(argument) - module.exports = function(it){ - if(it == undefined)throw TypeError("Can't call method on " + it); - return it; - }; - -/***/ }, -/* 11 */ -/***/ function(module, exports, __webpack_require__) { - - // most Object methods by ES6 should accept primitives - var $export = __webpack_require__(12) - , core = __webpack_require__(14) - , fails = __webpack_require__(17); - module.exports = function(KEY, exec){ - var fn = (core.Object || {})[KEY] || Object[KEY] - , exp = {}; - exp[KEY] = exec(fn); - $export($export.S + $export.F * fails(function(){ fn(1); }), 'Object', exp); - }; - -/***/ }, -/* 12 */ -/***/ function(module, exports, __webpack_require__) { - - var global = __webpack_require__(13) - , core = __webpack_require__(14) - , ctx = __webpack_require__(15) - , PROTOTYPE = 'prototype'; - - var $export = function(type, name, source){ - var IS_FORCED = type & $export.F - , IS_GLOBAL = type & $export.G - , IS_STATIC = type & $export.S - , IS_PROTO = type & $export.P - , IS_BIND = type & $export.B - , IS_WRAP = type & $export.W - , exports = IS_GLOBAL ? core : core[name] || (core[name] = {}) - , target = IS_GLOBAL ? global : IS_STATIC ? global[name] : (global[name] || {})[PROTOTYPE] - , key, own, out; - if(IS_GLOBAL)source = name; - for(key in source){ - // contains in native - own = !IS_FORCED && target && key in target; - if(own && key in exports)continue; - // export native or passed - out = own ? target[key] : source[key]; - // prevent global pollution for namespaces - exports[key] = IS_GLOBAL && typeof target[key] != 'function' ? source[key] - // bind timers to global for call from export context - : IS_BIND && own ? ctx(out, global) - // wrap global constructors for prevent change them in library - : IS_WRAP && target[key] == out ? (function(C){ - var F = function(param){ - return this instanceof C ? new C(param) : C(param); - }; - F[PROTOTYPE] = C[PROTOTYPE]; - return F; - // make static versions for prototype methods - })(out) : IS_PROTO && typeof out == 'function' ? ctx(Function.call, out) : out; - if(IS_PROTO)(exports[PROTOTYPE] || (exports[PROTOTYPE] = {}))[key] = out; - } - }; - // type bitmap - $export.F = 1; // forced - $export.G = 2; // global - $export.S = 4; // static - $export.P = 8; // proto - $export.B = 16; // bind - $export.W = 32; // wrap - module.exports = $export; - -/***/ }, -/* 13 */ -/***/ function(module, exports) { - - // https://github.com/zloirock/core-js/issues/86#issuecomment-115759028 - var global = module.exports = typeof window != 'undefined' && window.Math == Math - ? window : typeof self != 'undefined' && self.Math == Math ? self : Function('return this')(); - if(typeof __g == 'number')__g = global; // eslint-disable-line no-undef - -/***/ }, -/* 14 */ -/***/ function(module, exports) { - - var core = module.exports = {version: '1.2.6'}; - if(typeof __e == 'number')__e = core; // eslint-disable-line no-undef - -/***/ }, -/* 15 */ -/***/ function(module, exports, __webpack_require__) { - - // optional / simple context binding - var aFunction = __webpack_require__(16); - module.exports = function(fn, that, length){ - aFunction(fn); - if(that === undefined)return fn; - switch(length){ - case 1: return function(a){ - return fn.call(that, a); - }; - case 2: return function(a, b){ - return fn.call(that, a, b); - }; - case 3: return function(a, b, c){ - return fn.call(that, a, b, c); - }; - } - return function(/* ...args */){ - return fn.apply(that, arguments); - }; - }; - -/***/ }, -/* 16 */ -/***/ function(module, exports) { - - module.exports = function(it){ - if(typeof it != 'function')throw TypeError(it + ' is not a function!'); - return it; - }; - -/***/ }, -/* 17 */ -/***/ function(module, exports) { - - module.exports = function(exec){ - try { - return !!exec(); - } catch(e){ - return true; - } - }; - -/***/ }, -/* 18 */ -/***/ function(module, exports, __webpack_require__) { - - "use strict"; - - var _Object$create = __webpack_require__(19)["default"]; - - var _Object$setPrototypeOf = __webpack_require__(21)["default"]; - - exports["default"] = function (subClass, superClass) { - if (typeof superClass !== "function" && superClass !== null) { - throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); - } - - subClass.prototype = _Object$create(superClass && superClass.prototype, { - constructor: { - value: subClass, - enumerable: false, - writable: true, - configurable: true - } - }); - if (superClass) _Object$setPrototypeOf ? _Object$setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; - }; - - exports.__esModule = true; - -/***/ }, -/* 19 */ -/***/ function(module, exports, __webpack_require__) { - - module.exports = { "default": __webpack_require__(20), __esModule: true }; - -/***/ }, -/* 20 */ -/***/ function(module, exports, __webpack_require__) { - - var $ = __webpack_require__(5); - module.exports = function create(P, D){ - return $.create(P, D); - }; - -/***/ }, -/* 21 */ -/***/ function(module, exports, __webpack_require__) { - - module.exports = { "default": __webpack_require__(22), __esModule: true }; - -/***/ }, -/* 22 */ -/***/ function(module, exports, __webpack_require__) { - - __webpack_require__(23); - module.exports = __webpack_require__(14).Object.setPrototypeOf; - -/***/ }, -/* 23 */ -/***/ function(module, exports, __webpack_require__) { - - // 19.1.3.19 Object.setPrototypeOf(O, proto) - var $export = __webpack_require__(12); - $export($export.S, 'Object', {setPrototypeOf: __webpack_require__(24).set}); - -/***/ }, -/* 24 */ -/***/ function(module, exports, __webpack_require__) { - - // Works with __proto__ only. Old v8 can't work with null proto objects. - /* eslint-disable no-proto */ - var getDesc = __webpack_require__(5).getDesc - , isObject = __webpack_require__(25) - , anObject = __webpack_require__(26); - var check = function(O, proto){ - anObject(O); - if(!isObject(proto) && proto !== null)throw TypeError(proto + ": can't set as prototype!"); - }; - module.exports = { - set: Object.setPrototypeOf || ('__proto__' in {} ? // eslint-disable-line - function(test, buggy, set){ - try { - set = __webpack_require__(15)(Function.call, getDesc(Object.prototype, '__proto__').set, 2); - set(test, []); - buggy = !(test instanceof Array); - } catch(e){ buggy = true; } - return function setPrototypeOf(O, proto){ - check(O, proto); - if(buggy)O.__proto__ = proto; - else set(O, proto); - return O; - }; - }({}, false) : undefined), - check: check - }; - -/***/ }, -/* 25 */ -/***/ function(module, exports) { - - module.exports = function(it){ - return typeof it === 'object' ? it !== null : typeof it === 'function'; - }; - -/***/ }, -/* 26 */ -/***/ function(module, exports, __webpack_require__) { - - var isObject = __webpack_require__(25); - module.exports = function(it){ - if(!isObject(it))throw TypeError(it + ' is not an object!'); - return it; - }; - -/***/ }, -/* 27 */ -/***/ function(module, exports, __webpack_require__) { - - "use strict"; - - var _Object$defineProperty = __webpack_require__(28)["default"]; - - exports["default"] = (function () { - function defineProperties(target, props) { - for (var i = 0; i < props.length; i++) { - var descriptor = props[i]; - descriptor.enumerable = descriptor.enumerable || false; - descriptor.configurable = true; - if ("value" in descriptor) descriptor.writable = true; - - _Object$defineProperty(target, descriptor.key, descriptor); - } - } - - return function (Constructor, protoProps, staticProps) { - if (protoProps) defineProperties(Constructor.prototype, protoProps); - if (staticProps) defineProperties(Constructor, staticProps); - return Constructor; - }; - })(); - - exports.__esModule = true; - -/***/ }, -/* 28 */ -/***/ function(module, exports, __webpack_require__) { - - module.exports = { "default": __webpack_require__(29), __esModule: true }; - -/***/ }, -/* 29 */ -/***/ function(module, exports, __webpack_require__) { - - var $ = __webpack_require__(5); - module.exports = function defineProperty(it, key, desc){ - return $.setDesc(it, key, desc); - }; - -/***/ }, -/* 30 */ -/***/ function(module, exports) { - - "use strict"; - - exports["default"] = function (instance, Constructor) { - if (!(instance instanceof Constructor)) { - throw new TypeError("Cannot call a class as a function"); - } - }; - - exports.__esModule = true; - -/***/ }, -/* 31 */ -/***/ function(module, exports, __webpack_require__) { - - "use strict"; - - var _Object$assign = __webpack_require__(32)["default"]; - - exports["default"] = _Object$assign || function (target) { - for (var i = 1; i < arguments.length; i++) { - var source = arguments[i]; - - for (var key in source) { - if (Object.prototype.hasOwnProperty.call(source, key)) { - target[key] = source[key]; - } - } - } - - return target; - }; - - exports.__esModule = true; - -/***/ }, -/* 32 */ -/***/ function(module, exports, __webpack_require__) { - - module.exports = { "default": __webpack_require__(33), __esModule: true }; - -/***/ }, -/* 33 */ -/***/ function(module, exports, __webpack_require__) { - - __webpack_require__(34); - module.exports = __webpack_require__(14).Object.assign; - -/***/ }, -/* 34 */ -/***/ function(module, exports, __webpack_require__) { - - // 19.1.3.1 Object.assign(target, source) - var $export = __webpack_require__(12); - - $export($export.S + $export.F, 'Object', {assign: __webpack_require__(35)}); - -/***/ }, -/* 35 */ -/***/ function(module, exports, __webpack_require__) { - - // 19.1.2.1 Object.assign(target, source, ...) - var $ = __webpack_require__(5) - , toObject = __webpack_require__(36) - , IObject = __webpack_require__(8); - - // should work with symbols and should have deterministic property order (V8 bug) - module.exports = __webpack_require__(17)(function(){ - var a = Object.assign - , A = {} - , B = {} - , S = Symbol() - , K = 'abcdefghijklmnopqrst'; - A[S] = 7; - K.split('').forEach(function(k){ B[k] = k; }); - return a({}, A)[S] != 7 || Object.keys(a({}, B)).join('') != K; - }) ? function assign(target, source){ // eslint-disable-line no-unused-vars - var T = toObject(target) - , $$ = arguments - , $$len = $$.length - , index = 1 - , getKeys = $.getKeys - , getSymbols = $.getSymbols - , isEnum = $.isEnum; - while($$len > index){ - var S = IObject($$[index++]) - , keys = getSymbols ? getKeys(S).concat(getSymbols(S)) : getKeys(S) - , length = keys.length - , j = 0 - , key; - while(length > j)if(isEnum.call(S, key = keys[j++]))T[key] = S[key]; - } - return T; - } : Object.assign; - -/***/ }, -/* 36 */ -/***/ function(module, exports, __webpack_require__) { - - // 7.1.13 ToObject(argument) - var defined = __webpack_require__(10); - module.exports = function(it){ - return Object(defined(it)); - }; - -/***/ }, -/* 37 */ -/***/ function(module, exports) { - - "use strict"; - - exports["default"] = function (obj) { - return obj && obj.__esModule ? obj : { - "default": obj - }; - }; - - exports.__esModule = true; - -/***/ }, -/* 38 */ -/***/ function(module, exports) { - - module.exports = __WEBPACK_EXTERNAL_MODULE_38__; - -/***/ }, -/* 39 */ -/***/ function(module, exports) { - - module.exports = __WEBPACK_EXTERNAL_MODULE_39__; - -/***/ }, -/* 40 */ -/***/ function(module, exports, __webpack_require__) { - - var __WEBPACK_AMD_DEFINE_RESULT__;/*! - Copyright (c) 2015 Jed Watson. - Licensed under the MIT License (MIT), see - http://jedwatson.github.io/classnames - */ - /* global define */ - - (function () { - 'use strict'; - - var hasOwn = {}.hasOwnProperty; - - function classNames () { - var classes = ''; - - for (var i = 0; i < arguments.length; i++) { - var arg = arguments[i]; - if (!arg) continue; - - var argType = typeof arg; - - if (argType === 'string' || argType === 'number') { - classes += ' ' + arg; - } else if (Array.isArray(arg)) { - classes += ' ' + classNames.apply(null, arg); - } else if (argType === 'object') { - for (var key in arg) { - if (hasOwn.call(arg, key) && arg[key]) { - classes += ' ' + key; - } - } - } - } - - return classes.substr(1); - } - - if (typeof module !== 'undefined' && module.exports) { - module.exports = classNames; - } else if (true) { - // register as 'classnames', consistent with npm package name - !(__WEBPACK_AMD_DEFINE_RESULT__ = function () { - return classNames; - }.call(exports, __webpack_require__, exports, module), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); - } else { - window.classNames = classNames; - } - }()); - - -/***/ }, -/* 41 */ -/***/ function(module, exports, __webpack_require__) { - - "use strict"; - - var _get = __webpack_require__(2)["default"]; - - var _inherits = __webpack_require__(18)["default"]; - - var _createClass = __webpack_require__(27)["default"]; - - var _classCallCheck = __webpack_require__(30)["default"]; - - var _interopRequireDefault = __webpack_require__(37)["default"]; - - Object.defineProperty(exports, "__esModule", { - value: true - }); - - var _react = __webpack_require__(38); - - var _react2 = _interopRequireDefault(_react); - - var _classnames = __webpack_require__(40); - - var _classnames2 = _interopRequireDefault(_classnames); - - var _DateTimePickerDateJs = __webpack_require__(42); - - var _DateTimePickerDateJs2 = _interopRequireDefault(_DateTimePickerDateJs); - - var _DateTimePickerTimeJs = __webpack_require__(49); - - var _DateTimePickerTimeJs2 = _interopRequireDefault(_DateTimePickerTimeJs); - - var _ConstantsJs = __webpack_require__(51); - - var _ConstantsJs2 = _interopRequireDefault(_ConstantsJs); - - var DateTimePicker = (function (_Component) { - _inherits(DateTimePicker, _Component); - - function DateTimePicker() { - var _this = this; - - _classCallCheck(this, DateTimePicker); - - _get(Object.getPrototypeOf(DateTimePicker.prototype), "constructor", this).apply(this, arguments); - - this.renderDatePicker = function () { - if (_this.props.showDatePicker) { - return _react2["default"].createElement( - "li", - null, - _react2["default"].createElement(_DateTimePickerDateJs2["default"], { - addDecade: _this.props.addDecade, - addMonth: _this.props.addMonth, - addYear: _this.props.addYear, - daysOfWeekDisabled: _this.props.daysOfWeekDisabled, - maxDate: _this.props.maxDate, - minDate: _this.props.minDate, - selectedDate: _this.props.selectedDate, - setSelectedDate: _this.props.setSelectedDate, - setViewMonth: _this.props.setViewMonth, - setViewYear: _this.props.setViewYear, - showToday: _this.props.showToday, - subtractDecade: _this.props.subtractDecade, - subtractMonth: _this.props.subtractMonth, - subtractYear: _this.props.subtractYear, - viewDate: _this.props.viewDate, - viewMode: _this.props.viewMode - }) - ); - } - }; - - this.renderTimePicker = function () { - if (_this.props.showTimePicker) { - return _react2["default"].createElement( - "li", - null, - _react2["default"].createElement(_DateTimePickerTimeJs2["default"], { - addHour: _this.props.addHour, - addMinute: _this.props.addMinute, - mode: _this.props.mode, - selectedDate: _this.props.selectedDate, - setSelectedHour: _this.props.setSelectedHour, - setSelectedMinute: _this.props.setSelectedMinute, - subtractHour: _this.props.subtractHour, - subtractMinute: _this.props.subtractMinute, - togglePeriod: _this.props.togglePeriod, - viewDate: _this.props.viewDate - }) - ); - } - }; - - this.renderSwitchButton = function () { - return _this.props.mode === _ConstantsJs2["default"].MODE_DATETIME ? _react2["default"].createElement( - "li", - null, - _react2["default"].createElement( - "span", - { className: "btn picker-switch", onClick: _this.props.togglePicker, style: { width: "100%" } }, - _react2["default"].createElement("span", { className: (0, _classnames2["default"])("glyphicon", _this.props.showTimePicker ? "glyphicon-calendar" : "glyphicon-time") }) - ) - ) : null; - }; - } - - _createClass(DateTimePicker, [{ - key: "render", - value: function render() { - return _react2["default"].createElement( - "div", - { className: (0, _classnames2["default"])(this.props.widgetClasses), style: this.props.widgetStyle }, - _react2["default"].createElement( - "ul", - { className: "list-unstyled" }, - this.renderDatePicker(), - this.renderSwitchButton(), - this.renderTimePicker() - ) - ); - } - }], [{ - key: "propTypes", - value: { - showDatePicker: _react.PropTypes.bool, - showTimePicker: _react.PropTypes.bool, - subtractMonth: _react.PropTypes.func.isRequired, - addMonth: _react.PropTypes.func.isRequired, - viewDate: _react.PropTypes.object.isRequired, - selectedDate: _react.PropTypes.object.isRequired, - showToday: _react.PropTypes.bool, - viewMode: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.number]), - mode: _react.PropTypes.oneOf([_ConstantsJs2["default"].MODE_DATE, _ConstantsJs2["default"].MODE_DATETIME, _ConstantsJs2["default"].MODE_TIME]), - daysOfWeekDisabled: _react.PropTypes.array, - setSelectedDate: _react.PropTypes.func.isRequired, - subtractYear: _react.PropTypes.func.isRequired, - addYear: _react.PropTypes.func.isRequired, - setViewMonth: _react.PropTypes.func.isRequired, - setViewYear: _react.PropTypes.func.isRequired, - subtractHour: _react.PropTypes.func.isRequired, - addHour: _react.PropTypes.func.isRequired, - subtractMinute: _react.PropTypes.func.isRequired, - addMinute: _react.PropTypes.func.isRequired, - addDecade: _react.PropTypes.func.isRequired, - subtractDecade: _react.PropTypes.func.isRequired, - togglePeriod: _react.PropTypes.func.isRequired, - minDate: _react.PropTypes.object, - maxDate: _react.PropTypes.object, - widgetClasses: _react.PropTypes.object, - widgetStyle: _react.PropTypes.object, - togglePicker: _react.PropTypes.func, - setSelectedHour: _react.PropTypes.func, - setSelectedMinute: _react.PropTypes.func - }, - enumerable: true - }]); - - return DateTimePicker; - })(_react.Component); - - exports["default"] = DateTimePicker; - module.exports = exports["default"]; - -/***/ }, -/* 42 */ -/***/ function(module, exports, __webpack_require__) { - - "use strict"; - - var _get = __webpack_require__(2)["default"]; - - var _inherits = __webpack_require__(18)["default"]; - - var _createClass = __webpack_require__(27)["default"]; - - var _classCallCheck = __webpack_require__(30)["default"]; - - var _Object$keys = __webpack_require__(43)["default"]; - - var _interopRequireDefault = __webpack_require__(37)["default"]; - - Object.defineProperty(exports, "__esModule", { - value: true - }); - - var _react = __webpack_require__(38); - - var _react2 = _interopRequireDefault(_react); - - var _DateTimePickerDays = __webpack_require__(46); - - var _DateTimePickerDays2 = _interopRequireDefault(_DateTimePickerDays); - - var _DateTimePickerMonths = __webpack_require__(47); - - var _DateTimePickerMonths2 = _interopRequireDefault(_DateTimePickerMonths); - - var _DateTimePickerYears = __webpack_require__(48); - - var _DateTimePickerYears2 = _interopRequireDefault(_DateTimePickerYears); - - var DateTimePickerDate = (function (_Component) { - _inherits(DateTimePickerDate, _Component); - - _createClass(DateTimePickerDate, null, [{ - key: "propTypes", - value: { - subtractMonth: _react.PropTypes.func.isRequired, - addMonth: _react.PropTypes.func.isRequired, - viewDate: _react.PropTypes.object.isRequired, - selectedDate: _react.PropTypes.object.isRequired, - showToday: _react.PropTypes.bool, - viewMode: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.number]), - daysOfWeekDisabled: _react.PropTypes.array, - setSelectedDate: _react.PropTypes.func.isRequired, - subtractYear: _react.PropTypes.func.isRequired, - addYear: _react.PropTypes.func.isRequired, - setViewMonth: _react.PropTypes.func.isRequired, - setViewYear: _react.PropTypes.func.isRequired, - addDecade: _react.PropTypes.func.isRequired, - subtractDecade: _react.PropTypes.func.isRequired, - minDate: _react.PropTypes.object, - maxDate: _react.PropTypes.object - }, - enumerable: true - }]); - - function DateTimePickerDate(props) { - var _this = this; - - _classCallCheck(this, DateTimePickerDate); - - _get(Object.getPrototypeOf(DateTimePickerDate.prototype), "constructor", this).call(this, props); - - this.showMonths = function () { - return _this.setState({ - daysDisplayed: false, - monthsDisplayed: true - }); - }; - - this.showYears = function () { - return _this.setState({ - monthsDisplayed: false, - yearsDisplayed: true - }); - }; - - this.setViewYear = function (e) { - _this.props.setViewYear(e.target.innerHTML); - return _this.setState({ - yearsDisplayed: false, - monthsDisplayed: true - }); - }; - - this.setViewMonth = function (e) { - _this.props.setViewMonth(e.target.innerHTML); - return _this.setState({ - monthsDisplayed: false, - daysDisplayed: true - }); - }; - - this.renderDays = function () { - if (_this.state.daysDisplayed) { - return _react2["default"].createElement(_DateTimePickerDays2["default"], { - addMonth: _this.props.addMonth, - daysOfWeekDisabled: _this.props.daysOfWeekDisabled, - maxDate: _this.props.maxDate, - minDate: _this.props.minDate, - selectedDate: _this.props.selectedDate, - setSelectedDate: _this.props.setSelectedDate, - showMonths: _this.showMonths, - showToday: _this.props.showToday, - subtractMonth: _this.props.subtractMonth, - viewDate: _this.props.viewDate - }); - } else { - return null; - } - }; - - this.renderMonths = function () { - if (_this.state.monthsDisplayed) { - return _react2["default"].createElement(_DateTimePickerMonths2["default"], { - addYear: _this.props.addYear, - selectedDate: _this.props.selectedDate, - setViewMonth: _this.setViewMonth, - showYears: _this.showYears, - subtractYear: _this.props.subtractYear, - viewDate: _this.props.viewDate - }); - } else { - return null; - } - }; - - this.renderYears = function () { - if (_this.state.yearsDisplayed) { - return _react2["default"].createElement(_DateTimePickerYears2["default"], { - addDecade: _this.props.addDecade, - selectedDate: _this.props.selectedDate, - setViewYear: _this.setViewYear, - subtractDecade: _this.props.subtractDecade, - viewDate: _this.props.viewDate - }); - } else { - return null; - } - }; - - var viewModes = { - "days": { - daysDisplayed: true, - monthsDisplayed: false, - yearsDisplayed: false - }, - "months": { - daysDisplayed: false, - monthsDisplayed: true, - yearsDisplayed: false - }, - "years": { - daysDisplayed: false, - monthsDisplayed: false, - yearsDisplayed: true - } - }; - this.state = viewModes[this.props.viewMode] || viewModes[_Object$keys(viewModes)[this.props.viewMode]] || viewModes.days; - } - - _createClass(DateTimePickerDate, [{ - key: "render", - value: function render() { - return _react2["default"].createElement( - "div", - { className: "datepicker" }, - this.renderDays(), - this.renderMonths(), - this.renderYears() - ); - } - }]); - - return DateTimePickerDate; - })(_react.Component); - - exports["default"] = DateTimePickerDate; - module.exports = exports["default"]; - -/***/ }, -/* 43 */ -/***/ function(module, exports, __webpack_require__) { - - module.exports = { "default": __webpack_require__(44), __esModule: true }; - -/***/ }, -/* 44 */ -/***/ function(module, exports, __webpack_require__) { - - __webpack_require__(45); - module.exports = __webpack_require__(14).Object.keys; - -/***/ }, -/* 45 */ -/***/ function(module, exports, __webpack_require__) { - - // 19.1.2.14 Object.keys(O) - var toObject = __webpack_require__(36); - - __webpack_require__(11)('keys', function($keys){ - return function keys(it){ - return $keys(toObject(it)); - }; - }); - -/***/ }, -/* 46 */ -/***/ function(module, exports, __webpack_require__) { - - "use strict"; - - var _get = __webpack_require__(2)["default"]; - - var _inherits = __webpack_require__(18)["default"]; - - var _createClass = __webpack_require__(27)["default"]; - - var _classCallCheck = __webpack_require__(30)["default"]; - - var _interopRequireDefault = __webpack_require__(37)["default"]; - - Object.defineProperty(exports, "__esModule", { - value: true - }); - - var _react = __webpack_require__(38); - - var _react2 = _interopRequireDefault(_react); - - var _moment = __webpack_require__(39); - - var _moment2 = _interopRequireDefault(_moment); - - var _classnames = __webpack_require__(40); - - var _classnames2 = _interopRequireDefault(_classnames); - - var DateTimePickerDays = (function (_Component) { - _inherits(DateTimePickerDays, _Component); - - function DateTimePickerDays() { - var _this = this; - - _classCallCheck(this, DateTimePickerDays); - - _get(Object.getPrototypeOf(DateTimePickerDays.prototype), "constructor", this).apply(this, arguments); - - this.renderDays = function () { - var cells, classes, days, html, month, nextMonth, prevMonth, minDate, maxDate, row, year; - year = _this.props.viewDate.year(); - month = _this.props.viewDate.month(); - prevMonth = _this.props.viewDate.clone().subtract(1, "months"); - days = prevMonth.daysInMonth(); - prevMonth.date(days).startOf("week"); - nextMonth = (0, _moment2["default"])(prevMonth).clone().add(42, "d"); - minDate = _this.props.minDate ? _this.props.minDate.clone().subtract(1, "days") : _this.props.minDate; - maxDate = _this.props.maxDate ? _this.props.maxDate.clone() : _this.props.maxDate; - html = []; - cells = []; - while (prevMonth.isBefore(nextMonth)) { - classes = { - day: true - }; - if (prevMonth.year() < year || prevMonth.year() === year && prevMonth.month() < month) { - classes.old = true; - } else if (prevMonth.year() > year || prevMonth.year() === year && prevMonth.month() > month) { - classes["new"] = true; - } - if (prevMonth.isSame((0, _moment2["default"])({ - y: _this.props.selectedDate.year(), - M: _this.props.selectedDate.month(), - d: _this.props.selectedDate.date() - }))) { - classes.active = true; - } - if (_this.props.showToday) { - if (prevMonth.isSame((0, _moment2["default"])(), "day")) { - classes.today = true; - } - } - if (minDate && prevMonth.isBefore(minDate) || maxDate && prevMonth.isAfter(maxDate)) { - classes.disabled = true; - } - if (_this.props.daysOfWeekDisabled.length > 0) classes.disabled = _this.props.daysOfWeekDisabled.indexOf(prevMonth.day()) !== -1; - cells.push(_react2["default"].createElement( - "td", - { className: (0, _classnames2["default"])(classes), key: prevMonth.month() + "-" + prevMonth.date(), onClick: _this.props.setSelectedDate }, - prevMonth.date() - )); - if (prevMonth.weekday() === (0, _moment2["default"])().endOf("week").weekday()) { - row = _react2["default"].createElement( - "tr", - { key: prevMonth.month() + "-" + prevMonth.date() }, - cells - ); - html.push(row); - cells = []; - } - prevMonth.add(1, "d"); - } - return html; - }; - } - - _createClass(DateTimePickerDays, [{ - key: "render", - value: function render() { - return _react2["default"].createElement( - "div", - { className: "datepicker-days", style: { display: "block" } }, - _react2["default"].createElement( - "table", - { className: "table-condensed" }, - _react2["default"].createElement( - "thead", - null, - _react2["default"].createElement( - "tr", - null, - _react2["default"].createElement( - "th", - { className: "prev", onClick: this.props.subtractMonth }, - _react2["default"].createElement("span", { className: "glyphicon glyphicon-chevron-left" }) - ), - _react2["default"].createElement( - "th", - { className: "switch", colSpan: "5", onClick: this.props.showMonths }, - _moment2["default"].months()[this.props.viewDate.month()], - " ", - this.props.viewDate.year() - ), - _react2["default"].createElement( - "th", - { className: "next", onClick: this.props.addMonth }, - _react2["default"].createElement("span", { className: "glyphicon glyphicon-chevron-right" }) - ) - ), - _react2["default"].createElement( - "tr", - null, - _react2["default"].createElement( - "th", - { className: "dow" }, - "Su" - ), - _react2["default"].createElement( - "th", - { className: "dow" }, - "Mo" - ), - _react2["default"].createElement( - "th", - { className: "dow" }, - "Tu" - ), - _react2["default"].createElement( - "th", - { className: "dow" }, - "We" - ), - _react2["default"].createElement( - "th", - { className: "dow" }, - "Th" - ), - _react2["default"].createElement( - "th", - { className: "dow" }, - "Fr" - ), - _react2["default"].createElement( - "th", - { className: "dow" }, - "Sa" - ) - ) - ), - _react2["default"].createElement( - "tbody", - null, - this.renderDays() - ) - ) - ); - } - }], [{ - key: "propTypes", - value: { - subtractMonth: _react.PropTypes.func.isRequired, - addMonth: _react.PropTypes.func.isRequired, - viewDate: _react.PropTypes.object.isRequired, - selectedDate: _react.PropTypes.object.isRequired, - showToday: _react.PropTypes.bool, - daysOfWeekDisabled: _react.PropTypes.array, - setSelectedDate: _react.PropTypes.func.isRequired, - showMonths: _react.PropTypes.func.isRequired, - minDate: _react.PropTypes.object, - maxDate: _react.PropTypes.object - }, - enumerable: true - }, { - key: "defaultProps", - value: { - showToday: true - }, - enumerable: true - }]); - - return DateTimePickerDays; - })(_react.Component); - - exports["default"] = DateTimePickerDays; - module.exports = exports["default"]; - -/***/ }, -/* 47 */ -/***/ function(module, exports, __webpack_require__) { - - "use strict"; - - var _get = __webpack_require__(2)["default"]; - - var _inherits = __webpack_require__(18)["default"]; - - var _createClass = __webpack_require__(27)["default"]; - - var _classCallCheck = __webpack_require__(30)["default"]; - - var _interopRequireDefault = __webpack_require__(37)["default"]; - - Object.defineProperty(exports, "__esModule", { - value: true - }); - - var _react = __webpack_require__(38); - - var _react2 = _interopRequireDefault(_react); - - var _classnames = __webpack_require__(40); - - var _classnames2 = _interopRequireDefault(_classnames); - - var _moment = __webpack_require__(39); - - var _moment2 = _interopRequireDefault(_moment); - - var DateTimePickerMonths = (function (_Component) { - _inherits(DateTimePickerMonths, _Component); - - function DateTimePickerMonths() { - var _this = this; - - _classCallCheck(this, DateTimePickerMonths); - - _get(Object.getPrototypeOf(DateTimePickerMonths.prototype), "constructor", this).apply(this, arguments); - - this.renderMonths = function () { - var classes, i, month, months, monthsShort; - month = _this.props.selectedDate.month(); - monthsShort = _moment2["default"].monthsShort(); - i = 0; - months = []; - while (i < 12) { - classes = { - month: true, - "active": i === month && _this.props.viewDate.year() === _this.props.selectedDate.year() - }; - months.push(_react2["default"].createElement( - "span", - { className: (0, _classnames2["default"])(classes), key: i, onClick: _this.props.setViewMonth }, - monthsShort[i] - )); - i++; - } - return months; - }; - } - - _createClass(DateTimePickerMonths, [{ - key: "render", - value: function render() { - return _react2["default"].createElement( - "div", - { className: "datepicker-months", style: { display: "block" } }, - _react2["default"].createElement( - "table", - { className: "table-condensed" }, - _react2["default"].createElement( - "thead", - null, - _react2["default"].createElement( - "tr", - null, - _react2["default"].createElement( - "th", - { className: "prev", onClick: this.props.subtractYear }, - "‹" - ), - _react2["default"].createElement( - "th", - { className: "switch", colSpan: "5", onClick: this.props.showYears }, - this.props.viewDate.year() - ), - _react2["default"].createElement( - "th", - { className: "next", onClick: this.props.addYear }, - "›" - ) - ) - ), - _react2["default"].createElement( - "tbody", - null, - _react2["default"].createElement( - "tr", - null, - _react2["default"].createElement( - "td", - { colSpan: "7" }, - this.renderMonths() - ) - ) - ) - ) - ); - } - }], [{ - key: "propTypes", - value: { - subtractYear: _react.PropTypes.func.isRequired, - addYear: _react.PropTypes.func.isRequired, - viewDate: _react.PropTypes.object.isRequired, - selectedDate: _react.PropTypes.object.isRequired, - showYears: _react.PropTypes.func.isRequired, - setViewMonth: _react.PropTypes.func.isRequired - }, - enumerable: true - }]); - - return DateTimePickerMonths; - })(_react.Component); - - exports["default"] = DateTimePickerMonths; - module.exports = exports["default"]; - -/***/ }, -/* 48 */ -/***/ function(module, exports, __webpack_require__) { - - "use strict"; - - var _get = __webpack_require__(2)["default"]; - - var _inherits = __webpack_require__(18)["default"]; - - var _createClass = __webpack_require__(27)["default"]; - - var _classCallCheck = __webpack_require__(30)["default"]; - - var _interopRequireDefault = __webpack_require__(37)["default"]; - - Object.defineProperty(exports, "__esModule", { - value: true - }); - - var _react = __webpack_require__(38); - - var _react2 = _interopRequireDefault(_react); - - var _classnames = __webpack_require__(40); - - var _classnames2 = _interopRequireDefault(_classnames); - - var DateTimePickerYears = (function (_Component) { - _inherits(DateTimePickerYears, _Component); - - function DateTimePickerYears() { - var _this = this; - - _classCallCheck(this, DateTimePickerYears); - - _get(Object.getPrototypeOf(DateTimePickerYears.prototype), "constructor", this).apply(this, arguments); - - this.renderYears = function () { - var classes, i, year, years; - years = []; - year = parseInt(_this.props.viewDate.year() / 10, 10) * 10; - year--; - i = -1; - while (i < 11) { - classes = { - year: true, - old: i === -1 | i === 10, - active: _this.props.selectedDate.year() === year - }; - years.push(_react2["default"].createElement( - "span", - { className: (0, _classnames2["default"])(classes), key: year, onClick: _this.props.setViewYear }, - year - )); - year++; - i++; - } - return years; - }; - } - - _createClass(DateTimePickerYears, [{ - key: "render", - value: function render() { - var year; - year = parseInt(this.props.viewDate.year() / 10, 10) * 10; - return _react2["default"].createElement( - "div", - { className: "datepicker-years", style: { display: "block" } }, - _react2["default"].createElement( - "table", - { className: "table-condensed" }, - _react2["default"].createElement( - "thead", - null, - _react2["default"].createElement( - "tr", - null, - _react2["default"].createElement( - "th", - { className: "prev", onClick: this.props.subtractDecade }, - "‹" - ), - _react2["default"].createElement( - "th", - { className: "switch", colSpan: "5" }, - year, - " - ", - year + 9 - ), - _react2["default"].createElement( - "th", - { className: "next", onClick: this.props.addDecade }, - "›" - ) - ) - ), - _react2["default"].createElement( - "tbody", - null, - _react2["default"].createElement( - "tr", - null, - _react2["default"].createElement( - "td", - { colSpan: "7" }, - this.renderYears() - ) - ) - ) - ) - ); - } - }], [{ - key: "propTypes", - value: { - subtractDecade: _react.PropTypes.func.isRequired, - addDecade: _react.PropTypes.func.isRequired, - viewDate: _react.PropTypes.object.isRequired, - selectedDate: _react.PropTypes.object.isRequired, - setViewYear: _react.PropTypes.func.isRequired - }, - enumerable: true - }]); - - return DateTimePickerYears; - })(_react.Component); - - exports["default"] = DateTimePickerYears; - module.exports = exports["default"]; - -/***/ }, -/* 49 */ -/***/ function(module, exports, __webpack_require__) { - - "use strict"; - - var _get = __webpack_require__(2)["default"]; - - var _inherits = __webpack_require__(18)["default"]; - - var _createClass = __webpack_require__(27)["default"]; - - var _classCallCheck = __webpack_require__(30)["default"]; - - var _extends = __webpack_require__(31)["default"]; - - var _interopRequireDefault = __webpack_require__(37)["default"]; - - Object.defineProperty(exports, "__esModule", { - value: true - }); - - var _react = __webpack_require__(38); - - var _react2 = _interopRequireDefault(_react); - - var _DateTimePickerMinutes = __webpack_require__(50); - - var _DateTimePickerMinutes2 = _interopRequireDefault(_DateTimePickerMinutes); - - var _DateTimePickerHours = __webpack_require__(52); - - var _DateTimePickerHours2 = _interopRequireDefault(_DateTimePickerHours); - - var _ConstantsJs = __webpack_require__(51); - - var _ConstantsJs2 = _interopRequireDefault(_ConstantsJs); - - var DateTimePickerTime = (function (_Component) { - _inherits(DateTimePickerTime, _Component); - - function DateTimePickerTime() { - var _this = this; - - _classCallCheck(this, DateTimePickerTime); - - _get(Object.getPrototypeOf(DateTimePickerTime.prototype), "constructor", this).apply(this, arguments); - - this.state = { - minutesDisplayed: false, - hoursDisplayed: false - }; - - this.goBack = function () { - return _this.setState({ - minutesDisplayed: false, - hoursDisplayed: false - }); - }; - - this.showMinutes = function () { - return _this.setState({ - minutesDisplayed: true - }); - }; - - this.showHours = function () { - return _this.setState({ - hoursDisplayed: true - }); - }; - - this.renderMinutes = function () { - if (_this.state.minutesDisplayed) { - return _react2["default"].createElement(_DateTimePickerMinutes2["default"], _extends({}, _this.props, { onSwitch: _this.goBack })); - } else { - return null; - } - }; - - this.renderHours = function () { - if (_this.state.hoursDisplayed) { - return _react2["default"].createElement(_DateTimePickerHours2["default"], _extends({}, _this.props, { onSwitch: _this.goBack })); - } else { - return null; - } - }; - - this.renderPicker = function () { - if (!_this.state.minutesDisplayed && !_this.state.hoursDisplayed) { - return _react2["default"].createElement( - "div", - { className: "timepicker-picker" }, - _react2["default"].createElement( - "table", - { className: "table-condensed" }, - _react2["default"].createElement( - "tbody", - null, - _react2["default"].createElement( - "tr", - null, - _react2["default"].createElement( - "td", - null, - _react2["default"].createElement( - "a", - { className: "btn", onClick: _this.props.addHour }, - _react2["default"].createElement("span", { className: "glyphicon glyphicon-chevron-up" }) - ) - ), - _react2["default"].createElement("td", { className: "separator" }), - _react2["default"].createElement( - "td", - null, - _react2["default"].createElement( - "a", - { className: "btn", onClick: _this.props.addMinute }, - _react2["default"].createElement("span", { className: "glyphicon glyphicon-chevron-up" }) - ) - ), - _react2["default"].createElement("td", { className: "separator" }) - ), - _react2["default"].createElement( - "tr", - null, - _react2["default"].createElement( - "td", - null, - _react2["default"].createElement( - "span", - { className: "timepicker-hour", onClick: _this.showHours }, - _this.props.selectedDate.format("h") - ) - ), - _react2["default"].createElement( - "td", - { className: "separator" }, - ":" - ), - _react2["default"].createElement( - "td", - null, - _react2["default"].createElement( - "span", - { className: "timepicker-minute", onClick: _this.showMinutes }, - _this.props.selectedDate.format("mm") - ) - ), - _react2["default"].createElement("td", { className: "separator" }), - _react2["default"].createElement( - "td", - null, - _react2["default"].createElement( - "button", - { className: "btn btn-primary", onClick: _this.props.togglePeriod, type: "button" }, - _this.props.selectedDate.format("A") - ) - ) - ), - _react2["default"].createElement( - "tr", - null, - _react2["default"].createElement( - "td", - null, - _react2["default"].createElement( - "a", - { className: "btn", onClick: _this.props.subtractHour }, - _react2["default"].createElement("span", { className: "glyphicon glyphicon-chevron-down" }) - ) - ), - _react2["default"].createElement("td", { className: "separator" }), - _react2["default"].createElement( - "td", - null, - _react2["default"].createElement( - "a", - { className: "btn", onClick: _this.props.subtractMinute }, - _react2["default"].createElement("span", { className: "glyphicon glyphicon-chevron-down" }) - ) - ), - _react2["default"].createElement("td", { className: "separator" }) - ) - ) - ) - ); - } else { - return ""; - } - }; - } - - _createClass(DateTimePickerTime, [{ - key: "render", - value: function render() { - return _react2["default"].createElement( - "div", - { className: "timepicker" }, - this.renderPicker(), - this.renderHours(), - this.renderMinutes() - ); - } - }], [{ - key: "propTypes", - value: { - setSelectedHour: _react.PropTypes.func.isRequired, - setSelectedMinute: _react.PropTypes.func.isRequired, - subtractHour: _react.PropTypes.func.isRequired, - addHour: _react.PropTypes.func.isRequired, - 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, - mode: _react.PropTypes.oneOf([_ConstantsJs2["default"].MODE_DATE, _ConstantsJs2["default"].MODE_DATETIME, _ConstantsJs2["default"].MODE_TIME]) - }, - enumerable: true - }]); - - return DateTimePickerTime; - })(_react.Component); - - exports["default"] = DateTimePickerTime; - - module.exports = DateTimePickerTime; - module.exports = exports["default"]; - -/***/ }, -/* 50 */ -/***/ function(module, exports, __webpack_require__) { - - "use strict"; - - var _get = __webpack_require__(2)["default"]; - - var _inherits = __webpack_require__(18)["default"]; - - var _createClass = __webpack_require__(27)["default"]; - - var _classCallCheck = __webpack_require__(30)["default"]; - - var _interopRequireDefault = __webpack_require__(37)["default"]; - - Object.defineProperty(exports, "__esModule", { - value: true - }); - - var _react = __webpack_require__(38); - - var _react2 = _interopRequireDefault(_react); - - var _ConstantsJs = __webpack_require__(51); - - var _ConstantsJs2 = _interopRequireDefault(_ConstantsJs); - - var DateTimePickerMinutes = (function (_Component) { - _inherits(DateTimePickerMinutes, _Component); - - function DateTimePickerMinutes() { - var _this = this; - - _classCallCheck(this, DateTimePickerMinutes); - - _get(Object.getPrototypeOf(DateTimePickerMinutes.prototype), "constructor", this).apply(this, arguments); - - this.renderSwitchButton = function () { - return _this.props.mode === _ConstantsJs2["default"].MODE_TIME ? _react2["default"].createElement( - "ul", - { className: "list-unstyled" }, - _react2["default"].createElement( - "li", - null, - _react2["default"].createElement( - "span", - { className: "btn picker-switch", onClick: _this.props.onSwitch, style: { width: "100%" } }, - _react2["default"].createElement("span", { className: "glyphicon glyphicon-time" }) - ) - ) - ) : null; - }; - } - - _createClass(DateTimePickerMinutes, [{ - key: "render", - value: function render() { - return _react2["default"].createElement( - "div", - { className: "timepicker-minutes", "data-action": "selectMinute", style: { display: "block" } }, - this.renderSwitchButton(), - _react2["default"].createElement( - "table", - { className: "table-condensed" }, - _react2["default"].createElement( - "tbody", - null, - _react2["default"].createElement( - "tr", - null, - _react2["default"].createElement( - "td", - { className: "minute", onClick: this.props.setSelectedMinute }, - "00" - ), - _react2["default"].createElement( - "td", - { className: "minute", onClick: this.props.setSelectedMinute }, - "05" - ), - _react2["default"].createElement( - "td", - { className: "minute", onClick: this.props.setSelectedMinute }, - "10" - ), - _react2["default"].createElement( - "td", - { className: "minute", onClick: this.props.setSelectedMinute }, - "15" - ) - ), - _react2["default"].createElement( - "tr", - null, - _react2["default"].createElement( - "td", - { className: "minute", onClick: this.props.setSelectedMinute }, - "20" - ), - _react2["default"].createElement( - "td", - { className: "minute", onClick: this.props.setSelectedMinute }, - "25" - ), - _react2["default"].createElement( - "td", - { className: "minute", onClick: this.props.setSelectedMinute }, - "30" - ), - _react2["default"].createElement( - "td", - { className: "minute", onClick: this.props.setSelectedMinute }, - "35" - ) - ), - _react2["default"].createElement( - "tr", - null, - _react2["default"].createElement( - "td", - { className: "minute", onClick: this.props.setSelectedMinute }, - "40" - ), - _react2["default"].createElement( - "td", - { className: "minute", onClick: this.props.setSelectedMinute }, - "45" - ), - _react2["default"].createElement( - "td", - { className: "minute", onClick: this.props.setSelectedMinute }, - "50" - ), - _react2["default"].createElement( - "td", - { className: "minute", onClick: this.props.setSelectedMinute }, - "55" - ) - ) - ) - ) - ); - } - }], [{ - key: "propTypes", - value: { - setSelectedMinute: _react.PropTypes.func.isRequired, - onSwitch: _react.PropTypes.func.isRequired, - mode: _react.PropTypes.string.isRequired - }, - enumerable: true - }]); - - return DateTimePickerMinutes; - })(_react.Component); - - exports["default"] = DateTimePickerMinutes; - module.exports = exports["default"]; - -/***/ }, -/* 51 */ -/***/ function(module, exports) { - - "use strict"; - - module.exports = { - MODE_DATE: "date", - MODE_DATETIME: "datetime", - MODE_TIME: "time", - - SIZE_SMALL: "sm", - SIZE_MEDIUM: "md", - SIZE_LARGE: "lg" - }; - -/***/ }, -/* 52 */ -/***/ function(module, exports, __webpack_require__) { - - "use strict"; - - var _get = __webpack_require__(2)["default"]; - - var _inherits = __webpack_require__(18)["default"]; - - var _createClass = __webpack_require__(27)["default"]; - - var _classCallCheck = __webpack_require__(30)["default"]; - - var _interopRequireDefault = __webpack_require__(37)["default"]; - - Object.defineProperty(exports, "__esModule", { - value: true - }); - - var _react = __webpack_require__(38); - - var _react2 = _interopRequireDefault(_react); - - var _ConstantsJs = __webpack_require__(51); - - var _ConstantsJs2 = _interopRequireDefault(_ConstantsJs); - - var DateTimePickerHours = (function (_Component) { - _inherits(DateTimePickerHours, _Component); - - function DateTimePickerHours() { - var _this = this; - - _classCallCheck(this, DateTimePickerHours); - - _get(Object.getPrototypeOf(DateTimePickerHours.prototype), "constructor", this).apply(this, arguments); - - this.renderSwitchButton = function () { - return _this.props.mode === _ConstantsJs2["default"].MODE_TIME ? _react2["default"].createElement( - "ul", - { className: "list-unstyled" }, - _react2["default"].createElement( - "li", - null, - _react2["default"].createElement( - "span", - { className: "btn picker-switch", onClick: _this.props.onSwitch, style: { width: "100%" } }, - _react2["default"].createElement("span", { className: "glyphicon glyphicon-time" }) - ) - ) - ) : null; - }; - } - - _createClass(DateTimePickerHours, [{ - key: "render", - value: function render() { - return _react2["default"].createElement( - "div", - { className: "timepicker-hours", "data-action": "selectHour", style: { display: "block" } }, - this.renderSwitchButton(), - _react2["default"].createElement( - "table", - { className: "table-condensed" }, - _react2["default"].createElement( - "tbody", - null, - _react2["default"].createElement( - "tr", - null, - _react2["default"].createElement( - "td", - { className: "hour", onClick: this.props.setSelectedHour }, - "01" - ), - _react2["default"].createElement( - "td", - { className: "hour", onClick: this.props.setSelectedHour }, - "02" - ), - _react2["default"].createElement( - "td", - { className: "hour", onClick: this.props.setSelectedHour }, - "03" - ), - _react2["default"].createElement( - "td", - { className: "hour", onClick: this.props.setSelectedHour }, - "04" - ) - ), - _react2["default"].createElement( - "tr", - null, - _react2["default"].createElement( - "td", - { className: "hour", onClick: this.props.setSelectedHour }, - "05" - ), - _react2["default"].createElement( - "td", - { className: "hour", onClick: this.props.setSelectedHour }, - "06" - ), - _react2["default"].createElement( - "td", - { className: "hour", onClick: this.props.setSelectedHour }, - "07" - ), - _react2["default"].createElement( - "td", - { className: "hour", onClick: this.props.setSelectedHour }, - "08" - ) - ), - _react2["default"].createElement( - "tr", - null, - _react2["default"].createElement( - "td", - { className: "hour", onClick: this.props.setSelectedHour }, - "09" - ), - _react2["default"].createElement( - "td", - { className: "hour", onClick: this.props.setSelectedHour }, - "10" - ), - _react2["default"].createElement( - "td", - { className: "hour", onClick: this.props.setSelectedHour }, - "11" - ), - _react2["default"].createElement( - "td", - { className: "hour", onClick: this.props.setSelectedHour }, - "12" - ) - ), - _react2["default"].createElement( - "tr", - null, - _react2["default"].createElement( - "td", - { className: "hour", onClick: this.props.setSelectedHour }, - "13" - ), - _react2["default"].createElement( - "td", - { className: "hour", onClick: this.props.setSelectedHour }, - "14" - ), - _react2["default"].createElement( - "td", - { className: "hour", onClick: this.props.setSelectedHour }, - "15" - ), - _react2["default"].createElement( - "td", - { className: "hour", onClick: this.props.setSelectedHour }, - "16" - ) - ), - _react2["default"].createElement( - "tr", - null, - _react2["default"].createElement( - "td", - { className: "hour", onClick: this.props.setSelectedHour }, - "17" - ), - _react2["default"].createElement( - "td", - { className: "hour", onClick: this.props.setSelectedHour }, - "18" - ), - _react2["default"].createElement( - "td", - { className: "hour", onClick: this.props.setSelectedHour }, - "19" - ), - _react2["default"].createElement( - "td", - { className: "hour", onClick: this.props.setSelectedHour }, - "20" - ) - ), - _react2["default"].createElement( - "tr", - null, - _react2["default"].createElement( - "td", - { className: "hour", onClick: this.props.setSelectedHour }, - "21" - ), - _react2["default"].createElement( - "td", - { className: "hour", onClick: this.props.setSelectedHour }, - "22" - ), - _react2["default"].createElement( - "td", - { className: "hour", onClick: this.props.setSelectedHour }, - "23" - ), - _react2["default"].createElement( - "td", - { className: "hour", onClick: this.props.setSelectedHour }, - "24" - ) - ) - ) - ) - ); - } - }], [{ - key: "propTypes", - value: { - setSelectedHour: _react.PropTypes.func.isRequired, - onSwitch: _react.PropTypes.func.isRequired, - mode: _react.PropTypes.string.isRequired - }, - enumerable: true - }]); - - return DateTimePickerHours; - })(_react.Component); - - exports["default"] = DateTimePickerHours; - module.exports = exports["default"]; - -/***/ } -/******/ ]) -}); -; \ No newline at end of file diff --git a/dist/react-bootstrap-datetimepicker.min.js b/dist/react-bootstrap-datetimepicker.min.js deleted file mode 100644 index 18fe9e9f..00000000 --- a/dist/react-bootstrap-datetimepicker.min.js +++ /dev/null @@ -1,6 +0,0 @@ -!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("React"),require("moment")):"function"==typeof define&&define.amd?define(["React","moment"],t):"object"==typeof exports?exports.ReactBootstrapDatetimepicker=t(require("React"),require("moment")):e.ReactBootstrapDatetimepicker=t(e.React,e.moment)}(this,function(e,t){return function(e){function t(s){if(a[s])return a[s].exports;var r=a[s]={exports:{},id:s,loaded:!1};return e[s].call(r.exports,r,r.exports,t),r.loaded=!0,r.exports}var a={};return t.m=e,t.c=a,t.p="",t(0)}([function(e,t,a){e.exports=a(1)},function(e,t,a){"use strict";var s=a(2)["default"],r=a(18)["default"],o=a(27)["default"],n=a(30)["default"],i=a(31)["default"],u=a(37)["default"];Object.defineProperty(t,"__esModule",{value:!0});var l=a(38),c=u(l),d=a(39),p=u(d),f=a(40),m=u(f),h=a(41),y=u(h),D=a(51),v=u(D),E=function(e){function t(){var e=this;n(this,t),s(Object.getPrototypeOf(t.prototype),"constructor",this).apply(this,arguments),this.resolvePropsInputFormat=function(){if(e.props.inputFormat)return e.props.inputFormat;switch(e.props.mode){case v["default"].MODE_TIME:return"h:mm A";case v["default"].MODE_DATE:return"MM/DD/YY";default:return"MM/DD/YY h:mm A"}},this.state={showDatePicker:this.props.mode!==v["default"].MODE_TIME,showTimePicker:this.props.mode===v["default"].MODE_TIME,inputFormat:this.resolvePropsInputFormat(),buttonIcon:this.props.mode===v["default"].MODE_TIME?"glyphicon-time":"glyphicon-calendar",widgetStyle:{display:"block",position:"absolute",left:-9999,zIndex:"9999 !important"},viewDate:(0,p["default"])(this.props.dateTime,this.props.format,!0).startOf("month"),selectedDate:(0,p["default"])(this.props.dateTime,this.props.format,!0),inputValue:"undefined"!=typeof this.props.defaultText?this.props.defaultText:(0,p["default"])(this.props.dateTime,this.props.format,!0).format(this.resolvePropsInputFormat())},this.componentWillReceiveProps=function(t){var a={};return t.inputFormat!==e.props.inputFormat&&(a.inputFormat=t.inputFormat,a.inputValue=(0,p["default"])(t.dateTime,t.format,!0).format(t.inputFormat)),t.dateTime!==e.props.dateTime&&(0,p["default"])(t.dateTime,t.format,!0).isValid()&&(a.viewDate=(0,p["default"])(t.dateTime,t.format,!0).startOf("month"),a.selectedDate=(0,p["default"])(t.dateTime,t.format,!0),a.inputValue=(0,p["default"])(t.dateTime,t.format,!0).format(t.inputFormat?t.inputFormat:e.state.inputFormat)),e.setState(a)},this.onChange=function(t){var a=null==t.target?t:t.target.value;return(0,p["default"])(a,e.state.inputFormat,!0).isValid()&&e.setState({selectedDate:(0,p["default"])(a,e.state.inputFormat,!0),viewDate:(0,p["default"])(a,e.state.inputFormat,!0).startOf("month")}),e.setState({inputValue:a},function(){return this.props.onChange((0,p["default"])(this.state.inputValue,this.state.inputFormat,!0).format(this.props.format),a)})},this.getValue=function(){return(0,p["default"])(e.state.inputValue,e.props.inputFormat,!0).format(e.props.format)},this.setSelectedDate=function(t){var a=t.target;if(a.className&&!a.className.match(/disabled/g)){var s=void 0;return s=a.className.indexOf("new")>=0?e.state.viewDate.month()+1:a.className.indexOf("old")>=0?e.state.viewDate.month()-1:e.state.viewDate.month(),e.setState({selectedDate:e.state.viewDate.clone().month(s).date(parseInt(t.target.innerHTML)).hour(e.state.selectedDate.hours()).minute(e.state.selectedDate.minutes())},function(){return this.closePicker(),this.props.onChange(this.state.selectedDate.format(this.props.format)),this.setState({inputValue:this.state.selectedDate.format(this.state.inputFormat)})})}},this.setSelectedHour=function(t){return e.setState({selectedDate:e.state.selectedDate.clone().hour(parseInt(t.target.innerHTML)).minute(e.state.selectedDate.minutes())},function(){return this.closePicker(),this.props.onChange(this.state.selectedDate.format(this.props.format)),this.setState({inputValue:this.state.selectedDate.format(this.state.inputFormat)})})},this.setSelectedMinute=function(t){return e.setState({selectedDate:e.state.selectedDate.clone().hour(e.state.selectedDate.hours()).minute(parseInt(t.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)})})},this.setViewMonth=function(t){return e.setState({viewDate:e.state.viewDate.clone().month(t)})},this.setViewYear=function(t){return e.setState({viewDate:e.state.viewDate.clone().year(t)})},this.addMinute=function(){return e.setState({selectedDate:e.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.resolvePropsInputFormat())})})},this.addHour=function(){return e.setState({selectedDate:e.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.resolvePropsInputFormat())})})},this.addMonth=function(){return e.setState({viewDate:e.state.viewDate.add(1,"months")})},this.addYear=function(){return e.setState({viewDate:e.state.viewDate.add(1,"years")})},this.addDecade=function(){return e.setState({viewDate:e.state.viewDate.add(10,"years")})},this.subtractMinute=function(){return e.setState({selectedDate:e.state.selectedDate.clone().subtract(1,"minutes")},function(){return e.props.onChange(e.state.selectedDate.format(e.props.format)),e.setState({inputValue:e.state.selectedDate.format(e.resolvePropsInputFormat())})})},this.subtractHour=function(){return e.setState({selectedDate:e.state.selectedDate.clone().subtract(1,"hours")},function(){return e.props.onChange(e.state.selectedDate.format(e.props.format)),e.setState({inputValue:e.state.selectedDate.format(e.resolvePropsInputFormat())})})},this.subtractMonth=function(){return e.setState({viewDate:e.state.viewDate.subtract(1,"months")})},this.subtractYear=function(){return e.setState({viewDate:e.state.viewDate.subtract(1,"years")})},this.subtractDecade=function(){return e.setState({viewDate:e.state.viewDate.subtract(10,"years")})},this.togglePeriod=function(){return e.state.selectedDate.hour()>12?e.onChange(e.state.selectedDate.clone().subtract(12,"hours").format(e.state.inputFormat)):e.onChange(e.state.selectedDate.clone().add(12,"hours").format(e.state.inputFormat))},this.togglePicker=function(){return e.setState({showDatePicker:!e.state.showDatePicker,showTimePicker:!e.state.showTimePicker})},this.onClick=function(){var t=void 0,a=void 0,s=void 0,r=void 0,o=void 0,n=void 0;return e.state.showPicker?e.closePicker():(e.setState({showPicker:!0}),a=e.refs.dtpbutton.getBoundingClientRect(),t={"bootstrap-datetimepicker-widget":!0,"dropdown-menu":!0},s={top:a.top+window.pageYOffset-document.documentElement.clientTop,left:a.left+window.pageXOffset-document.documentElement.clientLeft},s.top=s.top+e.refs.datetimepicker.offsetHeight,o=void 0!==window.pageYOffset?window.pageYOffset:(document.documentElement||document.body.parentNode||document.body).scrollTop,r="up"===e.props.direction?"top":"bottom"===e.props.direction?"bottom":"auto"===e.props.direction?s.top+e.refs.widget.offsetHeight>window.offsetHeight+o&&e.refs.widget.offsetHeight+e.refs.datetimepicker.offsetHeight>s.top?"top":"bottom":void 0,"top"===r?(s.top=-e.refs.widget.offsetHeight-e.clientHeight-2,t.top=!0,t.bottom=!1,t["pull-right"]=!0):(s.top=40,t.top=!1,t.bottom=!0,t["pull-right"]=!0),n={display:"block",position:"absolute",top:s.top,left:"auto",right:40},e.setState({widgetStyle:n,widgetClasses:t}))},this.closePicker=function(){var t=i({},e.state.widgetStyle);return t.left=-9999,t.display="none",e.setState({showPicker:!1,widgetStyle:t})},this.size=function(){switch(e.props.size){case v["default"].SIZE_SMALL:return"form-group-sm";case v["default"].SIZE_LARGE:return"form-group-lg"}return""},this.renderOverlay=function(){var t={position:"fixed",top:0,bottom:0,left:0,right:0,zIndex:"999"};return e.state.showPicker?c["default"].createElement("div",{onClick:e.closePicker,style:t}):c["default"].createElement("span",null)}}return r(t,e),o(t,[{key:"render",value:function(){return c["default"].createElement("div",null,this.renderOverlay(),c["default"].createElement(y["default"],{addDecade:this.addDecade,addHour:this.addHour,addMinute:this.addMinute,addMonth:this.addMonth,addYear:this.addYear,daysOfWeekDisabled:this.props.daysOfWeekDisabled,maxDate:this.props.maxDate,minDate:this.props.minDate,mode:this.props.mode,ref:"widget",selectedDate:this.state.selectedDate,setSelectedDate:this.setSelectedDate,setSelectedHour:this.setSelectedHour,setSelectedMinute:this.setSelectedMinute,setViewMonth:this.setViewMonth,setViewYear:this.setViewYear,showDatePicker:this.state.showDatePicker,showTimePicker:this.state.showTimePicker,showToday:this.props.showToday,subtractDecade:this.subtractDecade,subtractHour:this.subtractHour,subtractMinute:this.subtractMinute,subtractMonth:this.subtractMonth,subtractYear:this.subtractYear,togglePeriod:this.togglePeriod,togglePicker:this.togglePicker,viewDate:this.state.viewDate,viewMode:this.props.viewMode,widgetClasses:this.state.widgetClasses,widgetStyle:this.state.widgetStyle}),c["default"].createElement("div",{className:"input-group date "+this.size(),ref:"datetimepicker"},c["default"].createElement("input",i({className:"form-control",onChange:this.onChange,type:"text",value:this.state.inputValue},this.props.inputProps)),c["default"].createElement("span",{className:"input-group-addon",onBlur:this.onBlur,onClick:this.onClick,ref:"dtpbutton"},c["default"].createElement("span",{className:(0,m["default"])("glyphicon",this.state.buttonIcon)}))))}}],[{key:"defaultProps",value:{dateTime:(0,p["default"])().format("x"),format:"x",showToday:!0,viewMode:"days",daysOfWeekDisabled:[],size:v["default"].SIZE_MEDIUM,mode:v["default"].MODE_DATETIME,onChange:function(e){console.log(e)}},enumerable:!0},{key:"propTypes",value:{dateTime:l.PropTypes.oneOfType([l.PropTypes.string,l.PropTypes.number]),onChange:l.PropTypes.func,format:l.PropTypes.string,inputProps:l.PropTypes.object,inputFormat:l.PropTypes.string,defaultText:l.PropTypes.string,mode:l.PropTypes.oneOf([v["default"].MODE_DATE,v["default"].MODE_DATETIME,v["default"].MODE_TIME]),minDate:l.PropTypes.object,maxDate:l.PropTypes.object,direction:l.PropTypes.string,showToday:l.PropTypes.bool,viewMode:l.PropTypes.string,size:l.PropTypes.oneOf([v["default"].SIZE_SMALL,v["default"].SIZE_MEDIUM,v["default"].SIZE_LARGE]),daysOfWeekDisabled:l.PropTypes.arrayOf(l.PropTypes.number)},enumerable:!0}]),t}(l.Component);t["default"]=E,e.exports=t["default"]},function(e,t,a){"use strict";var s=a(3)["default"];t["default"]=function(e,t,a){for(var r=!0;r;){var o=e,n=t,i=a;r=!1,null===o&&(o=Function.prototype);var u=s(o,n);if(void 0!==u){if("value"in u)return u.value;var l=u.get;return void 0===l?void 0:l.call(i)}var c=Object.getPrototypeOf(o);if(null===c)return void 0;e=c,t=n,a=i,r=!0,u=c=void 0}},t.__esModule=!0},function(e,t,a){e.exports={"default":a(4),__esModule:!0}},function(e,t,a){var s=a(5);a(6),e.exports=function(e,t){return s.getDesc(e,t)}},function(e,t){var a=Object;e.exports={create:a.create,getProto:a.getPrototypeOf,isEnum:{}.propertyIsEnumerable,getDesc:a.getOwnPropertyDescriptor,setDesc:a.defineProperty,setDescs:a.defineProperties,getKeys:a.keys,getNames:a.getOwnPropertyNames,getSymbols:a.getOwnPropertySymbols,each:[].forEach}},function(e,t,a){var s=a(7);a(11)("getOwnPropertyDescriptor",function(e){return function(t,a){return e(s(t),a)}})},function(e,t,a){var s=a(8),r=a(10);e.exports=function(e){return s(r(e))}},function(e,t,a){var s=a(9);e.exports=Object("z").propertyIsEnumerable(0)?Object:function(e){return"String"==s(e)?e.split(""):Object(e)}},function(e,t){var a={}.toString;e.exports=function(e){return a.call(e).slice(8,-1)}},function(e,t){e.exports=function(e){if(void 0==e)throw TypeError("Can't call method on "+e);return e}},function(e,t,a){var s=a(12),r=a(14),o=a(17);e.exports=function(e,t){var a=(r.Object||{})[e]||Object[e],n={};n[e]=t(a),s(s.S+s.F*o(function(){a(1)}),"Object",n)}},function(e,t,a){var s=a(13),r=a(14),o=a(15),n="prototype",i=function(e,t,a){var u,l,c,d=e&i.F,p=e&i.G,f=e&i.S,m=e&i.P,h=e&i.B,y=e&i.W,D=p?r:r[t]||(r[t]={}),v=p?s:f?s[t]:(s[t]||{})[n];p&&(a=t);for(u in a)l=!d&&v&&u in v,l&&u in D||(c=l?v[u]:a[u],D[u]=p&&"function"!=typeof v[u]?a[u]:h&&l?o(c,s):y&&v[u]==c?function(e){var t=function(t){return this instanceof e?new e(t):e(t)};return t[n]=e[n],t}(c):m&&"function"==typeof c?o(Function.call,c):c,m&&((D[n]||(D[n]={}))[u]=c))};i.F=1,i.G=2,i.S=4,i.P=8,i.B=16,i.W=32,e.exports=i},function(e,t){var a=e.exports="undefined"!=typeof window&&window.Math==Math?window:"undefined"!=typeof self&&self.Math==Math?self:Function("return this")();"number"==typeof __g&&(__g=a)},function(e,t){var a=e.exports={version:"1.2.6"};"number"==typeof __e&&(__e=a)},function(e,t,a){var s=a(16);e.exports=function(e,t,a){if(s(e),void 0===t)return e;switch(a){case 1:return function(a){return e.call(t,a)};case 2:return function(a,s){return e.call(t,a,s)};case 3:return function(a,s,r){return e.call(t,a,s,r)}}return function(){return e.apply(t,arguments)}}},function(e,t){e.exports=function(e){if("function"!=typeof e)throw TypeError(e+" is not a function!");return e}},function(e,t){e.exports=function(e){try{return!!e()}catch(t){return!0}}},function(e,t,a){"use strict";var s=a(19)["default"],r=a(21)["default"];t["default"]=function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=s(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(r?r(e,t):e.__proto__=t)},t.__esModule=!0},function(e,t,a){e.exports={"default":a(20),__esModule:!0}},function(e,t,a){var s=a(5);e.exports=function(e,t){return s.create(e,t)}},function(e,t,a){e.exports={"default":a(22),__esModule:!0}},function(e,t,a){a(23),e.exports=a(14).Object.setPrototypeOf},function(e,t,a){var s=a(12);s(s.S,"Object",{setPrototypeOf:a(24).set})},function(e,t,a){var s=a(5).getDesc,r=a(25),o=a(26),n=function(e,t){if(o(e),!r(t)&&null!==t)throw TypeError(t+": can't set as prototype!")};e.exports={set:Object.setPrototypeOf||("__proto__"in{}?function(e,t,r){try{r=a(15)(Function.call,s(Object.prototype,"__proto__").set,2),r(e,[]),t=!(e instanceof Array)}catch(o){t=!0}return function(e,a){return n(e,a),t?e.__proto__=a:r(e,a),e}}({},!1):void 0),check:n}},function(e,t){e.exports=function(e){return"object"==typeof e?null!==e:"function"==typeof e}},function(e,t,a){var s=a(25);e.exports=function(e){if(!s(e))throw TypeError(e+" is not an object!");return e}},function(e,t,a){"use strict";var s=a(28)["default"];t["default"]=function(){function e(e,t){for(var a=0;au;)for(var p,f=o(n[u++]),m=c?l(f).concat(c(f)):l(f),h=m.length,y=0;h>y;)d.call(f,p=m[y++])&&(a[p]=f[p]);return a}:Object.assign},function(e,t,a){var s=a(10);e.exports=function(e){return Object(s(e))}},function(e,t){"use strict";t["default"]=function(e){return e&&e.__esModule?e:{"default":e}},t.__esModule=!0},function(t,a){t.exports=e},function(e,a){e.exports=t},function(e,t,a){var s;/*! - Copyright (c) 2015 Jed Watson. - Licensed under the MIT License (MIT), see - http://jedwatson.github.io/classnames - */ -!function(){"use strict";function r(){for(var e="",t=0;tm||i.year()===m&&i.month()>o)&&(a["new"]=!0),i.isSame((0,d["default"])({y:e.props.selectedDate.year(),M:e.props.selectedDate.month(),d:e.props.selectedDate.date()}))&&(a.active=!0),e.props.showToday&&i.isSame((0,d["default"])(),"day")&&(a.today=!0),(u&&i.isBefore(u)||c&&i.isAfter(c))&&(a.disabled=!0),e.props.daysOfWeekDisabled.length>0&&(a.disabled=-1!==e.props.daysOfWeekDisabled.indexOf(i.day())),t.push(l["default"].createElement("td",{className:(0,f["default"])(a),key:i.month()+"-"+i.date(),onClick:e.props.setSelectedDate},i.date())),i.weekday()===(0,d["default"])().endOf("week").weekday()&&(p=l["default"].createElement("tr",{key:i.month()+"-"+i.date()},t),r.push(p),t=[]),i.add(1,"d");return r}}return r(t,e),o(t,[{key:"render",value:function(){return l["default"].createElement("div",{className:"datepicker-days",style:{display:"block"}},l["default"].createElement("table",{className:"table-condensed"},l["default"].createElement("thead",null,l["default"].createElement("tr",null,l["default"].createElement("th",{className:"prev",onClick:this.props.subtractMonth},l["default"].createElement("span",{className:"glyphicon glyphicon-chevron-left"})),l["default"].createElement("th",{className:"switch",colSpan:"5",onClick:this.props.showMonths},d["default"].months()[this.props.viewDate.month()]," ",this.props.viewDate.year()),l["default"].createElement("th",{className:"next",onClick:this.props.addMonth},l["default"].createElement("span",{className:"glyphicon glyphicon-chevron-right"}))),l["default"].createElement("tr",null,l["default"].createElement("th",{className:"dow"},"Su"),l["default"].createElement("th",{className:"dow"},"Mo"),l["default"].createElement("th",{className:"dow"},"Tu"),l["default"].createElement("th",{className:"dow"},"We"),l["default"].createElement("th",{className:"dow"},"Th"),l["default"].createElement("th",{className:"dow"},"Fr"),l["default"].createElement("th",{className:"dow"},"Sa"))),l["default"].createElement("tbody",null,this.renderDays())))}}],[{key:"propTypes",value:{subtractMonth:u.PropTypes.func.isRequired,addMonth:u.PropTypes.func.isRequired,viewDate:u.PropTypes.object.isRequired,selectedDate:u.PropTypes.object.isRequired,showToday:u.PropTypes.bool,daysOfWeekDisabled:u.PropTypes.array,setSelectedDate:u.PropTypes.func.isRequired,showMonths:u.PropTypes.func.isRequired,minDate:u.PropTypes.object,maxDate:u.PropTypes.object},enumerable:!0},{key:"defaultProps",value:{showToday:!0},enumerable:!0}]),t}(u.Component);t["default"]=m,e.exports=t["default"]},function(e,t,a){"use strict";var s=a(2)["default"],r=a(18)["default"],o=a(27)["default"],n=a(30)["default"],i=a(37)["default"];Object.defineProperty(t,"__esModule",{value:!0});var u=a(38),l=i(u),c=a(40),d=i(c),p=a(39),f=i(p),m=function(e){function t(){var e=this;n(this,t),s(Object.getPrototypeOf(t.prototype),"constructor",this).apply(this,arguments),this.renderMonths=function(){var t,a,s,r,o;for(s=e.props.selectedDate.month(),o=f["default"].monthsShort(),a=0,r=[];12>a;)t={month:!0,active:a===s&&e.props.viewDate.year()===e.props.selectedDate.year()},r.push(l["default"].createElement("span",{className:(0,d["default"])(t),key:a,onClick:e.props.setViewMonth},o[a])),a++;return r}}return r(t,e),o(t,[{key:"render",value:function(){return l["default"].createElement("div",{className:"datepicker-months",style:{display:"block"}},l["default"].createElement("table",{className:"table-condensed"},l["default"].createElement("thead",null,l["default"].createElement("tr",null,l["default"].createElement("th",{className:"prev",onClick:this.props.subtractYear},"‹"),l["default"].createElement("th",{className:"switch",colSpan:"5",onClick:this.props.showYears},this.props.viewDate.year()),l["default"].createElement("th",{className:"next",onClick:this.props.addYear},"›"))),l["default"].createElement("tbody",null,l["default"].createElement("tr",null,l["default"].createElement("td",{colSpan:"7"},this.renderMonths())))))}}],[{key:"propTypes",value:{subtractYear:u.PropTypes.func.isRequired,addYear:u.PropTypes.func.isRequired,viewDate:u.PropTypes.object.isRequired,selectedDate:u.PropTypes.object.isRequired,showYears:u.PropTypes.func.isRequired,setViewMonth:u.PropTypes.func.isRequired},enumerable:!0}]),t}(u.Component);t["default"]=m,e.exports=t["default"]},function(e,t,a){"use strict";var s=a(2)["default"],r=a(18)["default"],o=a(27)["default"],n=a(30)["default"],i=a(37)["default"];Object.defineProperty(t,"__esModule",{value:!0});var u=a(38),l=i(u),c=a(40),d=i(c),p=function(e){function t(){var e=this;n(this,t),s(Object.getPrototypeOf(t.prototype),"constructor",this).apply(this,arguments),this.renderYears=function(){var t,a,s,r;for(r=[],s=10*parseInt(e.props.viewDate.year()/10,10),s--,a=-1;11>a;)t={year:!0,old:-1===a|10===a,active:e.props.selectedDate.year()===s},r.push(l["default"].createElement("span",{className:(0,d["default"])(t),key:s,onClick:e.props.setViewYear},s)),s++,a++;return r}}return r(t,e),o(t,[{key:"render",value:function(){var e;return e=10*parseInt(this.props.viewDate.year()/10,10),l["default"].createElement("div",{className:"datepicker-years",style:{display:"block"}},l["default"].createElement("table",{className:"table-condensed"},l["default"].createElement("thead",null,l["default"].createElement("tr",null,l["default"].createElement("th",{className:"prev",onClick:this.props.subtractDecade},"‹"),l["default"].createElement("th",{className:"switch",colSpan:"5"},e," - ",e+9),l["default"].createElement("th",{className:"next",onClick:this.props.addDecade},"›"))),l["default"].createElement("tbody",null,l["default"].createElement("tr",null,l["default"].createElement("td",{colSpan:"7"},this.renderYears())))))}}],[{key:"propTypes",value:{subtractDecade:u.PropTypes.func.isRequired,addDecade:u.PropTypes.func.isRequired,viewDate:u.PropTypes.object.isRequired,selectedDate:u.PropTypes.object.isRequired,setViewYear:u.PropTypes.func.isRequired},enumerable:!0}]),t}(u.Component);t["default"]=p,e.exports=t["default"]},function(e,t,a){"use strict";var s=a(2)["default"],r=a(18)["default"],o=a(27)["default"],n=a(30)["default"],i=a(31)["default"],u=a(37)["default"];Object.defineProperty(t,"__esModule",{value:!0});var l=a(38),c=u(l),d=a(50),p=u(d),f=a(52),m=u(f),h=a(51),y=u(h),D=function(e){function t(){var e=this;n(this,t),s(Object.getPrototypeOf(t.prototype),"constructor",this).apply(this,arguments),this.state={minutesDisplayed:!1,hoursDisplayed:!1},this.goBack=function(){return e.setState({minutesDisplayed:!1,hoursDisplayed:!1})},this.showMinutes=function(){return e.setState({minutesDisplayed:!0})},this.showHours=function(){return e.setState({hoursDisplayed:!0})},this.renderMinutes=function(){return e.state.minutesDisplayed?c["default"].createElement(p["default"],i({},e.props,{onSwitch:e.goBack})):null},this.renderHours=function(){return e.state.hoursDisplayed?c["default"].createElement(m["default"],i({},e.props,{onSwitch:e.goBack})):null},this.renderPicker=function(){return e.state.minutesDisplayed||e.state.hoursDisplayed?"":c["default"].createElement("div",{className:"timepicker-picker"},c["default"].createElement("table",{className:"table-condensed"},c["default"].createElement("tbody",null,c["default"].createElement("tr",null,c["default"].createElement("td",null,c["default"].createElement("a",{className:"btn",onClick:e.props.addHour},c["default"].createElement("span",{className:"glyphicon glyphicon-chevron-up"}))),c["default"].createElement("td",{className:"separator"}),c["default"].createElement("td",null,c["default"].createElement("a",{className:"btn",onClick:e.props.addMinute},c["default"].createElement("span",{className:"glyphicon glyphicon-chevron-up"}))),c["default"].createElement("td",{className:"separator"})),c["default"].createElement("tr",null,c["default"].createElement("td",null,c["default"].createElement("span",{className:"timepicker-hour",onClick:e.showHours},e.props.selectedDate.format("h"))),c["default"].createElement("td",{className:"separator"},":"),c["default"].createElement("td",null,c["default"].createElement("span",{className:"timepicker-minute",onClick:e.showMinutes},e.props.selectedDate.format("mm"))),c["default"].createElement("td",{className:"separator"}),c["default"].createElement("td",null,c["default"].createElement("button",{className:"btn btn-primary",onClick:e.props.togglePeriod,type:"button"},e.props.selectedDate.format("A")))),c["default"].createElement("tr",null,c["default"].createElement("td",null,c["default"].createElement("a",{className:"btn",onClick:e.props.subtractHour},c["default"].createElement("span",{className:"glyphicon glyphicon-chevron-down"}))),c["default"].createElement("td",{className:"separator"}),c["default"].createElement("td",null,c["default"].createElement("a",{className:"btn",onClick:e.props.subtractMinute},c["default"].createElement("span",{className:"glyphicon glyphicon-chevron-down"}))),c["default"].createElement("td",{className:"separator"})))))}}return r(t,e),o(t,[{key:"render",value:function(){return c["default"].createElement("div",{className:"timepicker"},this.renderPicker(),this.renderHours(),this.renderMinutes())}}],[{key:"propTypes",value:{setSelectedHour:l.PropTypes.func.isRequired,setSelectedMinute:l.PropTypes.func.isRequired,subtractHour:l.PropTypes.func.isRequired,addHour:l.PropTypes.func.isRequired,subtractMinute:l.PropTypes.func.isRequired,addMinute:l.PropTypes.func.isRequired,viewDate:l.PropTypes.object.isRequired,selectedDate:l.PropTypes.object.isRequired,togglePeriod:l.PropTypes.func.isRequired,mode:l.PropTypes.oneOf([y["default"].MODE_DATE,y["default"].MODE_DATETIME,y["default"].MODE_TIME])},enumerable:!0}]),t}(l.Component);t["default"]=D,e.exports=D,e.exports=t["default"]},function(e,t,a){"use strict";var s=a(2)["default"],r=a(18)["default"],o=a(27)["default"],n=a(30)["default"],i=a(37)["default"];Object.defineProperty(t,"__esModule",{value:!0});var u=a(38),l=i(u),c=a(51),d=i(c),p=function(e){function t(){var e=this;n(this,t),s(Object.getPrototypeOf(t.prototype),"constructor",this).apply(this,arguments),this.renderSwitchButton=function(){return e.props.mode===d["default"].MODE_TIME?l["default"].createElement("ul",{className:"list-unstyled"},l["default"].createElement("li",null,l["default"].createElement("span",{className:"btn picker-switch",onClick:e.props.onSwitch,style:{width:"100%"}},l["default"].createElement("span",{className:"glyphicon glyphicon-time"})))):null}}return r(t,e),o(t,[{key:"render",value:function(){return l["default"].createElement("div",{className:"timepicker-minutes","data-action":"selectMinute",style:{display:"block"}},this.renderSwitchButton(),l["default"].createElement("table",{className:"table-condensed"},l["default"].createElement("tbody",null,l["default"].createElement("tr",null,l["default"].createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"00"),l["default"].createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"05"),l["default"].createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"10"),l["default"].createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"15")),l["default"].createElement("tr",null,l["default"].createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"20"),l["default"].createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"25"),l["default"].createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"30"),l["default"].createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"35")),l["default"].createElement("tr",null,l["default"].createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"40"),l["default"].createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"45"),l["default"].createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"50"),l["default"].createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"55")))))}}],[{key:"propTypes",value:{setSelectedMinute:u.PropTypes.func.isRequired,onSwitch:u.PropTypes.func.isRequired,mode:u.PropTypes.string.isRequired},enumerable:!0}]),t}(u.Component);t["default"]=p,e.exports=t["default"]},function(e,t){"use strict";e.exports={MODE_DATE:"date",MODE_DATETIME:"datetime",MODE_TIME:"time",SIZE_SMALL:"sm",SIZE_MEDIUM:"md",SIZE_LARGE:"lg"}},function(e,t,a){"use strict";var s=a(2)["default"],r=a(18)["default"],o=a(27)["default"],n=a(30)["default"],i=a(37)["default"];Object.defineProperty(t,"__esModule",{value:!0});var u=a(38),l=i(u),c=a(51),d=i(c),p=function(e){function t(){var e=this;n(this,t),s(Object.getPrototypeOf(t.prototype),"constructor",this).apply(this,arguments),this.renderSwitchButton=function(){return e.props.mode===d["default"].MODE_TIME?l["default"].createElement("ul",{className:"list-unstyled"},l["default"].createElement("li",null,l["default"].createElement("span",{className:"btn picker-switch",onClick:e.props.onSwitch,style:{width:"100%"}},l["default"].createElement("span",{className:"glyphicon glyphicon-time"})))):null}}return r(t,e),o(t,[{key:"render",value:function(){return l["default"].createElement("div",{className:"timepicker-hours","data-action":"selectHour",style:{display:"block"}},this.renderSwitchButton(),l["default"].createElement("table",{className:"table-condensed"},l["default"].createElement("tbody",null,l["default"].createElement("tr",null,l["default"].createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"01"),l["default"].createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"02"),l["default"].createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"03"),l["default"].createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"04")),l["default"].createElement("tr",null,l["default"].createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"05"),l["default"].createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"06"),l["default"].createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"07"),l["default"].createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"08")),l["default"].createElement("tr",null,l["default"].createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"09"),l["default"].createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"10"),l["default"].createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"11"),l["default"].createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"12")),l["default"].createElement("tr",null,l["default"].createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"13"),l["default"].createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"14"),l["default"].createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"15"),l["default"].createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"16")),l["default"].createElement("tr",null,l["default"].createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"17"),l["default"].createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"18"),l["default"].createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"19"),l["default"].createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"20")),l["default"].createElement("tr",null,l["default"].createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"21"),l["default"].createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"22"),l["default"].createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"23"),l["default"].createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"24")))))}}],[{key:"propTypes",value:{setSelectedHour:u.PropTypes.func.isRequired,onSwitch:u.PropTypes.func.isRequired,mode:u.PropTypes.string.isRequired},enumerable:!0}]),t}(u.Component);t["default"]=p,e.exports=t["default"]}])}); \ No newline at end of file diff --git a/examples/basic/basic.js b/examples/basic/basic.js index 4b9a2f16..16b1297a 100644 --- a/examples/basic/basic.js +++ b/examples/basic/basic.js @@ -50,15 +50,15 @@ class Basic extends Component { -
-
- Example with default Text - - 
 {''}
-
+
+
+ Example with default Text + + 
 {''}
+
Default Basic Example @@ -102,26 +102,35 @@ class Basic extends Component { maxDate={moment().add(1, "days")} minDate={moment().subtract(1, "days")} /> - 
 {''}
- + 
 {''}
- just time picker - - 
 {''}
+ just time picker + + 
 {''}
- just date picker - - 
 {''}
+ just date picker + + 
 {''}
+
+
+
+
+ just month picker + + 
 {''}
diff --git a/package.json b/package.json index 03aba0b9..66d55760 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,9 @@ "test": "jest", "lint": "eslint ." }, + "publishConfig": { + "registry": "http://npm.addevcloudservices.com.au" + }, "keywords": [ "react", "react-component", @@ -86,7 +89,7 @@ }, "dependencies": { "babel-runtime": "^5.6.18", - "classnames": "^2.1.2", + "classnames": "^2.2.1", "moment": "^2.8.2" } } diff --git a/src/Constants.js b/src/Constants.js index 24e68037..15fd32eb 100644 --- a/src/Constants.js +++ b/src/Constants.js @@ -1,5 +1,6 @@ module.exports = { MODE_DATE: "date", + MODE_MONTH: "month", MODE_DATETIME: "datetime", MODE_TIME: "time", diff --git a/src/DateTimeField.js b/src/DateTimeField.js index 2e2d342b..40f06677 100644 --- a/src/DateTimeField.js +++ b/src/DateTimeField.js @@ -1,4 +1,5 @@ import React, { Component, PropTypes } from "react"; +import ReactDOM from "react-dom"; import moment from "moment"; import classnames from "classnames"; import DateTimePicker from "./DateTimePicker.js"; @@ -25,6 +26,8 @@ export default class DateTimeField extends Component { return "h:mm A"; case Constants.MODE_DATE: return "MM/DD/YY"; + case Constants.MODE_MONTH: + return "MM/YY"; default: return "MM/DD/YY h:mm A"; } @@ -40,14 +43,15 @@ export default class DateTimeField extends Component { inputProps: PropTypes.object, inputFormat: PropTypes.string, defaultText: PropTypes.string, - mode: PropTypes.oneOf([Constants.MODE_DATE, Constants.MODE_DATETIME, Constants.MODE_TIME]), + mode: PropTypes.oneOf([Constants.MODE_DATE, Constants.MODE_MONTH, Constants.MODE_DATETIME, Constants.MODE_TIME]), minDate: PropTypes.object, maxDate: PropTypes.object, direction: PropTypes.string, showToday: PropTypes.bool, viewMode: PropTypes.string, size: PropTypes.oneOf([Constants.SIZE_SMALL, Constants.SIZE_MEDIUM, Constants.SIZE_LARGE]), - daysOfWeekDisabled: PropTypes.arrayOf(PropTypes.number) + daysOfWeekDisabled: PropTypes.arrayOf(PropTypes.number), + isValid: PropTypes.bool } state = { @@ -63,7 +67,8 @@ export default class DateTimeField extends Component { }, viewDate: moment(this.props.dateTime, this.props.format, true).startOf("month"), selectedDate: moment(this.props.dateTime, this.props.format, true), - inputValue: typeof this.props.defaultText !== "undefined" ? this.props.defaultText : moment(this.props.dateTime, this.props.format, true).format(this.resolvePropsInputFormat()) + inputValue: typeof this.props.defaultText !== "undefined" ? undefined : moment(this.props.dateTime, this.props.format, true).format(this.resolvePropsInputFormat()), + isValid: true } componentWillReceiveProps = (nextProps) => { @@ -81,10 +86,10 @@ export default class DateTimeField extends Component { return this.setState(state); } - - - onChange = (event) => { + formatValueForEvent(eventName, event) { const value = event.target == null ? event : event.target.value; + + this.setIsValid(this.checkIsValid(value)); if (moment(value, this.state.inputFormat, true).isValid()) { this.setState({ selectedDate: moment(value, this.state.inputFormat, true), @@ -95,24 +100,61 @@ export default class DateTimeField extends Component { return this.setState({ inputValue: value }, function() { - return this.props.onChange(moment(this.state.inputValue, this.state.inputFormat, true).format(this.props.format), value); + return this.props[eventName](moment(this.state.inputValue, this.state.inputFormat, true).format(this.props.format), value); }); } + onChange = event => { + this.formatValueForEvent('onChange', event); + }; + + onBlur = event => { + this.formatValueForEvent('onBlur', event); + }; + + checkIsValid = (value) => { + return moment(value, this.state.inputFormat, true).isValid() || value === this.props.defaultText || value === ''; + } + + setIsValid = (isValid) => { + return this.setState({ + isValid: isValid + }) + } + getValue = () => { return moment(this.state.inputValue, this.props.inputFormat, true).format(this.props.format); } + setSelectedMonth = (e) => { + const { target } = e; + if (target.className && !target.className.match(/disabled/g)) { + return this.setState({ + selectedDate: moment(this.state.viewDate.clone().toDate()) + .month(e.target.innerHTML).date(1) + .hour(this.state.selectedDate.hours()).minute(this.state.selectedDate.minutes()) + }, function() { + this.closePicker(); + this.props.onChange(this.state.selectedDate.format(this.props.format)); + return this.setState({ + inputValue: this.state.selectedDate.format(this.state.inputFormat) + }); + }); + } + } + setSelectedDate = (e) => { const { target } = e; + if (target.className && !target.className.match(/disabled/g)) { + this.setIsValid(true); let month; if (target.className.indexOf("new") >= 0) month = this.state.viewDate.month() + 1; else if (target.className.indexOf("old") >= 0) month = this.state.viewDate.month() - 1; else month = this.state.viewDate.month(); return this.setState({ - selectedDate: this.state.viewDate.clone().month(month).date(parseInt(e.target.innerHTML)).hour(this.state.selectedDate.hours()).minute(this.state.selectedDate.minutes()) + selectedDate: moment(this.state.viewDate.clone().toDate()).month(month).date(parseInt(e.target.innerHTML)).hour(this.state.selectedDate.hours()).minute(this.state.selectedDate.minutes()) }, function() { this.closePicker(); this.props.onChange(this.state.selectedDate.format(this.props.format)); @@ -124,6 +166,7 @@ export default class DateTimeField extends Component { } setSelectedHour = (e) => { + this.setIsValid(true); return this.setState({ selectedDate: this.state.selectedDate.clone().hour(parseInt(e.target.innerHTML)).minute(this.state.selectedDate.minutes()) }, function() { @@ -136,6 +179,7 @@ export default class DateTimeField extends Component { } setSelectedMinute = (e) => { + this.setIsValid(true); return this.setState({ selectedDate: this.state.selectedDate.clone().hour(this.state.selectedDate.hours()).minute(parseInt(e.target.innerHTML)) }, function() { @@ -254,55 +298,91 @@ export default class DateTimeField extends Component { }); } - onClick = () => { - let classes, gBCR, offset, placePosition, scrollTop, styles; - if (this.state.showPicker) { - return this.closePicker(); - } else { - this.setState({ - showPicker: true + setToday = () => { + var today = moment(); + this.setIsValid(true); + return this.setState({ + selectedDate: today, + }, function() { + this.closePicker(); + this.props.onChange(today); + console.log(this.state.selectedDate) + return this.setState({ + inputValue: this.state.selectedDate.format(this.resolvePropsInputFormat()) }); + }); + } + + calculatePosition = (options) => { + let classes, gBCR, offset, placePosition, scrollTop, styles, widgetOffsetHeight, clientHeight, height; + + classes = {}; + if(options) { + classes["months"] = options.monthsDisplayed; + classes["years"] = options.yearsDisplayed; + classes["days"] = options.daysDisplayed; + classes["time"] = options.timeDisplayed; + } gBCR = this.refs.dtpbutton.getBoundingClientRect(); - classes = { - "bootstrap-datetimepicker-widget": true, - "dropdown-menu": true - }; + offset = { top: gBCR.top + window.pageYOffset - document.documentElement.clientTop, - left: gBCR.left + window.pageXOffset - document.documentElement.clientLeft + left: 0 }; offset.top = offset.top + this.refs.datetimepicker.offsetHeight; + //Support for both old version of react and new version (v1.4.2) of react + //The new version of react return the child refs as a component rather than a DomNode + widgetOffsetHeight = this.refs.widget.offsetHeight || ReactDOM.findDOMNode(this.refs.widget).offsetHeight; + clientHeight = this.refs.widget.clientHeight || ReactDOM.findDOMNode(this.refs.widget).clientHeight; + height = this.refs.widget.height || ReactDOM.findDOMNode(this.refs.widget).height; + scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop; - placePosition = this.props.direction === "up" ? "top" : this.props.direction === "bottom" ? "bottom" : this.props.direction === "auto" ? offset.top + this.refs.widget.offsetHeight > window.offsetHeight + scrollTop && this.refs.widget.offsetHeight + this.refs.datetimepicker.offsetHeight > offset.top ? "top" : "bottom" : void 0; + placePosition = this.props.direction === "up" ? "top" : this.props.direction === "bottom" ? "bottom" : this.props.direction === "auto" ? offset.top + widgetOffsetHeight > window.offsetHeight + scrollTop && widgetOffsetHeight + this.refs.datetimepicker.offsetHeight > offset.top ? "top" : "bottom" : void 0; if (placePosition === "top") { - offset.top = -this.refs.widget.offsetHeight - this.clientHeight - 2; + offset.top = -widgetOffsetHeight - 2; classes.top = true; classes.bottom = false; - classes["pull-right"] = true; } else { - offset.top = 40; + offset.top = 35; classes.top = false; classes.bottom = true; - classes["pull-right"] = true; } styles = { display: "block", position: "absolute", top: offset.top, - left: "auto", + left: offset.left, right: 40 }; return this.setState({ widgetStyle: styles, widgetClasses: classes }); + + } + + onClick = () => { + let displayOptions = {}; + + if (this.state.showPicker) { + return this.closePicker(); + } else { + this.setState({ + showPicker: true + }); + displayOptions.yearsDisplayed = (this.props.mode === 'year'); + displayOptions.monthsDisplayed = (this.props.mode === 'month'); + displayOptions.daysDisplayed = (this.props.mode === 'date'); + displayOptions.timeDisplayed = (this.props.mode === 'time'); + + this.calculatePosition(displayOptions); } } closePicker = () => { let style = {...this.state.widgetStyle}; style.left = -9999; - style.display = "none"; + style.display = "block"; return this.setState({ showPicker: false, widgetStyle: style @@ -334,11 +414,11 @@ export default class DateTimeField extends Component { } else { return ; } - } + }; render() { return ( -
+
{this.renderOverlay()} -
- +
+ @@ -382,4 +465,3 @@ export default class DateTimeField extends Component { ); } } - diff --git a/src/DateTimePicker.js b/src/DateTimePicker.js index e1b634a1..d53e32b7 100644 --- a/src/DateTimePicker.js +++ b/src/DateTimePicker.js @@ -1,5 +1,5 @@ import React, { Component, PropTypes } from "react"; -import classnames from "classnames"; +import classNames from "classnames"; import DateTimePickerDate from "./DateTimePickerDate.js"; import DateTimePickerTime from "./DateTimePickerTime.js"; import Constants from "./Constants.js"; @@ -17,8 +17,9 @@ export default class DateTimePicker extends Component { PropTypes.string, PropTypes.number ]), - mode: PropTypes.oneOf([Constants.MODE_DATE, Constants.MODE_DATETIME, Constants.MODE_TIME]), + mode: PropTypes.oneOf([Constants.MODE_DATE, Constants.MODE_MONTH, Constants.MODE_DATETIME, Constants.MODE_TIME]), daysOfWeekDisabled: PropTypes.array, + setSelectedMonth: PropTypes.func.isRequired, setSelectedDate: PropTypes.func.isRequired, subtractYear: PropTypes.func.isRequired, addYear: PropTypes.func.isRequired, @@ -37,7 +38,9 @@ export default class DateTimePicker extends Component { widgetStyle: PropTypes.object, togglePicker: PropTypes.func, setSelectedHour: PropTypes.func, - setSelectedMinute: PropTypes.func + setSelectedMinute: PropTypes.func, + setToday: PropTypes.func, + calculatePosition: PropTypes.func } renderDatePicker = () => { @@ -52,6 +55,7 @@ export default class DateTimePicker extends Component { maxDate={this.props.maxDate} minDate={this.props.minDate} selectedDate={this.props.selectedDate} + setSelectedMonth={this.props.setSelectedMonth} setSelectedDate={this.props.setSelectedDate} setViewMonth={this.props.setViewMonth} setViewYear={this.props.setViewYear} @@ -61,12 +65,27 @@ export default class DateTimePicker extends Component { subtractYear={this.props.subtractYear} viewDate={this.props.viewDate} viewMode={this.props.viewMode} + mode={this.props.mode} + calculatePosition = {this.props.calculatePosition} /> ); } } + componentWillUpdate = (nextProps, newState) => { + this.shouldCalculatePosition = false; + if(nextProps.showTimePicker !== this.props.showTimePicker) { + this.shouldCalculatePosition = true; + } + } + + componentDidUpdate = () => { + if(this.shouldCalculatePosition) { + this.props.calculatePosition(); + } + } + renderTimePicker = () => { if (this.props.showTimePicker) { return ( @@ -92,15 +111,23 @@ export default class DateTimePicker extends Component { return this.props.mode === Constants.MODE_DATETIME ? (
  • - + +
    • + ) : + this.props.mode === Constants.MODE_DATE ? + ( +
  • + Today
    • ) : null; } render() { + const widgetClass = classNames('bootstrap-datetimepicker-widget', 'dropdown-menu', this.props.widgetClasses); + return ( -
    +
      @@ -117,4 +144,3 @@ export default class DateTimePicker extends Component { ); } } - diff --git a/src/DateTimePickerDate.js b/src/DateTimePickerDate.js index df3cb868..ae51c469 100644 --- a/src/DateTimePickerDate.js +++ b/src/DateTimePickerDate.js @@ -2,6 +2,7 @@ import React, { Component, PropTypes } from "react"; import DateTimePickerDays from "./DateTimePickerDays"; import DateTimePickerMonths from "./DateTimePickerMonths"; import DateTimePickerYears from "./DateTimePickerYears"; +import Constants from "./Constants.js"; export default class DateTimePickerDate extends Component { static propTypes = { @@ -14,7 +15,9 @@ export default class DateTimePickerDate extends Component { PropTypes.string, PropTypes.number ]), + mode: PropTypes.oneOf([Constants.MODE_DATE, Constants.MODE_MONTH, Constants.MODE_DATETIME]), daysOfWeekDisabled: PropTypes.array, + setSelectedMonth: PropTypes.func.isRequired, setSelectedDate: PropTypes.func.isRequired, subtractYear: PropTypes.func.isRequired, addYear: PropTypes.func.isRequired, @@ -23,7 +26,8 @@ export default class DateTimePickerDate extends Component { addDecade: PropTypes.func.isRequired, subtractDecade: PropTypes.func.isRequired, minDate: PropTypes.object, - maxDate: PropTypes.object + maxDate: PropTypes.object, + calculatePosition: PropTypes.func } constructor(props) { @@ -46,6 +50,9 @@ export default class DateTimePickerDate extends Component { } }; this.state = viewModes[this.props.viewMode] || viewModes[Object.keys(viewModes)[this.props.viewMode]] || viewModes.days; + if (this.state.daysDisplayed && this.props.mode === Constants.MODE_MONTH) { + this.state = viewModes.months; + } } showMonths = () => { @@ -78,6 +85,19 @@ export default class DateTimePickerDate extends Component { }); } + componentWillUpdate = (nextProps, newState) => { + this.shouldCalculatePosition = false; + if(newState.monthsDisplayed !== this.state.monthsDisplayed || newState.yearsDisplayed !== this.state.yearsDisplayed || newState.daysDisplayed !== this.state.daysDisplayed ) { + this.shouldCalculatePosition = true; + } + } + + componentDidUpdate = () => { + if(this.shouldCalculatePosition) { + this.props.calculatePosition({monthsDisplayed: this.state.monthsDisplayed, yearsDisplayed: this.state.yearsDisplayed, daysDisplayed: this.state.daysDisplayed}); + } + } + renderDays = () => { if (this.state.daysDisplayed) { return ( @@ -105,10 +125,12 @@ export default class DateTimePickerDate extends Component { ); } else { @@ -144,4 +166,3 @@ export default class DateTimePickerDate extends Component { ); } } - diff --git a/src/DateTimePickerMonths.js b/src/DateTimePickerMonths.js index b09e1c07..a27c7629 100644 --- a/src/DateTimePickerMonths.js +++ b/src/DateTimePickerMonths.js @@ -1,6 +1,7 @@ import React, { Component, PropTypes } from "react"; import classnames from "classnames"; import moment from "moment"; +import Constants from "./Constants.js"; export default class DateTimePickerMonths extends Component { static propTypes = { @@ -9,11 +10,14 @@ export default class DateTimePickerMonths extends Component { viewDate: PropTypes.object.isRequired, selectedDate: PropTypes.object.isRequired, showYears: PropTypes.func.isRequired, - setViewMonth: PropTypes.func.isRequired + setViewMonth: PropTypes.func.isRequired, + setSelectedMonth: PropTypes.func.isRequired, + mode: PropTypes.oneOf([Constants.MODE_DATE, Constants.MODE_MONTH, Constants.MODE_DATETIME]) } renderMonths = () => { var classes, i, month, months, monthsShort; + const onClick = this.props.mode === Constants.MODE_MONTH ? this.props.setSelectedMonth : this.props.setViewMonth; month = this.props.selectedDate.month(); monthsShort = moment.monthsShort(); i = 0; @@ -23,7 +27,7 @@ export default class DateTimePickerMonths extends Component { month: true, "active": i === month && this.props.viewDate.year() === this.props.selectedDate.year() }; - months.push({monthsShort[i]}); + months.push({monthsShort[i]}); i++; } return months; @@ -35,11 +39,11 @@ export default class DateTimePickerMonths extends Component { - + - + @@ -53,4 +57,3 @@ export default class DateTimePickerMonths extends Component { ); } } - diff --git a/src/DateTimePickerYears.js b/src/DateTimePickerYears.js index 449f7b03..ae094a82 100644 --- a/src/DateTimePickerYears.js +++ b/src/DateTimePickerYears.js @@ -37,11 +37,11 @@ export default class DateTimePickerYears extends Component {
      ‹ {this.props.viewDate.year()}›
      - + - + @@ -55,4 +55,3 @@ export default class DateTimePickerYears extends Component { ); } } - diff --git a/src/__tests__/DateTimeField-test.js b/src/__tests__/DateTimeField-test.js index 635acbf2..3a3a12d3 100644 --- a/src/__tests__/DateTimeField-test.js +++ b/src/__tests__/DateTimeField-test.js @@ -58,11 +58,31 @@ describe("DateTimeField", function() { it("doesn't change the defaultText if dateTime didn't change", function() { const Parent = createParent({defaultText: "Pick a date"}); const input = TestUtils.findRenderedDOMComponentWithTag(Parent, "input"); - expect(input.value).toBe("Pick a date"); + expect(input.getAttribute('placeholder')).toBe("Pick a date"); Parent.setState({}); - expect(input.value).toBe("Pick a date"); + expect(input.getAttribute('placeholder')).toBe("Pick a date"); }); + it('should call the onChange callback', function () { + const onChangeMock = jest.genMockFunction(); + const Parent = createParent({onChange: onChangeMock}); + const input = TestUtils.findRenderedDOMComponentWithTag(Parent, "input"); + input.value = "2:13 AM"; + TestUtils.Simulate.change(input); + + expect(onChangeMock.mock.calls.length).toBe(1); + }) + + it('should call the onBlur callback', function () { + const onBlurMock = jest.genMockFunction(); + const Parent = createParent({onBlur: onBlurMock}); + const input = TestUtils.findRenderedDOMComponentWithTag(Parent, "input"); + input.value = "2:13 AM"; + TestUtils.Simulate.change(input); + TestUtils.Simulate.blur(input); + + expect(onBlurMock.mock.calls.length).toBe(1); + }) }); diff --git a/src/__tests__/DateTimePickerDate-test.js b/src/__tests__/DateTimePickerDate-test.js new file mode 100644 index 00000000..fac97c08 --- /dev/null +++ b/src/__tests__/DateTimePickerDate-test.js @@ -0,0 +1,104 @@ +import React from "react"; +import TestUtils from "react-addons-test-utils"; + +jest.dontMock("moment"); +jest.dontMock("../DateTimePickerDate.js"); + +describe("DateTimePickerDate", function() { + const moment = require("moment"); + const DateTimePickerDate = require("../DateTimePickerDate.js"); + + let subtractMonthMock, addMonthMock, viewDate, selectedDate, setSelectedMonthMock, setSelectedDateMock, + subtractYearMock, addYearMock, setViewMonthMock, setViewYearMock, addDecadeMock, subtractDecadeMock; + + + beforeEach(() => { + subtractMonthMock = jest.genMockFunction(); + addMonthMock = jest.genMockFunction(); + viewDate = moment(); + selectedDate = moment(); + setSelectedMonthMock = jest.genMockFunction(); + setSelectedDateMock = jest.genMockFunction(); + subtractYearMock = jest.genMockFunction(); + addYearMock = jest.genMockFunction(); + setViewMonthMock = jest.genMockFunction(); + setViewYearMock = jest.genMockFunction(); + addDecadeMock = jest.genMockFunction(); + subtractDecadeMock = jest.genMockFunction(); + }) + + function render(args) { + let {viewMode, mode} = args; + return TestUtils.renderIntoDocument() + } + + describe("initial state", function() { + describe("when it is a regular date picker", function() { + it("shows days by default", function() { + let picker = render({}); + + expect(picker.state.daysDisplayed).toBe(true); + }) + + it("shows days when that is the view mode", function() { + let picker = render({viewMode: "days"}); + + expect(picker.state.daysDisplayed).toBe(true); + }) + + it("shows months when that is the view mode", function() { + let picker = render({viewMode: "months"}); + + expect(picker.state.monthsDisplayed).toBe(true); + }) + + it("shows years when that is the view mode", function() { + let picker = render({viewMode: "years"}); + + expect(picker.state.yearsDisplayed).toBe(true); + }) + }) + + describe("when it is a month picker", function() { + it("shows months by default", function() { + let picker = render({mode: "month"}); + + expect(picker.state.monthsDisplayed).toBe(true); + }) + + it("shows months when the view mode is explicitly days", function() { + let picker = render({viewMode: "days", mode: "month"}); + + expect(picker.state.monthsDisplayed).toBe(true); + }) + + it("shows months when that is the view mode", function() { + let picker = render({viewMode: "months", mode: "month"}); + + expect(picker.state.monthsDisplayed).toBe(true); + }) + + it("shows years when that is the view mode", function() { + let picker = render({viewMode: "years", mode: "month"}); + + expect(picker.state.yearsDisplayed).toBe(true); + }) + }) + }); + +}); diff --git a/src/__tests__/DateTimePickerMonths-test.js b/src/__tests__/DateTimePickerMonths-test.js index f9656004..886800b1 100644 --- a/src/__tests__/DateTimePickerMonths-test.js +++ b/src/__tests__/DateTimePickerMonths-test.js @@ -7,13 +7,14 @@ jest.dontMock("../DateTimePickerMonths.js"); describe("DateTimePickerMonths", function() { const moment = require("moment"); const DateTimePickerMonths = require("../DateTimePickerMonths.js"); - let subtractYearMock, addYearMock, setViewMonthMock, showYearsMock, months; + let subtractYearMock, addYearMock, setViewMonthMock, setSelectedMonthMock, showYearsMock, months; beforeEach(() => { subtractYearMock = jest.genMockFunction(); addYearMock = jest.genMockFunction(); showYearsMock = jest.genMockFunction(); setViewMonthMock = jest.genMockFunction(); + setSelectedMonthMock = jest.genMockFunction(); months = TestUtils.renderIntoDocument( ); }); @@ -50,6 +53,27 @@ describe("DateTimePickerMonths", function() { TestUtils.Simulate.click(month); expect(setViewMonthMock.mock.calls.length).toBe(1); }); + + describe("when the date picker mode is set to month picker", function() { + it("calls setSelectedMonth when clicking a month", function() { + months = TestUtils.renderIntoDocument( + + ); + + const month = TestUtils.findRenderedDOMComponentWithClass(months, "active"); + TestUtils.Simulate.click(month); + expect(setSelectedMonthMock.mock.calls.length).toBe(1); + }); + }); }); describe("UI", function() { @@ -77,6 +101,8 @@ describe("DateTimePickerMonths", function() { showYears={showYearsMock} subtractYear={subtractYearMock} viewDate={moment().add(2, "year")} + setSelectedMonth={setSelectedMonthMock} + mode={"date"} /> ); const active = TestUtils.scryRenderedDOMComponentsWithClass(months, "active");
      ‹ {year} - {year + 9}›