/* react-datetime v2.8.8 https://github.com/YouCanBookMe/react-datetime MIT: https://github.com/YouCanBookMe/react-datetime/raw/master/LICENSE */ (function webpackUniversalModuleDefinition(root, factory) { if(typeof exports === 'object' && typeof module === 'object') module.exports = factory(require("moment"), require("React"), require("ReactDOM")); else if(typeof define === 'function' && define.amd) define(["moment", "React", "ReactDOM"], factory); else if(typeof exports === 'object') exports["Datetime"] = factory(require("moment"), require("React"), require("ReactDOM")); else root["Datetime"] = factory(root["moment"], root["React"], root["ReactDOM"]); })(this, function(__WEBPACK_EXTERNAL_MODULE_2__, __WEBPACK_EXTERNAL_MODULE_3__, __WEBPACK_EXTERNAL_MODULE_7__) { 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__) { 'use strict'; var assign = __webpack_require__(1), moment = __webpack_require__(2), React = __webpack_require__(3), CalendarContainer = __webpack_require__(4) ; var TYPES = React.PropTypes; var Datetime = React.createClass({ propTypes: { // value: TYPES.object | TYPES.string, // defaultValue: TYPES.object | TYPES.string, onFocus: TYPES.func, onBlur: TYPES.func, onChange: TYPES.func, locale: TYPES.string, utc: TYPES.bool, input: TYPES.bool, // dateFormat: TYPES.string | TYPES.bool, // timeFormat: TYPES.string | TYPES.bool, inputProps: TYPES.object, timeConstraints: TYPES.object, viewMode: TYPES.oneOf(['years', 'months', 'days', 'time']), isValidDate: TYPES.func, open: TYPES.bool, strictParsing: TYPES.bool, closeOnSelect: TYPES.bool, closeOnTab: TYPES.bool }, getDefaultProps: function() { var nof = function() {}; return { className: '', defaultValue: '', inputProps: {}, input: true, onFocus: nof, onBlur: nof, onChange: nof, timeFormat: true, timeConstraints: {}, dateFormat: true, strictParsing: true, closeOnSelect: false, closeOnTab: true, utc: false }; }, getInitialState: function() { var state = this.getStateFromProps( this.props ); if ( state.open === undefined ) state.open = !this.props.input; state.currentView = this.props.dateFormat ? (this.props.viewMode || state.updateOn || 'days') : 'time'; return state; }, getStateFromProps: function( props ) { var formats = this.getFormats( props ), date = props.value || props.defaultValue, selectedDate, viewDate, updateOn, inputValue ; if ( date && typeof date === 'string' ) selectedDate = this.localMoment( date, formats.datetime ); else if ( date ) selectedDate = this.localMoment( date ); if ( selectedDate && !selectedDate.isValid() ) selectedDate = null; viewDate = selectedDate ? selectedDate.clone().startOf('month') : this.localMoment().startOf('month') ; updateOn = this.getUpdateOn(formats); if ( selectedDate ) inputValue = selectedDate.format(formats.datetime); else if ( date.isValid && !date.isValid() ) inputValue = ''; else inputValue = date || ''; return { updateOn: updateOn, inputFormat: formats.datetime, viewDate: viewDate, selectedDate: selectedDate, inputValue: inputValue, open: props.open }; }, getUpdateOn: function( formats ) { if ( formats.date.match(/[lLD]/) ) { return 'days'; } else if ( formats.date.indexOf('M') !== -1 ) { return 'months'; } else if ( formats.date.indexOf('Y') !== -1 ) { return 'years'; } return 'days'; }, getFormats: function( props ) { var formats = { date: props.dateFormat || '', time: props.timeFormat || '' }, locale = this.localMoment( props.date, null, props ).localeData() ; if ( formats.date === true ) { formats.date = locale.longDateFormat('L'); } else if ( this.getUpdateOn(formats) !== 'days' ) { formats.time = ''; } if ( formats.time === true ) { formats.time = locale.longDateFormat('LT'); } formats.datetime = formats.date && formats.time ? formats.date + ' ' + formats.time : formats.date || formats.time ; return formats; }, componentWillReceiveProps: function( nextProps ) { var formats = this.getFormats( nextProps ), updatedState = {} ; if ( nextProps.value !== this.props.value || formats.datetime !== this.getFormats( this.props ).datetime ) { updatedState = this.getStateFromProps( nextProps ); } if ( updatedState.open === undefined ) { if ( this.props.closeOnSelect && this.state.currentView !== 'time' ) { updatedState.open = false; } else { updatedState.open = this.state.open; } } if ( nextProps.viewMode !== this.props.viewMode ) { updatedState.currentView = nextProps.viewMode; } if ( nextProps.locale !== this.props.locale ) { if ( this.state.viewDate ) { var updatedViewDate = this.state.viewDate.clone().locale( nextProps.locale ); updatedState.viewDate = updatedViewDate; } if ( this.state.selectedDate ) { var updatedSelectedDate = this.state.selectedDate.clone().locale( nextProps.locale ); updatedState.selectedDate = updatedSelectedDate; updatedState.inputValue = updatedSelectedDate.format( formats.datetime ); } } if ( nextProps.utc !== this.props.utc ) { if ( nextProps.utc ) { if ( this.state.viewDate ) updatedState.viewDate = this.state.viewDate.clone().utc(); if ( this.state.selectedDate ) { updatedState.selectedDate = this.state.selectedDate.clone().utc(); updatedState.inputValue = updatedState.selectedDate.format( formats.datetime ); } } else { if ( this.state.viewDate ) updatedState.viewDate = this.state.viewDate.clone().local(); if ( this.state.selectedDate ) { updatedState.selectedDate = this.state.selectedDate.clone().local(); updatedState.inputValue = updatedState.selectedDate.format(formats.datetime); } } } this.setState( updatedState ); }, onInputChange: function( e ) { var value = e.target === null ? e : e.target.value, localMoment = this.localMoment( value, this.state.inputFormat ), update = { inputValue: value } ; if ( localMoment.isValid() && !this.props.value ) { update.selectedDate = localMoment; update.viewDate = localMoment.clone().startOf('month'); } else { update.selectedDate = null; } return this.setState( update, function() { return this.props.onChange( localMoment.isValid() ? localMoment : this.state.inputValue ); }); }, onInputKey: function( e ) { if ( e.which === 9 && this.props.closeOnTab ) { this.closeCalendar(); } }, showView: function( view ) { var me = this; return function() { me.setState({ currentView: view }); }; }, setDate: function( type ) { var me = this, nextViews = { month: 'days', year: 'months' } ; return function( e ) { me.setState({ viewDate: me.state.viewDate.clone()[ type ]( parseInt(e.target.getAttribute('data-value'), 10) ).startOf( type ), currentView: nextViews[ type ] }); }; }, addTime: function( amount, type, toSelected ) { return this.updateTime( 'add', amount, type, toSelected ); }, subtractTime: function( amount, type, toSelected ) { return this.updateTime( 'subtract', amount, type, toSelected ); }, updateTime: function( op, amount, type, toSelected ) { var me = this; return function() { var update = {}, date = toSelected ? 'selectedDate' : 'viewDate' ; update[ date ] = me.state[ date ].clone()[ op ]( amount, type ); me.setState( update ); }; }, allowedSetTime: ['hours', 'minutes', 'seconds', 'milliseconds'], setTime: function( type, value ) { var index = this.allowedSetTime.indexOf( type ) + 1, state = this.state, date = (state.selectedDate || state.viewDate).clone(), nextType ; // It is needed to set all the time properties // to not to reset the time date[ type ]( value ); for (; index < this.allowedSetTime.length; index++) { nextType = this.allowedSetTime[index]; date[ nextType ]( date[nextType]() ); } if ( !this.props.value ) { this.setState({ selectedDate: date, inputValue: date.format( state.inputFormat ) }); } this.props.onChange( date ); }, updateSelectedDate: function( e, close ) { var target = e.target, modifier = 0, viewDate = this.state.viewDate, currentDate = this.state.selectedDate || viewDate, date ; if (target.className.indexOf('rdtDay') !== -1) { if (target.className.indexOf('rdtNew') !== -1) modifier = 1; else if (target.className.indexOf('rdtOld') !== -1) modifier = -1; date = viewDate.clone() .month( viewDate.month() + modifier ) .date( parseInt( target.getAttribute('data-value'), 10 ) ); } else if (target.className.indexOf('rdtMonth') !== -1) { date = viewDate.clone() .month( parseInt( target.getAttribute('data-value'), 10 ) ) .date( currentDate.date() ); } else if (target.className.indexOf('rdtYear') !== -1) { date = viewDate.clone() .month( currentDate.month() ) .date( currentDate.date() ) .year( parseInt( target.getAttribute('data-value'), 10 ) ); } date.hours( currentDate.hours() ) .minutes( currentDate.minutes() ) .seconds( currentDate.seconds() ) .milliseconds( currentDate.milliseconds() ); if ( !this.props.value ) { var open = !( this.props.closeOnSelect && close ); if ( !open ) { this.props.onBlur( date ); } this.setState({ selectedDate: date, viewDate: date.clone().startOf('month'), inputValue: date.format( this.state.inputFormat ), open: open }); } else { if ( this.props.closeOnSelect && close ) { this.closeCalendar(); } } this.props.onChange( date ); }, openCalendar: function() { if (!this.state.open) { this.setState({ open: true }, function() { this.props.onFocus(); }); } }, closeCalendar: function() { this.setState({ open: false }, function () { this.props.onBlur( this.state.selectedDate || this.state.inputValue ); }); }, handleClickOutside: function() { if ( this.props.input && this.state.open && !this.props.open ) { this.setState({ open: false }, function() { this.props.onBlur( this.state.selectedDate || this.state.inputValue ); }); } }, localMoment: function( date, format, props ) { props = props || this.props; var momentFn = props.utc ? moment.utc : moment; var m = momentFn( date, format, props.strictParsing ); if ( props.locale ) m.locale( props.locale ); return m; }, componentProps: { fromProps: ['value', 'isValidDate', 'renderDay', 'renderMonth', 'renderYear', 'timeConstraints'], fromState: ['viewDate', 'selectedDate', 'updateOn'], fromThis: ['setDate', 'setTime', 'showView', 'addTime', 'subtractTime', 'updateSelectedDate', 'localMoment', 'handleClickOutside'] }, getComponentProps: function() { var me = this, formats = this.getFormats( this.props ), props = {dateFormat: formats.date, timeFormat: formats.time} ; this.componentProps.fromProps.forEach( function( name ) { props[ name ] = me.props[ name ]; }); this.componentProps.fromState.forEach( function( name ) { props[ name ] = me.state[ name ]; }); this.componentProps.fromThis.forEach( function( name ) { props[ name ] = me[ name ]; }); return props; }, render: function() { var DOM = React.DOM, className = 'rdt' + (this.props.className ? ( Array.isArray( this.props.className ) ? ' ' + this.props.className.join( ' ' ) : ' ' + this.props.className) : ''), children = [] ; if ( this.props.input ) { children = [ DOM.input( assign({ key: 'i', type: 'text', className: 'form-control', onFocus: this.openCalendar, onChange: this.onInputChange, onKeyDown: this.onInputKey, value: this.state.inputValue }, this.props.inputProps ))]; } else { className += ' rdtStatic'; } if ( this.state.open ) className += ' rdtOpen'; return DOM.div({className: className}, children.concat( DOM.div( { key: 'dt', className: 'rdtPicker' }, React.createElement( CalendarContainer, {view: this.state.currentView, viewProps: this.getComponentProps(), onClickOutside: this.handleClickOutside }) ) )); } }); // Make moment accessible through the Datetime class Datetime.moment = moment; module.exports = Datetime; /***/ }, /* 1 */ /***/ function(module, exports) { 'use strict'; var propIsEnumerable = Object.prototype.propertyIsEnumerable; function ToObject(val) { if (val == null) { throw new TypeError('Object.assign cannot be called with null or undefined'); } return Object(val); } function ownEnumerableKeys(obj) { var keys = Object.getOwnPropertyNames(obj); if (Object.getOwnPropertySymbols) { keys = keys.concat(Object.getOwnPropertySymbols(obj)); } return keys.filter(function (key) { return propIsEnumerable.call(obj, key); }); } module.exports = Object.assign || function (target, source) { var from; var keys; var to = ToObject(target); for (var s = 1; s < arguments.length; s++) { from = arguments[s]; keys = ownEnumerableKeys(Object(from)); for (var i = 0; i < keys.length; i++) { to[keys[i]] = from[keys[i]]; } } return to; }; /***/ }, /* 2 */ /***/ function(module, exports) { module.exports = __WEBPACK_EXTERNAL_MODULE_2__; /***/ }, /* 3 */ /***/ function(module, exports) { module.exports = __WEBPACK_EXTERNAL_MODULE_3__; /***/ }, /* 4 */ /***/ function(module, exports, __webpack_require__) { var React = __webpack_require__(3), DaysView = __webpack_require__(5), MonthsView = __webpack_require__(8), YearsView = __webpack_require__(9), TimeView = __webpack_require__(10) ; var CalendarContainer = React.createClass({ viewComponents: { days: DaysView, months: MonthsView, years: YearsView, time: TimeView }, render: function() { return React.createElement( this.viewComponents[ this.props.view ], this.props.viewProps ); } }); module.exports = CalendarContainer; /***/ }, /* 5 */ /***/ function(module, exports, __webpack_require__) { 'use strict'; var React = __webpack_require__(3), moment = __webpack_require__(2), onClickOutside = __webpack_require__(6) ; var DOM = React.DOM; var DateTimePickerDays = onClickOutside( React.createClass({ render: function() { var footer = this.renderFooter(), date = this.props.viewDate, locale = date.localeData(), tableChildren ; tableChildren = [ DOM.thead({ key: 'th' }, [ DOM.tr({ key: 'h' }, [ DOM.th({ key: 'p', className: 'rdtPrev' }, DOM.span({ onClick: this.props.subtractTime( 1, 'months' )}, '‹' )), DOM.th({ key: 's', className: 'rdtSwitch', onClick: this.props.showView( 'months' ), colSpan: 5, 'data-value': this.props.viewDate.month() }, locale.months( date ) + ' ' + date.year() ), DOM.th({ key: 'n', className: 'rdtNext' }, DOM.span({ onClick: this.props.addTime( 1, 'months' )}, '›' )) ]), DOM.tr({ key: 'd'}, this.getDaysOfWeek( locale ).map( function( day, index ) { return DOM.th({ key: day + index, className: 'dow'}, day ); }) ) ]), DOM.tbody({ key: 'tb' }, this.renderDays()) ]; if ( footer ) tableChildren.push( footer ); return DOM.div({ className: 'rdtDays' }, DOM.table({}, tableChildren ) ); }, /** * Get a list of the days of the week * depending on the current locale * @return {array} A list with the shortname of the days */ getDaysOfWeek: function( locale ) { var days = locale._weekdaysMin, first = locale.firstDayOfWeek(), dow = [], i = 0 ; days.forEach( function( day ) { dow[ (7 + ( i++ ) - first) % 7 ] = day; }); return dow; }, renderDays: function() { var date = this.props.viewDate, selected = this.props.selectedDate && this.props.selectedDate.clone(), prevMonth = date.clone().subtract( 1, 'months' ), currentYear = date.year(), currentMonth = date.month(), weeks = [], days = [], renderer = this.props.renderDay || this.renderDay, isValid = this.props.isValidDate || this.alwaysValidDate, classes, isDisabled, dayProps, currentDate ; // Go to the last week of the previous month prevMonth.date( prevMonth.daysInMonth() ).startOf( 'week' ); var lastDay = prevMonth.clone().add( 42, 'd' ); while ( prevMonth.isBefore( lastDay ) ) { classes = 'rdtDay'; currentDate = prevMonth.clone(); if ( ( prevMonth.year() === currentYear && prevMonth.month() < currentMonth ) || ( prevMonth.year() < currentYear ) ) classes += ' rdtOld'; else if ( ( prevMonth.year() === currentYear && prevMonth.month() > currentMonth ) || ( prevMonth.year() > currentYear ) ) classes += ' rdtNew'; if ( selected && prevMonth.isSame( selected, 'day' ) ) classes += ' rdtActive'; if ( prevMonth.isSame( moment(), 'day' ) ) classes += ' rdtToday'; isDisabled = !isValid( currentDate, selected ); if ( isDisabled ) classes += ' rdtDisabled'; dayProps = { key: prevMonth.format( 'M_D' ), 'data-value': prevMonth.date(), className: classes }; if ( !isDisabled ) dayProps.onClick = this.updateSelectedDate; days.push( renderer( dayProps, currentDate, selected ) ); if ( days.length === 7 ) { weeks.push( DOM.tr({ key: prevMonth.format( 'M_D' )}, days ) ); days = []; } prevMonth.add( 1, 'd' ); } return weeks; }, updateSelectedDate: function( event ) { this.props.updateSelectedDate( event, true ); }, renderDay: function( props, currentDate ) { return DOM.td( props, currentDate.date() ); }, renderFooter: function() { if ( !this.props.timeFormat ) return ''; var date = this.props.selectedDate || this.props.viewDate; return DOM.tfoot({ key: 'tf'}, DOM.tr({}, DOM.td({ onClick: this.props.showView( 'time' ), colSpan: 7, className: 'rdtTimeToggle' }, date.format( this.props.timeFormat )) ) ); }, alwaysValidDate: function() { return 1; }, handleClickOutside: function() { this.props.handleClickOutside(); } })); module.exports = DateTimePickerDays; /***/ }, /* 6 */ /***/ function(module, exports, __webpack_require__) { var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/** * A higher-order-component for handling onClickOutside for React components. */ (function(root) { // administrative var registeredComponents = []; var handlers = []; var IGNORE_CLASS = 'ignore-react-onclickoutside'; var DEFAULT_EVENTS = ['mousedown', 'touchstart']; /** * Check whether some DOM node is our Component's node. */ var isNodeFound = function(current, componentNode, ignoreClass) { if (current === componentNode) { return true; } // SVG elements do not technically reside in the rendered DOM, so // they do not have classList directly, but they offer a link to their // corresponding element, which can have classList. This extra check is for // that case. // See: http://www.w3.org/TR/SVG11/struct.html#InterfaceSVGUseElement // Discussion: https://github.com/Pomax/react-onclickoutside/pull/17 if (current.correspondingElement) { return current.correspondingElement.classList.contains(ignoreClass); } return current.classList.contains(ignoreClass); }; /** * Try to find our node in a hierarchy of nodes, returning the document * node as highest noode if our node is not found in the path up. */ var findHighest = function(current, componentNode, ignoreClass) { if (current === componentNode) { return true; } // If source=local then this event came from 'somewhere' // inside and should be ignored. We could handle this with // a layered approach, too, but that requires going back to // thinking in terms of Dom node nesting, running counter // to React's 'you shouldn't care about the DOM' philosophy. while(current.parentNode) { if (isNodeFound(current, componentNode, ignoreClass)) { return true; } current = current.parentNode; } return current; }; /** * Check if the browser scrollbar was clicked */ var clickedScrollbar = function(evt) { return document.documentElement.clientWidth <= evt.clientX; }; /** * Generate the event handler that checks whether a clicked DOM node * is inside of, or lives outside of, our Component's node tree. */ var generateOutsideCheck = function(componentNode, componentInstance, eventHandler, ignoreClass, excludeScrollbar, preventDefault, stopPropagation) { return function(evt) { if (preventDefault) { evt.preventDefault(); } if (stopPropagation) { evt.stopPropagation(); } var current = evt.target; if((excludeScrollbar && clickedScrollbar(evt)) || (findHighest(current, componentNode, ignoreClass) !== document)) { return; } eventHandler(evt); }; }; /** * This function generates the HOC function that you'll use * in order to impart onOutsideClick listening to an * arbitrary component. It gets called at the end of the * bootstrapping code to yield an instance of the * onClickOutsideHOC function defined inside setupHOC(). */ function setupHOC(root, React, ReactDOM) { // The actual Component-wrapping HOC: return function onClickOutsideHOC(Component, config) { var wrapComponentWithOnClickOutsideHandling = React.createClass({ statics: { /** * Access the wrapped Component's class. */ getClass: function() { if (Component.getClass) { return Component.getClass(); } return Component; } }, /** * Access the wrapped Component's instance. */ getInstance: function() { return Component.prototype.isReactComponent ? this.refs.instance : this; }, // this is given meaning in componentDidMount __outsideClickHandler: function() {}, /** * Add click listeners to the current document, * linked to this component's state. */ componentDidMount: function() { // If we are in an environment without a DOM such // as shallow rendering or snapshots then we exit // early to prevent any unhandled errors being thrown. if (typeof document === 'undefined' || !document.createElement){ return; } var instance = this.getInstance(); var clickOutsideHandler; if(config && typeof config.handleClickOutside === 'function') { clickOutsideHandler = config.handleClickOutside(instance); if(typeof clickOutsideHandler !== 'function') { throw new Error('Component lacks a function for processing outside click events specified by the handleClickOutside config option.'); } } else if(typeof instance.handleClickOutside === 'function') { if (React.Component.prototype.isPrototypeOf(instance)) { clickOutsideHandler = instance.handleClickOutside.bind(instance); } else { clickOutsideHandler = instance.handleClickOutside; } } else if(typeof instance.props.handleClickOutside === 'function') { clickOutsideHandler = instance.props.handleClickOutside; } else { throw new Error('Component lacks a handleClickOutside(event) function for processing outside click events.'); } var componentNode = ReactDOM.findDOMNode(instance); if (componentNode === null) { console.warn('Antipattern warning: there was no DOM node associated with the component that is being wrapped by outsideClick.'); console.warn([ 'This is typically caused by having a component that starts life with a render function that', 'returns `null` (due to a state or props value), so that the component \'exist\' in the React', 'chain of components, but not in the DOM.\n\nInstead, you need to refactor your code so that the', 'decision of whether or not to show your component is handled by the parent, in their render()', 'function.\n\nIn code, rather than:\n\n A{render(){return check? <.../> : null;}\n B{render(){}\n\nmake sure that you', 'use:\n\n A{render(){return <.../>}\n B{render(){return <...>{ check ? : null }<...>}}\n\nThat is:', 'the parent is always responsible for deciding whether or not to render any of its children.', 'It is not the child\'s responsibility to decide whether a render instruction from above should', 'get ignored or not by returning `null`.\n\nWhen any component gets its render() function called,', 'that is the signal that it should be rendering its part of the UI. It may in turn decide not to', 'render all of *its* children, but it should never return `null` for itself. It is not responsible', 'for that decision.' ].join(' ')); } var fn = this.__outsideClickHandler = generateOutsideCheck( componentNode, instance, clickOutsideHandler, this.props.outsideClickIgnoreClass || IGNORE_CLASS, this.props.excludeScrollbar || false, this.props.preventDefault || false, this.props.stopPropagation || false ); var pos = registeredComponents.length; registeredComponents.push(this); handlers[pos] = fn; // If there is a truthy disableOnClickOutside property for this // component, don't immediately start listening for outside events. if (!this.props.disableOnClickOutside) { this.enableOnClickOutside(); } }, /** * Track for disableOnClickOutside props changes and enable/disable click outside */ componentWillReceiveProps: function(nextProps) { if (this.props.disableOnClickOutside && !nextProps.disableOnClickOutside) { this.enableOnClickOutside(); } else if (!this.props.disableOnClickOutside && nextProps.disableOnClickOutside) { this.disableOnClickOutside(); } }, /** * Remove the document's event listeners */ componentWillUnmount: function() { this.disableOnClickOutside(); this.__outsideClickHandler = false; var pos = registeredComponents.indexOf(this); if( pos>-1) { // clean up so we don't leak memory if (handlers[pos]) { handlers.splice(pos, 1); } registeredComponents.splice(pos, 1); } }, /** * Can be called to explicitly enable event listening * for clicks and touches outside of this element. */ enableOnClickOutside: function() { var fn = this.__outsideClickHandler; if (typeof document !== 'undefined') { var events = this.props.eventTypes || DEFAULT_EVENTS; if (!events.forEach) { events = [events]; } events.forEach(function (eventName) { document.addEventListener(eventName, fn); }); } }, /** * Can be called to explicitly disable event listening * for clicks and touches outside of this element. */ disableOnClickOutside: function() { var fn = this.__outsideClickHandler; if (typeof document !== 'undefined') { var events = this.props.eventTypes || DEFAULT_EVENTS; if (!events.forEach) { events = [events]; } events.forEach(function (eventName) { document.removeEventListener(eventName, fn); }); } }, /** * Pass-through render */ render: function() { var passedProps = this.props; var props = {}; Object.keys(this.props).forEach(function(key) { if (key !== 'excludeScrollbar') { props[key] = passedProps[key]; } }); if (Component.prototype.isReactComponent) { props.ref = 'instance'; } props.disableOnClickOutside = this.disableOnClickOutside; props.enableOnClickOutside = this.enableOnClickOutside; return React.createElement(Component, props); } }); // Add display name for React devtools (function bindWrappedComponentName(c, wrapper) { var componentName = c.displayName || c.name || 'Component'; wrapper.displayName = 'OnClickOutside(' + componentName + ')'; }(Component, wrapComponentWithOnClickOutsideHandling)); return wrapComponentWithOnClickOutsideHandling; }; } /** * This function sets up the library in ways that * work with the various modulde loading solutions * used in JavaScript land today. */ function setupBinding(root, factory) { if (true) { // AMD. Register as an anonymous module. !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(3),__webpack_require__(7)], __WEBPACK_AMD_DEFINE_RESULT__ = function(React, ReactDom) { return factory(root, React, ReactDom); }.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); } else if (typeof exports === 'object') { // Node. Note that this does not work with strict // CommonJS, but only CommonJS-like environments // that support module.exports module.exports = factory(root, require('react'), require('react-dom')); } else { // Browser globals (root is window) root.onClickOutside = factory(root, React, ReactDOM); } } // Make it all happen setupBinding(root, setupHOC); }(this)); /***/ }, /* 7 */ /***/ function(module, exports) { module.exports = __WEBPACK_EXTERNAL_MODULE_7__; /***/ }, /* 8 */ /***/ function(module, exports, __webpack_require__) { 'use strict'; var React = __webpack_require__(3), onClickOutside = __webpack_require__(6) ; var DOM = React.DOM; var DateTimePickerMonths = onClickOutside( React.createClass({ render: function() { return DOM.div({ className: 'rdtMonths' }, [ DOM.table({ key: 'a' }, DOM.thead( {}, DOM.tr( {}, [ DOM.th({ key: 'prev', className: 'rdtPrev' }, DOM.span({ onClick: this.props.subtractTime( 1, 'years' )}, '‹' )), DOM.th({ key: 'year', className: 'rdtSwitch', onClick: this.props.showView( 'years' ), colSpan: 2, 'data-value': this.props.viewDate.year() }, this.props.viewDate.year() ), DOM.th({ key: 'next', className: 'rdtNext' }, DOM.span({ onClick: this.props.addTime( 1, 'years' )}, '›' )) ]))), DOM.table({ key: 'months' }, DOM.tbody({ key: 'b' }, this.renderMonths())) ]); }, renderMonths: function() { var date = this.props.selectedDate, month = this.props.viewDate.month(), year = this.props.viewDate.year(), rows = [], i = 0, months = [], renderer = this.props.renderMonth || this.renderMonth, isValid = this.props.isValidDate || this.alwaysValidDate, classes, props, currentMonth, isDisabled, noOfDaysInMonth, daysInMonth, validDay, // Date is irrelevant because we're only interested in month irrelevantDate = 1 ; while (i < 12) { classes = 'rdtMonth'; currentMonth = this.props.viewDate.clone().set({ year: year, month: i, date: irrelevantDate }); noOfDaysInMonth = currentMonth.endOf( 'month' ).format( 'D' ); daysInMonth = Array.from({ length: noOfDaysInMonth }, function( e, i ) { return i + 1; }); validDay = daysInMonth.find(function( d ) { var day = currentMonth.clone().set( 'date', d ); return isValid( day ); }); isDisabled = ( validDay === undefined ); if ( isDisabled ) classes += ' rdtDisabled'; if ( date && i === month && year === date.year() ) classes += ' rdtActive'; props = { key: i, 'data-value': i, className: classes }; if ( !isDisabled ) props.onClick = ( this.props.updateOn === 'months' ? this.updateSelectedMonth : this.props.setDate( 'month' ) ); months.push( renderer( props, i, year, date && date.clone() ) ); if ( months.length === 4 ) { rows.push( DOM.tr({ key: month + '_' + rows.length }, months ) ); months = []; } i++; } return rows; }, updateSelectedMonth: function( event ) { this.props.updateSelectedDate( event ); }, renderMonth: function( props, month ) { var localMoment = this.props.viewDate; var monthStr = localMoment.localeData().monthsShort( localMoment.month( month ) ); var strLength = 3; // Because some months are up to 5 characters long, we want to // use a fixed string length for consistency var monthStrFixedLength = monthStr.substring( 0, strLength ); return DOM.td( props, capitalize( monthStrFixedLength ) ); }, alwaysValidDate: function() { return 1; }, handleClickOutside: function() { this.props.handleClickOutside(); } })); function capitalize( str ) { return str.charAt( 0 ).toUpperCase() + str.slice( 1 ); } module.exports = DateTimePickerMonths; /***/ }, /* 9 */ /***/ function(module, exports, __webpack_require__) { 'use strict'; var React = __webpack_require__(3), onClickOutside = __webpack_require__(6) ; var DOM = React.DOM; var DateTimePickerYears = onClickOutside( React.createClass({ render: function() { var year = parseInt( this.props.viewDate.year() / 10, 10 ) * 10; return DOM.div({ className: 'rdtYears' }, [ DOM.table({ key: 'a' }, DOM.thead({}, DOM.tr({}, [ DOM.th({ key: 'prev', className: 'rdtPrev' }, DOM.span({ onClick: this.props.subtractTime( 10, 'years' )}, '‹' )), DOM.th({ key: 'year', className: 'rdtSwitch', onClick: this.props.showView( 'years' ), colSpan: 2 }, year + '-' + ( year + 9 ) ), DOM.th({ key: 'next', className: 'rdtNext' }, DOM.span({ onClick: this.props.addTime( 10, 'years' )}, '›' )) ]))), DOM.table({ key: 'years' }, DOM.tbody( {}, this.renderYears( year ))) ]); }, renderYears: function( year ) { var years = [], i = -1, rows = [], renderer = this.props.renderYear || this.renderYear, selectedDate = this.props.selectedDate, isValid = this.props.isValidDate || this.alwaysValidDate, classes, props, currentYear, isDisabled, noOfDaysInYear, daysInYear, validDay, // Month and date are irrelevant here because // we're only interested in the year irrelevantMonth = 0, irrelevantDate = 1 ; year--; while (i < 11) { classes = 'rdtYear'; currentYear = this.props.viewDate.clone().set( { year: year, month: irrelevantMonth, date: irrelevantDate } ); // Not sure what 'rdtOld' is for, commenting out for now as it's not working properly // if ( i === -1 | i === 10 ) // classes += ' rdtOld'; noOfDaysInYear = currentYear.endOf( 'year' ).format( 'DDD' ); daysInYear = Array.from({ length: noOfDaysInYear }, function( e, i ) { return i + 1; }); validDay = daysInYear.find(function( d ) { var day = currentYear.clone().dayOfYear( d ); return isValid( day ); }); isDisabled = ( validDay === undefined ); if ( isDisabled ) classes += ' rdtDisabled'; if ( selectedDate && selectedDate.year() === year ) classes += ' rdtActive'; props = { key: year, 'data-value': year, className: classes }; if ( !isDisabled ) props.onClick = ( this.props.updateOn === 'years' ? this.updateSelectedYear : this.props.setDate('year') ); years.push( renderer( props, year, selectedDate && selectedDate.clone() )); if ( years.length === 4 ) { rows.push( DOM.tr({ key: i }, years ) ); years = []; } year++; i++; } return rows; }, updateSelectedYear: function( event ) { this.props.updateSelectedDate( event ); }, renderYear: function( props, year ) { return DOM.td( props, year ); }, alwaysValidDate: function() { return 1; }, handleClickOutside: function() { this.props.handleClickOutside(); } })); module.exports = DateTimePickerYears; /***/ }, /* 10 */ /***/ function(module, exports, __webpack_require__) { 'use strict'; var React = __webpack_require__(3), assign = __webpack_require__(1), onClickOutside = __webpack_require__(6) ; var DOM = React.DOM; var DateTimePickerTime = onClickOutside( React.createClass({ getInitialState: function() { return this.calculateState( this.props ); }, calculateState: function( props ) { var date = props.selectedDate || props.viewDate, format = props.timeFormat, counters = [] ; if ( format.toLowerCase().indexOf('h') !== -1 ) { counters.push('hours'); if ( format.indexOf('m') !== -1 ) { counters.push('minutes'); if ( format.indexOf('s') !== -1 ) { counters.push('seconds'); } } } var daypart = false; if ( this.state !== null && this.props.timeFormat.toLowerCase().indexOf( ' a' ) !== -1 ) { if ( this.props.timeFormat.indexOf( ' A' ) !== -1 ) { daypart = ( this.state.hours >= 12 ) ? 'PM' : 'AM'; } else { daypart = ( this.state.hours >= 12 ) ? 'pm' : 'am'; } } return { hours: date.format( 'H' ), minutes: date.format( 'mm' ), seconds: date.format( 'ss' ), milliseconds: date.format( 'SSS' ), daypart: daypart, counters: counters }; }, renderCounter: function( type ) { if ( type !== 'daypart' ) { var value = this.state[ type ]; if ( type === 'hours' && this.props.timeFormat.toLowerCase().indexOf( ' a' ) !== -1 ) { value = ( value - 1 ) % 12 + 1; if ( value === 0 ) { value = 12; } } return DOM.div({ key: type, className: 'rdtCounter' }, [ DOM.span({ key: 'up', className: 'rdtBtn', onMouseDown: this.onStartClicking( 'increase', type ) }, '▲' ), DOM.div({ key: 'c', className: 'rdtCount' }, value ), DOM.span({ key: 'do', className: 'rdtBtn', onMouseDown: this.onStartClicking( 'decrease', type ) }, '▼' ) ]); } return ''; }, renderDayPart: function() { return DOM.div({ key: 'dayPart', className: 'rdtCounter' }, [ DOM.span({ key: 'up', className: 'rdtBtn', onMouseDown: this.onStartClicking( 'toggleDayPart', 'hours') }, '▲' ), DOM.div({ key: this.state.daypart, className: 'rdtCount' }, this.state.daypart ), DOM.span({ key: 'do', className: 'rdtBtn', onMouseDown: this.onStartClicking( 'toggleDayPart', 'hours') }, '▼' ) ]); }, render: function() { var me = this, counters = [] ; this.state.counters.forEach( function( c ) { if ( counters.length ) counters.push( DOM.div({ key: 'sep' + counters.length, className: 'rdtCounterSeparator' }, ':' ) ); counters.push( me.renderCounter( c ) ); }); if ( this.state.daypart !== false ) { counters.push( me.renderDayPart() ); } if ( this.state.counters.length === 3 && this.props.timeFormat.indexOf( 'S' ) !== -1 ) { counters.push( DOM.div({ className: 'rdtCounterSeparator', key: 'sep5' }, ':' ) ); counters.push( DOM.div({ className: 'rdtCounter rdtMilli', key: 'm' }, DOM.input({ value: this.state.milliseconds, type: 'text', onChange: this.updateMilli } ) ) ); } return DOM.div({ className: 'rdtTime' }, DOM.table({}, [ this.renderHeader(), DOM.tbody({ key: 'b'}, DOM.tr({}, DOM.td({}, DOM.div({ className: 'rdtCounters' }, counters ) ))) ]) ); }, componentWillMount: function() { var me = this; me.timeConstraints = { hours: { min: 0, max: 23, step: 1 }, minutes: { min: 0, max: 59, step: 1 }, seconds: { min: 0, max: 59, step: 1 }, milliseconds: { min: 0, max: 999, step: 1 } }; ['hours', 'minutes', 'seconds', 'milliseconds'].forEach( function( type ) { assign(me.timeConstraints[ type ], me.props.timeConstraints[ type ]); }); this.setState( this.calculateState( this.props ) ); }, componentWillReceiveProps: function( nextProps ) { this.setState( this.calculateState( nextProps ) ); }, updateMilli: function( e ) { var milli = parseInt( e.target.value, 10 ); if ( milli === e.target.value && milli >= 0 && milli < 1000 ) { this.props.setTime( 'milliseconds', milli ); this.setState( { milliseconds: milli } ); } }, renderHeader: function() { if ( !this.props.dateFormat ) return null; var date = this.props.selectedDate || this.props.viewDate; return DOM.thead({ key: 'h' }, DOM.tr({}, DOM.th({ className: 'rdtSwitch', colSpan: 4, onClick: this.props.showView( 'days' ) }, date.format( this.props.dateFormat ) ) )); }, onStartClicking: function( action, type ) { var me = this; return function() { var update = {}; update[ type ] = me[ action ]( type ); me.setState( update ); me.timer = setTimeout( function() { me.increaseTimer = setInterval( function() { update[ type ] = me[ action ]( type ); me.setState( update ); }, 70); }, 500); me.mouseUpListener = function() { clearTimeout( me.timer ); clearInterval( me.increaseTimer ); me.props.setTime( type, me.state[ type ] ); document.body.removeEventListener( 'mouseup', me.mouseUpListener ); }; document.body.addEventListener( 'mouseup', me.mouseUpListener ); }; }, padValues: { hours: 1, minutes: 2, seconds: 2, milliseconds: 3 }, toggleDayPart: function( type ) { // type is always 'hours' var value = parseInt( this.state[ type ], 10) + 12; if ( value > this.timeConstraints[ type ].max ) value = this.timeConstraints[ type ].min + ( value - ( this.timeConstraints[ type ].max + 1 ) ); return this.pad( type, value ); }, increase: function( type ) { var value = parseInt( this.state[ type ], 10) + this.timeConstraints[ type ].step; if ( value > this.timeConstraints[ type ].max ) value = this.timeConstraints[ type ].min + ( value - ( this.timeConstraints[ type ].max + 1 ) ); return this.pad( type, value ); }, decrease: function( type ) { var value = parseInt( this.state[ type ], 10) - this.timeConstraints[ type ].step; if ( value < this.timeConstraints[ type ].min ) value = this.timeConstraints[ type ].max + 1 - ( this.timeConstraints[ type ].min - value ); return this.pad( type, value ); }, pad: function( type, value ) { var str = value + ''; while ( str.length < this.padValues[ type ] ) str = '0' + str; return str; }, handleClickOutside: function() { this.props.handleClickOutside(); } })); module.exports = DateTimePickerTime; /***/ } /******/ ]) }); ;