react-datetime
Advanced tools
Comparing version 2.8.6 to 2.8.7
Changelog | ||
========= | ||
## 2.8.7 | ||
* Update react-onclickoutside dependency. That should fix most of the problems about closeOnSelect. | ||
## 2.8.6 | ||
@@ -4,0 +7,0 @@ * Revert commits related to `closeOnSelect` that did not fix all issues they were meant to |
@@ -6,6 +6,3 @@ 'use strict'; | ||
React = require('react'), | ||
DaysView = require('./src/DaysView'), | ||
MonthsView = require('./src/MonthsView'), | ||
YearsView = require('./src/YearsView'), | ||
TimeView = require('./src/TimeView') | ||
CalendarContainer = require('./src/CalendarContainer') | ||
; | ||
@@ -15,11 +12,2 @@ | ||
var Datetime = React.createClass({ | ||
mixins: [ | ||
require('./src/onClickOutside') | ||
], | ||
viewComponents: { | ||
days: DaysView, | ||
months: MonthsView, | ||
years: YearsView, | ||
time: TimeView | ||
}, | ||
propTypes: { | ||
@@ -339,2 +327,7 @@ // value: TYPES.object | TYPES.string, | ||
if ( !this.props.value ) { | ||
var open = !( this.props.closeOnSelect && close ); | ||
if ( !open ) { | ||
this.props.onBlur( date ); | ||
} | ||
this.setState({ | ||
@@ -344,6 +337,6 @@ selectedDate: date, | ||
inputValue: date.format( this.state.inputFormat ), | ||
open: !(this.props.closeOnSelect && close ) | ||
open: open | ||
}); | ||
} else { | ||
if (this.props.closeOnSelect && close) { | ||
if ( this.props.closeOnSelect && close ) { | ||
this.closeCalendar(); | ||
@@ -413,4 +406,3 @@ } | ||
render: function() { | ||
var Component = this.viewComponents[ this.state.currentView ], | ||
DOM = React.DOM, | ||
var DOM = React.DOM, | ||
className = 'rdt' + (this.props.className ? | ||
@@ -442,3 +434,3 @@ ( Array.isArray( this.props.className ) ? | ||
{ key: 'dt', className: 'rdtPicker' }, | ||
React.createElement( Component, this.getComponentProps()) | ||
React.createElement( CalendarContainer, {view: this.state.currentView, viewProps: this.getComponentProps(), onClickOutside: this.handleClickOutside }) | ||
) | ||
@@ -445,0 +437,0 @@ )); |
/* | ||
react-datetime v2.8.6 | ||
react-datetime v2.8.7 | ||
https://github.com/YouCanBookMe/react-datetime | ||
@@ -15,3 +15,3 @@ MIT: https://github.com/YouCanBookMe/react-datetime/raw/master/LICENSE | ||
root["Datetime"] = factory(root["moment"], root["React"], root["ReactDOM"]); | ||
})(this, function(__WEBPACK_EXTERNAL_MODULE_2__, __WEBPACK_EXTERNAL_MODULE_3__, __WEBPACK_EXTERNAL_MODULE_9__) { | ||
})(this, function(__WEBPACK_EXTERNAL_MODULE_2__, __WEBPACK_EXTERNAL_MODULE_3__, __WEBPACK_EXTERNAL_MODULE_10__) { | ||
return /******/ (function(modules) { // webpackBootstrap | ||
@@ -68,6 +68,3 @@ /******/ // The module cache | ||
React = __webpack_require__(3), | ||
DaysView = __webpack_require__(4), | ||
MonthsView = __webpack_require__(5), | ||
YearsView = __webpack_require__(6), | ||
TimeView = __webpack_require__(7) | ||
CalendarContainer = __webpack_require__(4) | ||
; | ||
@@ -77,11 +74,2 @@ | ||
var Datetime = React.createClass({ | ||
mixins: [ | ||
__webpack_require__(8) | ||
], | ||
viewComponents: { | ||
days: DaysView, | ||
months: MonthsView, | ||
years: YearsView, | ||
time: TimeView | ||
}, | ||
propTypes: { | ||
@@ -231,4 +219,3 @@ // value: TYPES.object | TYPES.string, | ||
updatedState.open = false; | ||
} | ||
else { | ||
} else { | ||
updatedState.open = this.state.open; | ||
@@ -403,2 +390,7 @@ } | ||
if ( !this.props.value ) { | ||
var open = !( this.props.closeOnSelect && close ); | ||
if ( !open ) { | ||
this.props.onBlur( date ); | ||
} | ||
this.setState({ | ||
@@ -408,6 +400,6 @@ selectedDate: date, | ||
inputValue: date.format( this.state.inputFormat ), | ||
open: !(this.props.closeOnSelect && close ) | ||
open: open | ||
}); | ||
} else { | ||
if (this.props.closeOnSelect && close) { | ||
if ( this.props.closeOnSelect && close ) { | ||
this.closeCalendar(); | ||
@@ -477,4 +469,3 @@ } | ||
render: function() { | ||
var Component = this.viewComponents[ this.state.currentView ], | ||
DOM = React.DOM, | ||
var DOM = React.DOM, | ||
className = 'rdt' + (this.props.className ? | ||
@@ -506,3 +497,3 @@ ( Array.isArray( this.props.className ) ? | ||
{ key: 'dt', className: 'rdtPicker' }, | ||
React.createElement( Component, this.getComponentProps()) | ||
React.createElement( CalendarContainer, {view: this.state.currentView, viewProps: this.getComponentProps(), onClickOutside: this.handleClickOutside }) | ||
) | ||
@@ -580,2 +571,34 @@ )); | ||
var React = __webpack_require__(3), | ||
DaysView = __webpack_require__(5), | ||
MonthsView = __webpack_require__(6), | ||
YearsView = __webpack_require__(7), | ||
TimeView = __webpack_require__(8), | ||
onClickOutside = __webpack_require__(9) | ||
; | ||
var CalendarContainer = onClickOutside( React.createClass({ | ||
viewComponents: { | ||
days: DaysView, | ||
months: MonthsView, | ||
years: YearsView, | ||
time: TimeView | ||
}, | ||
render: function() { | ||
return React.createElement( this.viewComponents[ this.props.view ], this.props.viewProps ); | ||
}, | ||
handleClickOutside: function() { | ||
this.props.onClickOutside(); | ||
} | ||
})); | ||
module.exports = CalendarContainer; | ||
/***/ }, | ||
/* 5 */ | ||
/***/ function(module, exports, __webpack_require__) { | ||
'use strict'; | ||
@@ -664,3 +687,3 @@ | ||
if (prevMonth.isSame( moment(), 'day' ) ) | ||
if ( prevMonth.isSame( moment(), 'day' ) ) | ||
classes += ' rdtToday'; | ||
@@ -724,3 +747,3 @@ | ||
/***/ }, | ||
/* 5 */ | ||
/* 6 */ | ||
/***/ function(module, exports, __webpack_require__) { | ||
@@ -832,3 +855,3 @@ | ||
/***/ }, | ||
/* 6 */ | ||
/* 7 */ | ||
/***/ function(module, exports, __webpack_require__) { | ||
@@ -938,3 +961,3 @@ | ||
/***/ }, | ||
/* 7 */ | ||
/* 8 */ | ||
/***/ function(module, exports, __webpack_require__) { | ||
@@ -1168,115 +1191,313 @@ | ||
/***/ }, | ||
/* 8 */ | ||
/* 9 */ | ||
/***/ function(module, exports, __webpack_require__) { | ||
'use strict'; | ||
var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/** | ||
* A higher-order-component for handling onClickOutside for React components. | ||
*/ | ||
(function(root) { | ||
// This is extracted from https://github.com/Pomax/react-onclickoutside | ||
// And modified to support react 0.13 and react 0.14 | ||
// administrative | ||
var registeredComponents = []; | ||
var handlers = []; | ||
var IGNORE_CLASS = 'ignore-react-onclickoutside'; | ||
var DEFAULT_EVENTS = ['mousedown', 'touchstart']; | ||
var React = __webpack_require__(3), | ||
version = React.version && React.version.split('.') | ||
; | ||
/** | ||
* Check whether some DOM node is our Component's node. | ||
*/ | ||
var isNodeFound = function(current, componentNode, ignoreClass) { | ||
if (current === componentNode) { | ||
return true; | ||
} | ||
// SVG <use/> 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); | ||
}; | ||
if ( version && ( version[0] > 0 || version[1] > 13 ) ) | ||
React = __webpack_require__(9); | ||
/** | ||
* 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; | ||
} | ||
// Use a parallel array because we can't use | ||
// objects as keys, they get toString-coerced | ||
var registeredComponents = []; | ||
var handlers = []; | ||
// 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; | ||
}; | ||
var IGNORE_CLASS = 'ignore-react-onclickoutside'; | ||
/** | ||
* Check if the browser scrollbar was clicked | ||
*/ | ||
var clickedScrollbar = function(evt) { | ||
return document.documentElement.clientWidth <= evt.clientX; | ||
}; | ||
var isSourceFound = function(source, localNode) { | ||
if (source === localNode) { | ||
return true; | ||
} | ||
// SVG <use/> 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 (source.correspondingElement) { | ||
return source.correspondingElement.classList.contains(IGNORE_CLASS); | ||
} | ||
return source.classList.contains(IGNORE_CLASS); | ||
}; | ||
/** | ||
* 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); | ||
}; | ||
}; | ||
module.exports = { | ||
componentDidMount: function() { | ||
if (typeof this.handleClickOutside !== 'function') | ||
throw new Error('Component lacks a handleClickOutside(event) function for processing outside click events.'); | ||
/** | ||
* 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) { | ||
var fn = this.__outsideClickHandler = (function(localNode, eventHandler) { | ||
return function(evt) { | ||
evt.stopPropagation(); | ||
var source = evt.target; | ||
var found = false; | ||
// 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 (source.parentNode) { | ||
found = isSourceFound(source, localNode); | ||
if (found) return; | ||
source = source.parentNode; | ||
} | ||
eventHandler(evt); | ||
}; | ||
}(React.findDOMNode(this), this.handleClickOutside)); | ||
// 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; | ||
} | ||
}, | ||
var pos = registeredComponents.length; | ||
registeredComponents.push(this); | ||
handlers[pos] = fn; | ||
/** | ||
* Access the wrapped Component's instance. | ||
*/ | ||
getInstance: function() { | ||
return Component.prototype.isReactComponent ? this.refs.instance : this; | ||
}, | ||
// If there is a truthy disableOnClickOutside property for this | ||
// component, don't immediately start listening for outside events. | ||
if (!this.props.disableOnClickOutside) { | ||
this.enableOnClickOutside(); | ||
} | ||
}, | ||
// this is given meaning in componentDidMount | ||
__outsideClickHandler: function() {}, | ||
componentWillUnmount: function() { | ||
this.disableOnClickOutside(); | ||
this.__outsideClickHandler = false; | ||
var pos = registeredComponents.indexOf(this); | ||
if ( pos>-1) { | ||
if (handlers[pos]) { | ||
// clean up so we don't leak memory | ||
handlers.splice(pos, 1); | ||
registeredComponents.splice(pos, 1); | ||
} | ||
} | ||
}, | ||
/** | ||
* 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; | ||
} | ||
/** | ||
* Can be called to explicitly enable event listening | ||
* for clicks and touches outside of this element. | ||
*/ | ||
enableOnClickOutside: function() { | ||
var fn = this.__outsideClickHandler; | ||
document.addEventListener('mousedown', fn); | ||
document.addEventListener('touchstart', fn); | ||
}, | ||
var instance = this.getInstance(); | ||
var clickOutsideHandler; | ||
/** | ||
* Can be called to explicitly disable event listening | ||
* for clicks and touches outside of this element. | ||
*/ | ||
disableOnClickOutside: function() { | ||
var fn = this.__outsideClickHandler; | ||
document.removeEventListener('mousedown', fn); | ||
document.removeEventListener('touchstart', fn); | ||
} | ||
}; | ||
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(){<A check=... />}\n\nmake sure that you', | ||
'use:\n\n A{render(){return <.../>}\n B{render(){return <...>{ check ? <A/> : 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__(10)], __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)); | ||
/***/ }, | ||
/* 9 */ | ||
/* 10 */ | ||
/***/ function(module, exports) { | ||
module.exports = __WEBPACK_EXTERNAL_MODULE_9__; | ||
module.exports = __WEBPACK_EXTERNAL_MODULE_10__; | ||
@@ -1283,0 +1504,0 @@ /***/ } |
/* | ||
react-datetime v2.8.6 | ||
react-datetime v2.8.7 | ||
https://github.com/YouCanBookMe/react-datetime | ||
MIT: https://github.com/YouCanBookMe/react-datetime/raw/master/LICENSE | ||
*/ | ||
!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("moment"),require("React"),require("ReactDOM")):"function"==typeof define&&define.amd?define(["moment","React","ReactDOM"],e):"object"==typeof exports?exports.Datetime=e(require("moment"),require("React"),require("ReactDOM")):t.Datetime=e(t.moment,t.React,t.ReactDOM)}(this,function(t,e,s){return function(t){function e(a){if(s[a])return s[a].exports;var n=s[a]={exports:{},id:a,loaded:!1};return t[a].call(n.exports,n,n.exports,e),n.loaded=!0,n.exports}var s={};return e.m=t,e.c=s,e.p="",e(0)}([function(t,e,s){"use strict";var a=s(1),n=s(2),r=s(3),i=s(4),o=s(5),c=s(6),l=s(7),u=r.PropTypes,d=r.createClass({mixins:[s(8)],viewComponents:{days:i,months:o,years:c,time:l},propTypes:{onFocus:u.func,onBlur:u.func,onChange:u.func,locale:u.string,utc:u.bool,input:u.bool,inputProps:u.object,timeConstraints:u.object,viewMode:u.oneOf(["years","months","days","time"]),isValidDate:u.func,open:u.bool,strictParsing:u.bool,closeOnSelect:u.bool,closeOnTab:u.bool},getDefaultProps:function(){var t=function(){};return{className:"",defaultValue:"",inputProps:{},input:!0,onFocus:t,onBlur:t,onChange:t,timeFormat:!0,timeConstraints:{},dateFormat:!0,strictParsing:!0,closeOnSelect:!1,closeOnTab:!0,utc:!1}},getInitialState:function(){var t=this.getStateFromProps(this.props);return void 0===t.open&&(t.open=!this.props.input),t.currentView=this.props.dateFormat?this.props.viewMode||t.updateOn||"days":"time",t},getStateFromProps:function(t){var e,s,a,n,r=this.getFormats(t),i=t.value||t.defaultValue;return i&&"string"==typeof i?e=this.localMoment(i,r.datetime):i&&(e=this.localMoment(i)),e&&!e.isValid()&&(e=null),s=e?e.clone().startOf("month"):this.localMoment().startOf("month"),a=this.getUpdateOn(r),n=e?e.format(r.datetime):i.isValid&&!i.isValid()?"":i||"",{updateOn:a,inputFormat:r.datetime,viewDate:s,selectedDate:e,inputValue:n,open:t.open}},getUpdateOn:function(t){return t.date.match(/[lLD]/)?"days":t.date.indexOf("M")!==-1?"months":t.date.indexOf("Y")!==-1?"years":"days"},getFormats:function(t){var e={date:t.dateFormat||"",time:t.timeFormat||""},s=this.localMoment(t.date,null,t).localeData();return e.date===!0?e.date=s.longDateFormat("L"):"days"!==this.getUpdateOn(e)&&(e.time=""),e.time===!0&&(e.time=s.longDateFormat("LT")),e.datetime=e.date&&e.time?e.date+" "+e.time:e.date||e.time,e},componentWillReceiveProps:function(t){var e=this.getFormats(t),s={};if(t.value===this.props.value&&e.datetime===this.getFormats(this.props).datetime||(s=this.getStateFromProps(t)),void 0===s.open&&(this.props.closeOnSelect&&"time"!==this.state.currentView?s.open=!1:s.open=this.state.open),t.viewMode!==this.props.viewMode&&(s.currentView=t.viewMode),t.locale!==this.props.locale){if(this.state.viewDate){var a=this.state.viewDate.clone().locale(t.locale);s.viewDate=a}if(this.state.selectedDate){var n=this.state.selectedDate.clone().locale(t.locale);s.selectedDate=n,s.inputValue=n.format(e.datetime)}}t.utc!==this.props.utc&&(t.utc?(this.state.viewDate&&(s.viewDate=this.state.viewDate.clone().utc()),this.state.selectedDate&&(s.selectedDate=this.state.selectedDate.clone().utc(),s.inputValue=s.selectedDate.format(e.datetime))):(this.state.viewDate&&(s.viewDate=this.state.viewDate.clone().local()),this.state.selectedDate&&(s.selectedDate=this.state.selectedDate.clone().local(),s.inputValue=s.selectedDate.format(e.datetime)))),this.setState(s)},onInputChange:function(t){var e=null===t.target?t:t.target.value,s=this.localMoment(e,this.state.inputFormat),a={inputValue:e};return s.isValid()&&!this.props.value?(a.selectedDate=s,a.viewDate=s.clone().startOf("month")):a.selectedDate=null,this.setState(a,function(){return this.props.onChange(s.isValid()?s:this.state.inputValue)})},onInputKey:function(t){9===t.which&&this.props.closeOnTab&&this.closeCalendar()},showView:function(t){var e=this;return function(){e.setState({currentView:t})}},setDate:function(t){var e=this,s={month:"days",year:"months"};return function(a){e.setState({viewDate:e.state.viewDate.clone()[t](parseInt(a.target.getAttribute("data-value"),10)).startOf(t),currentView:s[t]})}},addTime:function(t,e,s){return this.updateTime("add",t,e,s)},subtractTime:function(t,e,s){return this.updateTime("subtract",t,e,s)},updateTime:function(t,e,s,a){var n=this;return function(){var r={},i=a?"selectedDate":"viewDate";r[i]=n.state[i].clone()[t](e,s),n.setState(r)}},allowedSetTime:["hours","minutes","seconds","milliseconds"],setTime:function(t,e){var s,a=this.allowedSetTime.indexOf(t)+1,n=this.state,r=(n.selectedDate||n.viewDate).clone();for(r[t](e);a<this.allowedSetTime.length;a++)s=this.allowedSetTime[a],r[s](r[s]());this.props.value||this.setState({selectedDate:r,inputValue:r.format(n.inputFormat)}),this.props.onChange(r)},updateSelectedDate:function(t,e){var s,a=t.target,n=0,r=this.state.viewDate,i=this.state.selectedDate||r;a.className.indexOf("rdtDay")!==-1?(a.className.indexOf("rdtNew")!==-1?n=1:a.className.indexOf("rdtOld")!==-1&&(n=-1),s=r.clone().month(r.month()+n).date(parseInt(a.getAttribute("data-value"),10))):a.className.indexOf("rdtMonth")!==-1?s=r.clone().month(parseInt(a.getAttribute("data-value"),10)).date(i.date()):a.className.indexOf("rdtYear")!==-1&&(s=r.clone().month(i.month()).date(i.date()).year(parseInt(a.getAttribute("data-value"),10))),s.hours(i.hours()).minutes(i.minutes()).seconds(i.seconds()).milliseconds(i.milliseconds()),this.props.value?this.props.closeOnSelect&&e&&this.closeCalendar():this.setState({selectedDate:s,viewDate:s.clone().startOf("month"),inputValue:s.format(this.state.inputFormat),open:!(this.props.closeOnSelect&&e)}),this.props.onChange(s)},openCalendar:function(){this.state.open||this.setState({open:!0},function(){this.props.onFocus()})},closeCalendar:function(){this.setState({open:!1},function(){this.props.onBlur(this.state.selectedDate||this.state.inputValue)})},handleClickOutside:function(){this.props.input&&this.state.open&&!this.props.open&&this.setState({open:!1},function(){this.props.onBlur(this.state.selectedDate||this.state.inputValue)})},localMoment:function(t,e,s){s=s||this.props;var a=s.utc?n.utc:n,r=a(t,e,s.strictParsing);return s.locale&&r.locale(s.locale),r},componentProps:{fromProps:["value","isValidDate","renderDay","renderMonth","renderYear","timeConstraints"],fromState:["viewDate","selectedDate","updateOn"],fromThis:["setDate","setTime","showView","addTime","subtractTime","updateSelectedDate","localMoment"]},getComponentProps:function(){var t=this,e=this.getFormats(this.props),s={dateFormat:e.date,timeFormat:e.time};return this.componentProps.fromProps.forEach(function(e){s[e]=t.props[e]}),this.componentProps.fromState.forEach(function(e){s[e]=t.state[e]}),this.componentProps.fromThis.forEach(function(e){s[e]=t[e]}),s},render:function(){var t=this.viewComponents[this.state.currentView],e=r.DOM,s="rdt"+(this.props.className?Array.isArray(this.props.className)?" "+this.props.className.join(" "):" "+this.props.className:""),n=[];return this.props.input?n=[e.input(a({key:"i",type:"text",className:"form-control",onFocus:this.openCalendar,onChange:this.onInputChange,onKeyDown:this.onInputKey,value:this.state.inputValue},this.props.inputProps))]:s+=" rdtStatic",this.state.open&&(s+=" rdtOpen"),e.div({className:s},n.concat(e.div({key:"dt",className:"rdtPicker"},r.createElement(t,this.getComponentProps()))))}});d.moment=n,t.exports=d},function(t,e){"use strict";function s(t){if(null==t)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(t)}function a(t){var e=Object.getOwnPropertyNames(t);return Object.getOwnPropertySymbols&&(e=e.concat(Object.getOwnPropertySymbols(t))),e.filter(function(e){return n.call(t,e)})}var n=Object.prototype.propertyIsEnumerable;t.exports=Object.assign||function(t,e){for(var n,r,i=s(t),o=1;o<arguments.length;o++){n=arguments[o],r=a(Object(n));for(var c=0;c<r.length;c++)i[r[c]]=n[r[c]]}return i}},function(e,s){e.exports=t},function(t,s){t.exports=e},function(t,e,s){"use strict";var a=s(3),n=s(2),r=a.DOM,i=a.createClass({render:function(){var t,e=this.renderFooter(),s=this.props.viewDate,a=s.localeData();return t=[r.thead({key:"th"},[r.tr({key:"h"},[r.th({key:"p",className:"rdtPrev"},r.span({onClick:this.props.subtractTime(1,"months")},"‹")),r.th({key:"s",className:"rdtSwitch",onClick:this.props.showView("months"),colSpan:5,"data-value":this.props.viewDate.month()},a.months(s)+" "+s.year()),r.th({key:"n",className:"rdtNext"},r.span({onClick:this.props.addTime(1,"months")},"›"))]),r.tr({key:"d"},this.getDaysOfWeek(a).map(function(t,e){return r.th({key:t+e,className:"dow"},t)}))]),r.tbody({key:"tb"},this.renderDays())],e&&t.push(e),r.div({className:"rdtDays"},r.table({},t))},getDaysOfWeek:function(t){var e=t._weekdaysMin,s=t.firstDayOfWeek(),a=[],n=0;return e.forEach(function(t){a[(7+n++-s)%7]=t}),a},renderDays:function(){var t,e,s,a,i=this.props.viewDate,o=this.props.selectedDate&&this.props.selectedDate.clone(),c=i.clone().subtract(1,"months"),l=i.year(),u=i.month(),d=[],p=[],h=this.props.renderDay||this.renderDay,m=this.props.isValidDate||this.alwaysValidDate;c.date(c.daysInMonth()).startOf("week");for(var f=c.clone().add(42,"d");c.isBefore(f);)t="rdtDay",a=c.clone(),c.year()===l&&c.month()<u||c.year()<l?t+=" rdtOld":(c.year()===l&&c.month()>u||c.year()>l)&&(t+=" rdtNew"),o&&c.isSame(o,"day")&&(t+=" rdtActive"),c.isSame(n(),"day")&&(t+=" rdtToday"),e=!m(a,o),e&&(t+=" rdtDisabled"),s={key:c.format("M_D"),"data-value":c.date(),className:t},e||(s.onClick=this.updateSelectedDate),p.push(h(s,a,o)),7===p.length&&(d.push(r.tr({key:c.format("M_D")},p)),p=[]),c.add(1,"d");return d},updateSelectedDate:function(t){this.props.updateSelectedDate(t,!0)},renderDay:function(t,e){return r.td(t,e.date())},renderFooter:function(){if(!this.props.timeFormat)return"";var t=this.props.selectedDate||this.props.viewDate;return r.tfoot({key:"tf"},r.tr({},r.td({onClick:this.props.showView("time"),colSpan:7,className:"rdtTimeToggle"},t.format(this.props.timeFormat))))},alwaysValidDate:function(){return 1}});t.exports=i},function(t,e,s){"use strict";function a(t){return t.charAt(0).toUpperCase()+t.slice(1)}var n=s(3),r=n.DOM,i=n.createClass({render:function(){return r.div({className:"rdtMonths"},[r.table({key:"a"},r.thead({},r.tr({},[r.th({key:"prev",className:"rdtPrev"},r.span({onClick:this.props.subtractTime(1,"years")},"‹")),r.th({key:"year",className:"rdtSwitch",onClick:this.props.showView("years"),colSpan:2,"data-value":this.props.viewDate.year()},this.props.viewDate.year()),r.th({key:"next",className:"rdtNext"},r.span({onClick:this.props.addTime(1,"years")},"›"))]))),r.table({key:"months"},r.tbody({key:"b"},this.renderMonths()))])},renderMonths:function(){for(var t,e,s,a,n,i,o,c=this.props.selectedDate,l=this.props.viewDate.month(),u=this.props.viewDate.year(),d=[],p=0,h=[],m=this.props.renderMonth||this.renderMonth,f=this.props.isValidDate||this.alwaysValidDate,v=1;p<12;)t="rdtMonth",s=this.props.viewDate.clone().set({year:u,month:p,date:v}),n=s.endOf("month").format("D"),i=Array.from({length:n},function(t,e){return e+1}),o=i.find(function(t){var e=s.clone().set("date",t);return f(e)}),a=void 0===o,a&&(t+=" rdtDisabled"),c&&p===l&&u===c.year()&&(t+=" rdtActive"),e={key:p,"data-value":p,className:t},a||(e.onClick="months"===this.props.updateOn?this.updateSelectedMonth:this.props.setDate("month")),h.push(m(e,p,u,c&&c.clone())),4===h.length&&(d.push(r.tr({key:l+"_"+d.length},h)),h=[]),p++;return d},updateSelectedMonth:function(t){this.props.updateSelectedDate(t,!0)},renderMonth:function(t,e){var s=this.props.viewDate,n=s.localeData().monthsShort(s.month(e)),i=3,o=n.substring(0,i);return r.td(t,a(o))},alwaysValidDate:function(){return 1}});t.exports=i},function(t,e,s){"use strict";var a=s(3),n=a.DOM,r=a.createClass({render:function(){var t=10*parseInt(this.props.viewDate.year()/10,10);return n.div({className:"rdtYears"},[n.table({key:"a"},n.thead({},n.tr({},[n.th({key:"prev",className:"rdtPrev"},n.span({onClick:this.props.subtractTime(10,"years")},"‹")),n.th({key:"year",className:"rdtSwitch",onClick:this.props.showView("years"),colSpan:2},t+"-"+(t+9)),n.th({key:"next",className:"rdtNext"},n.span({onClick:this.props.addTime(10,"years")},"›"))]))),n.table({key:"years"},n.tbody({},this.renderYears(t)))])},renderYears:function(t){var e,s,a,r,i,o,c,l=[],u=-1,d=[],p=this.props.renderYear||this.renderYear,h=this.props.selectedDate,m=this.props.isValidDate||this.alwaysValidDate,f=0,v=1;for(t--;u<11;)e="rdtYear",a=this.props.viewDate.clone().set({year:t,month:f,date:v}),i=a.endOf("year").format("DDD"),o=Array.from({length:i},function(t,e){return e+1}),c=o.find(function(t){var e=a.clone().dayOfYear(t);return m(e)}),r=void 0===c,r&&(e+=" rdtDisabled"),h&&h.year()===t&&(e+=" rdtActive"),s={key:t,"data-value":t,className:e},r||(s.onClick="years"===this.props.updateOn?this.updateSelectedYear:this.props.setDate("year")),l.push(p(s,t,h&&h.clone())),4===l.length&&(d.push(n.tr({key:u},l)),l=[]),t++,u++;return d},updateSelectedYear:function(t){this.props.updateSelectedDate(t,!0)},renderYear:function(t,e){return n.td(t,e)},alwaysValidDate:function(){return 1}});t.exports=r},function(t,e,s){"use strict";var a=s(3),n=s(1),r=a.DOM,i=a.createClass({getInitialState:function(){return this.calculateState(this.props)},calculateState:function(t){var e=t.selectedDate||t.viewDate,s=t.timeFormat,a=[];s.toLowerCase().indexOf("h")!==-1&&(a.push("hours"),s.indexOf("m")!==-1&&(a.push("minutes"),s.indexOf("s")!==-1&&a.push("seconds")));var n=!1;return null!==this.state&&this.props.timeFormat.toLowerCase().indexOf(" a")!==-1&&(n=this.props.timeFormat.indexOf(" A")!==-1?this.state.hours>=12?"PM":"AM":this.state.hours>=12?"pm":"am"),{hours:e.format("H"),minutes:e.format("mm"),seconds:e.format("ss"),milliseconds:e.format("SSS"),daypart:n,counters:a}},renderCounter:function(t){if("daypart"!==t){var e=this.state[t];return"hours"===t&&this.props.timeFormat.toLowerCase().indexOf(" a")!==-1&&(e=(e-1)%12+1,0===e&&(e=12)),r.div({key:t,className:"rdtCounter"},[r.span({key:"up",className:"rdtBtn",onMouseDown:this.onStartClicking("increase",t)},"▲"),r.div({key:"c",className:"rdtCount"},e),r.span({key:"do",className:"rdtBtn",onMouseDown:this.onStartClicking("decrease",t)},"▼")])}return""},renderDayPart:function(){return r.div({key:"dayPart",className:"rdtCounter"},[r.span({key:"up",className:"rdtBtn",onMouseDown:this.onStartClicking("toggleDayPart","hours")},"▲"),r.div({key:this.state.daypart,className:"rdtCount"},this.state.daypart),r.span({key:"do",className:"rdtBtn",onMouseDown:this.onStartClicking("toggleDayPart","hours")},"▼")])},render:function(){var t=this,e=[];return this.state.counters.forEach(function(s){e.length&&e.push(r.div({key:"sep"+e.length,className:"rdtCounterSeparator"},":")),e.push(t.renderCounter(s))}),this.state.daypart!==!1&&e.push(t.renderDayPart()),3===this.state.counters.length&&this.props.timeFormat.indexOf("S")!==-1&&(e.push(r.div({className:"rdtCounterSeparator",key:"sep5"},":")),e.push(r.div({className:"rdtCounter rdtMilli",key:"m"},r.input({value:this.state.milliseconds,type:"text",onChange:this.updateMilli})))),r.div({className:"rdtTime"},r.table({},[this.renderHeader(),r.tbody({key:"b"},r.tr({},r.td({},r.div({className:"rdtCounters"},e))))]))},componentWillMount:function(){var t=this;t.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(e){n(t.timeConstraints[e],t.props.timeConstraints[e])}),this.setState(this.calculateState(this.props))},componentWillReceiveProps:function(t){this.setState(this.calculateState(t))},updateMilli:function(t){var e=parseInt(t.target.value,10);e===t.target.value&&e>=0&&e<1e3&&(this.props.setTime("milliseconds",e),this.setState({milliseconds:e}))},renderHeader:function(){if(!this.props.dateFormat)return null;var t=this.props.selectedDate||this.props.viewDate;return r.thead({key:"h"},r.tr({},r.th({className:"rdtSwitch",colSpan:4,onClick:this.props.showView("days")},t.format(this.props.dateFormat))))},onStartClicking:function(t,e){var s=this;return function(){var a={};a[e]=s[t](e),s.setState(a),s.timer=setTimeout(function(){s.increaseTimer=setInterval(function(){a[e]=s[t](e),s.setState(a)},70)},500),s.mouseUpListener=function(){clearTimeout(s.timer),clearInterval(s.increaseTimer),s.props.setTime(e,s.state[e]),document.body.removeEventListener("mouseup",s.mouseUpListener)},document.body.addEventListener("mouseup",s.mouseUpListener)}},padValues:{hours:1,minutes:2,seconds:2,milliseconds:3},toggleDayPart:function(t){var e=parseInt(this.state[t],10)+12;return e>this.timeConstraints[t].max&&(e=this.timeConstraints[t].min+(e-(this.timeConstraints[t].max+1))),this.pad(t,e)},increase:function(t){var e=parseInt(this.state[t],10)+this.timeConstraints[t].step;return e>this.timeConstraints[t].max&&(e=this.timeConstraints[t].min+(e-(this.timeConstraints[t].max+1))),this.pad(t,e)},decrease:function(t){var e=parseInt(this.state[t],10)-this.timeConstraints[t].step;return e<this.timeConstraints[t].min&&(e=this.timeConstraints[t].max+1-(this.timeConstraints[t].min-e)),this.pad(t,e)},pad:function(t,e){for(var s=e+"";s.length<this.padValues[t];)s="0"+s;return s}});t.exports=i},function(t,e,s){"use strict";var a=s(3),n=a.version&&a.version.split(".");n&&(n[0]>0||n[1]>13)&&(a=s(9));var r=[],i=[],o="ignore-react-onclickoutside",c=function(t,e){return t===e||(t.correspondingElement?t.correspondingElement.classList.contains(o):t.classList.contains(o))};t.exports={componentDidMount:function(){if("function"!=typeof this.handleClickOutside)throw new Error("Component lacks a handleClickOutside(event) function for processing outside click events.");var t=this.__outsideClickHandler=function(t,e){return function(s){s.stopPropagation();for(var a=s.target,n=!1;a.parentNode;){if(n=c(a,t))return;a=a.parentNode}e(s)}}(a.findDOMNode(this),this.handleClickOutside),e=r.length;r.push(this),i[e]=t,this.props.disableOnClickOutside||this.enableOnClickOutside()},componentWillUnmount:function(){this.disableOnClickOutside(),this.__outsideClickHandler=!1;var t=r.indexOf(this);t>-1&&i[t]&&(i.splice(t,1),r.splice(t,1))},enableOnClickOutside:function(){var t=this.__outsideClickHandler;document.addEventListener("mousedown",t),document.addEventListener("touchstart",t)},disableOnClickOutside:function(){var t=this.__outsideClickHandler;document.removeEventListener("mousedown",t),document.removeEventListener("touchstart",t)}}},function(t,e){t.exports=s}])}); | ||
!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("moment"),require("React"),require("ReactDOM")):"function"==typeof define&&define.amd?define(["moment","React","ReactDOM"],e):"object"==typeof exports?exports.Datetime=e(require("moment"),require("React"),require("ReactDOM")):t.Datetime=e(t.moment,t.React,t.ReactDOM)}(this,function(t,e,s){return function(t){function e(n){if(s[n])return s[n].exports;var a=s[n]={exports:{},id:n,loaded:!1};return t[n].call(a.exports,a,a.exports,e),a.loaded=!0,a.exports}var s={};return e.m=t,e.c=s,e.p="",e(0)}([function(t,e,s){"use strict";var n=s(1),a=s(2),i=s(3),r=s(4),o=i.PropTypes,c=i.createClass({propTypes:{onFocus:o.func,onBlur:o.func,onChange:o.func,locale:o.string,utc:o.bool,input:o.bool,inputProps:o.object,timeConstraints:o.object,viewMode:o.oneOf(["years","months","days","time"]),isValidDate:o.func,open:o.bool,strictParsing:o.bool,closeOnSelect:o.bool,closeOnTab:o.bool},getDefaultProps:function(){var t=function(){};return{className:"",defaultValue:"",inputProps:{},input:!0,onFocus:t,onBlur:t,onChange:t,timeFormat:!0,timeConstraints:{},dateFormat:!0,strictParsing:!0,closeOnSelect:!1,closeOnTab:!0,utc:!1}},getInitialState:function(){var t=this.getStateFromProps(this.props);return void 0===t.open&&(t.open=!this.props.input),t.currentView=this.props.dateFormat?this.props.viewMode||t.updateOn||"days":"time",t},getStateFromProps:function(t){var e,s,n,a,i=this.getFormats(t),r=t.value||t.defaultValue;return r&&"string"==typeof r?e=this.localMoment(r,i.datetime):r&&(e=this.localMoment(r)),e&&!e.isValid()&&(e=null),s=e?e.clone().startOf("month"):this.localMoment().startOf("month"),n=this.getUpdateOn(i),a=e?e.format(i.datetime):r.isValid&&!r.isValid()?"":r||"",{updateOn:n,inputFormat:i.datetime,viewDate:s,selectedDate:e,inputValue:a,open:t.open}},getUpdateOn:function(t){return t.date.match(/[lLD]/)?"days":t.date.indexOf("M")!==-1?"months":t.date.indexOf("Y")!==-1?"years":"days"},getFormats:function(t){var e={date:t.dateFormat||"",time:t.timeFormat||""},s=this.localMoment(t.date,null,t).localeData();return e.date===!0?e.date=s.longDateFormat("L"):"days"!==this.getUpdateOn(e)&&(e.time=""),e.time===!0&&(e.time=s.longDateFormat("LT")),e.datetime=e.date&&e.time?e.date+" "+e.time:e.date||e.time,e},componentWillReceiveProps:function(t){var e=this.getFormats(t),s={};if(t.value===this.props.value&&e.datetime===this.getFormats(this.props).datetime||(s=this.getStateFromProps(t)),void 0===s.open&&(this.props.closeOnSelect&&"time"!==this.state.currentView?s.open=!1:s.open=this.state.open),t.viewMode!==this.props.viewMode&&(s.currentView=t.viewMode),t.locale!==this.props.locale){if(this.state.viewDate){var n=this.state.viewDate.clone().locale(t.locale);s.viewDate=n}if(this.state.selectedDate){var a=this.state.selectedDate.clone().locale(t.locale);s.selectedDate=a,s.inputValue=a.format(e.datetime)}}t.utc!==this.props.utc&&(t.utc?(this.state.viewDate&&(s.viewDate=this.state.viewDate.clone().utc()),this.state.selectedDate&&(s.selectedDate=this.state.selectedDate.clone().utc(),s.inputValue=s.selectedDate.format(e.datetime))):(this.state.viewDate&&(s.viewDate=this.state.viewDate.clone().local()),this.state.selectedDate&&(s.selectedDate=this.state.selectedDate.clone().local(),s.inputValue=s.selectedDate.format(e.datetime)))),this.setState(s)},onInputChange:function(t){var e=null===t.target?t:t.target.value,s=this.localMoment(e,this.state.inputFormat),n={inputValue:e};return s.isValid()&&!this.props.value?(n.selectedDate=s,n.viewDate=s.clone().startOf("month")):n.selectedDate=null,this.setState(n,function(){return this.props.onChange(s.isValid()?s:this.state.inputValue)})},onInputKey:function(t){9===t.which&&this.props.closeOnTab&&this.closeCalendar()},showView:function(t){var e=this;return function(){e.setState({currentView:t})}},setDate:function(t){var e=this,s={month:"days",year:"months"};return function(n){e.setState({viewDate:e.state.viewDate.clone()[t](parseInt(n.target.getAttribute("data-value"),10)).startOf(t),currentView:s[t]})}},addTime:function(t,e,s){return this.updateTime("add",t,e,s)},subtractTime:function(t,e,s){return this.updateTime("subtract",t,e,s)},updateTime:function(t,e,s,n){var a=this;return function(){var i={},r=n?"selectedDate":"viewDate";i[r]=a.state[r].clone()[t](e,s),a.setState(i)}},allowedSetTime:["hours","minutes","seconds","milliseconds"],setTime:function(t,e){var s,n=this.allowedSetTime.indexOf(t)+1,a=this.state,i=(a.selectedDate||a.viewDate).clone();for(i[t](e);n<this.allowedSetTime.length;n++)s=this.allowedSetTime[n],i[s](i[s]());this.props.value||this.setState({selectedDate:i,inputValue:i.format(a.inputFormat)}),this.props.onChange(i)},updateSelectedDate:function(t,e){var s,n=t.target,a=0,i=this.state.viewDate,r=this.state.selectedDate||i;if(n.className.indexOf("rdtDay")!==-1?(n.className.indexOf("rdtNew")!==-1?a=1:n.className.indexOf("rdtOld")!==-1&&(a=-1),s=i.clone().month(i.month()+a).date(parseInt(n.getAttribute("data-value"),10))):n.className.indexOf("rdtMonth")!==-1?s=i.clone().month(parseInt(n.getAttribute("data-value"),10)).date(r.date()):n.className.indexOf("rdtYear")!==-1&&(s=i.clone().month(r.month()).date(r.date()).year(parseInt(n.getAttribute("data-value"),10))),s.hours(r.hours()).minutes(r.minutes()).seconds(r.seconds()).milliseconds(r.milliseconds()),this.props.value)this.props.closeOnSelect&&e&&this.closeCalendar();else{var o=!(this.props.closeOnSelect&&e);o||this.props.onBlur(s),this.setState({selectedDate:s,viewDate:s.clone().startOf("month"),inputValue:s.format(this.state.inputFormat),open:o})}this.props.onChange(s)},openCalendar:function(){this.state.open||this.setState({open:!0},function(){this.props.onFocus()})},closeCalendar:function(){this.setState({open:!1},function(){this.props.onBlur(this.state.selectedDate||this.state.inputValue)})},handleClickOutside:function(){this.props.input&&this.state.open&&!this.props.open&&this.setState({open:!1},function(){this.props.onBlur(this.state.selectedDate||this.state.inputValue)})},localMoment:function(t,e,s){s=s||this.props;var n=s.utc?a.utc:a,i=n(t,e,s.strictParsing);return s.locale&&i.locale(s.locale),i},componentProps:{fromProps:["value","isValidDate","renderDay","renderMonth","renderYear","timeConstraints"],fromState:["viewDate","selectedDate","updateOn"],fromThis:["setDate","setTime","showView","addTime","subtractTime","updateSelectedDate","localMoment"]},getComponentProps:function(){var t=this,e=this.getFormats(this.props),s={dateFormat:e.date,timeFormat:e.time};return this.componentProps.fromProps.forEach(function(e){s[e]=t.props[e]}),this.componentProps.fromState.forEach(function(e){s[e]=t.state[e]}),this.componentProps.fromThis.forEach(function(e){s[e]=t[e]}),s},render:function(){var t=i.DOM,e="rdt"+(this.props.className?Array.isArray(this.props.className)?" "+this.props.className.join(" "):" "+this.props.className:""),s=[];return this.props.input?s=[t.input(n({key:"i",type:"text",className:"form-control",onFocus:this.openCalendar,onChange:this.onInputChange,onKeyDown:this.onInputKey,value:this.state.inputValue},this.props.inputProps))]:e+=" rdtStatic",this.state.open&&(e+=" rdtOpen"),t.div({className:e},s.concat(t.div({key:"dt",className:"rdtPicker"},i.createElement(r,{view:this.state.currentView,viewProps:this.getComponentProps(),onClickOutside:this.handleClickOutside}))))}});c.moment=a,t.exports=c},function(t,e){"use strict";function s(t){if(null==t)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(t)}function n(t){var e=Object.getOwnPropertyNames(t);return Object.getOwnPropertySymbols&&(e=e.concat(Object.getOwnPropertySymbols(t))),e.filter(function(e){return a.call(t,e)})}var a=Object.prototype.propertyIsEnumerable;t.exports=Object.assign||function(t,e){for(var a,i,r=s(t),o=1;o<arguments.length;o++){a=arguments[o],i=n(Object(a));for(var c=0;c<i.length;c++)r[i[c]]=a[i[c]]}return r}},function(e,s){e.exports=t},function(t,s){t.exports=e},function(t,e,s){var n=s(3),a=s(5),i=s(6),r=s(7),o=s(8),c=s(9),l=c(n.createClass({viewComponents:{days:a,months:i,years:r,time:o},render:function(){return n.createElement(this.viewComponents[this.props.view],this.props.viewProps)},handleClickOutside:function(){this.props.onClickOutside()}}));t.exports=l},function(t,e,s){"use strict";var n=s(3),a=s(2),i=n.DOM,r=n.createClass({render:function(){var t,e=this.renderFooter(),s=this.props.viewDate,n=s.localeData();return t=[i.thead({key:"th"},[i.tr({key:"h"},[i.th({key:"p",className:"rdtPrev"},i.span({onClick:this.props.subtractTime(1,"months")},"‹")),i.th({key:"s",className:"rdtSwitch",onClick:this.props.showView("months"),colSpan:5,"data-value":this.props.viewDate.month()},n.months(s)+" "+s.year()),i.th({key:"n",className:"rdtNext"},i.span({onClick:this.props.addTime(1,"months")},"›"))]),i.tr({key:"d"},this.getDaysOfWeek(n).map(function(t,e){return i.th({key:t+e,className:"dow"},t)}))]),i.tbody({key:"tb"},this.renderDays())],e&&t.push(e),i.div({className:"rdtDays"},i.table({},t))},getDaysOfWeek:function(t){var e=t._weekdaysMin,s=t.firstDayOfWeek(),n=[],a=0;return e.forEach(function(t){n[(7+a++-s)%7]=t}),n},renderDays:function(){var t,e,s,n,r=this.props.viewDate,o=this.props.selectedDate&&this.props.selectedDate.clone(),c=r.clone().subtract(1,"months"),l=r.year(),u=r.month(),d=[],p=[],h=this.props.renderDay||this.renderDay,m=this.props.isValidDate||this.alwaysValidDate;c.date(c.daysInMonth()).startOf("week");for(var f=c.clone().add(42,"d");c.isBefore(f);)t="rdtDay",n=c.clone(),c.year()===l&&c.month()<u||c.year()<l?t+=" rdtOld":(c.year()===l&&c.month()>u||c.year()>l)&&(t+=" rdtNew"),o&&c.isSame(o,"day")&&(t+=" rdtActive"),c.isSame(a(),"day")&&(t+=" rdtToday"),e=!m(n,o),e&&(t+=" rdtDisabled"),s={key:c.format("M_D"),"data-value":c.date(),className:t},e||(s.onClick=this.updateSelectedDate),p.push(h(s,n,o)),7===p.length&&(d.push(i.tr({key:c.format("M_D")},p)),p=[]),c.add(1,"d");return d},updateSelectedDate:function(t){this.props.updateSelectedDate(t,!0)},renderDay:function(t,e){return i.td(t,e.date())},renderFooter:function(){if(!this.props.timeFormat)return"";var t=this.props.selectedDate||this.props.viewDate;return i.tfoot({key:"tf"},i.tr({},i.td({onClick:this.props.showView("time"),colSpan:7,className:"rdtTimeToggle"},t.format(this.props.timeFormat))))},alwaysValidDate:function(){return 1}});t.exports=r},function(t,e,s){"use strict";function n(t){return t.charAt(0).toUpperCase()+t.slice(1)}var a=s(3),i=a.DOM,r=a.createClass({render:function(){return i.div({className:"rdtMonths"},[i.table({key:"a"},i.thead({},i.tr({},[i.th({key:"prev",className:"rdtPrev"},i.span({onClick:this.props.subtractTime(1,"years")},"‹")),i.th({key:"year",className:"rdtSwitch",onClick:this.props.showView("years"),colSpan:2,"data-value":this.props.viewDate.year()},this.props.viewDate.year()),i.th({key:"next",className:"rdtNext"},i.span({onClick:this.props.addTime(1,"years")},"›"))]))),i.table({key:"months"},i.tbody({key:"b"},this.renderMonths()))])},renderMonths:function(){for(var t,e,s,n,a,r,o,c=this.props.selectedDate,l=this.props.viewDate.month(),u=this.props.viewDate.year(),d=[],p=0,h=[],m=this.props.renderMonth||this.renderMonth,f=this.props.isValidDate||this.alwaysValidDate,v=1;p<12;)t="rdtMonth",s=this.props.viewDate.clone().set({year:u,month:p,date:v}),a=s.endOf("month").format("D"),r=Array.from({length:a},function(t,e){return e+1}),o=r.find(function(t){var e=s.clone().set("date",t);return f(e)}),n=void 0===o,n&&(t+=" rdtDisabled"),c&&p===l&&u===c.year()&&(t+=" rdtActive"),e={key:p,"data-value":p,className:t},n||(e.onClick="months"===this.props.updateOn?this.updateSelectedMonth:this.props.setDate("month")),h.push(m(e,p,u,c&&c.clone())),4===h.length&&(d.push(i.tr({key:l+"_"+d.length},h)),h=[]),p++;return d},updateSelectedMonth:function(t){this.props.updateSelectedDate(t,!0)},renderMonth:function(t,e){var s=this.props.viewDate,a=s.localeData().monthsShort(s.month(e)),r=3,o=a.substring(0,r);return i.td(t,n(o))},alwaysValidDate:function(){return 1}});t.exports=r},function(t,e,s){"use strict";var n=s(3),a=n.DOM,i=n.createClass({render:function(){var t=10*parseInt(this.props.viewDate.year()/10,10);return a.div({className:"rdtYears"},[a.table({key:"a"},a.thead({},a.tr({},[a.th({key:"prev",className:"rdtPrev"},a.span({onClick:this.props.subtractTime(10,"years")},"‹")),a.th({key:"year",className:"rdtSwitch",onClick:this.props.showView("years"),colSpan:2},t+"-"+(t+9)),a.th({key:"next",className:"rdtNext"},a.span({onClick:this.props.addTime(10,"years")},"›"))]))),a.table({key:"years"},a.tbody({},this.renderYears(t)))])},renderYears:function(t){var e,s,n,i,r,o,c,l=[],u=-1,d=[],p=this.props.renderYear||this.renderYear,h=this.props.selectedDate,m=this.props.isValidDate||this.alwaysValidDate,f=0,v=1;for(t--;u<11;)e="rdtYear",n=this.props.viewDate.clone().set({year:t,month:f,date:v}),r=n.endOf("year").format("DDD"),o=Array.from({length:r},function(t,e){return e+1}),c=o.find(function(t){var e=n.clone().dayOfYear(t);return m(e)}),i=void 0===c,i&&(e+=" rdtDisabled"),h&&h.year()===t&&(e+=" rdtActive"),s={key:t,"data-value":t,className:e},i||(s.onClick="years"===this.props.updateOn?this.updateSelectedYear:this.props.setDate("year")),l.push(p(s,t,h&&h.clone())),4===l.length&&(d.push(a.tr({key:u},l)),l=[]),t++,u++;return d},updateSelectedYear:function(t){this.props.updateSelectedDate(t,!0)},renderYear:function(t,e){return a.td(t,e)},alwaysValidDate:function(){return 1}});t.exports=i},function(t,e,s){"use strict";var n=s(3),a=s(1),i=n.DOM,r=n.createClass({getInitialState:function(){return this.calculateState(this.props)},calculateState:function(t){var e=t.selectedDate||t.viewDate,s=t.timeFormat,n=[];s.toLowerCase().indexOf("h")!==-1&&(n.push("hours"),s.indexOf("m")!==-1&&(n.push("minutes"),s.indexOf("s")!==-1&&n.push("seconds")));var a=!1;return null!==this.state&&this.props.timeFormat.toLowerCase().indexOf(" a")!==-1&&(a=this.props.timeFormat.indexOf(" A")!==-1?this.state.hours>=12?"PM":"AM":this.state.hours>=12?"pm":"am"),{hours:e.format("H"),minutes:e.format("mm"),seconds:e.format("ss"),milliseconds:e.format("SSS"),daypart:a,counters:n}},renderCounter:function(t){if("daypart"!==t){var e=this.state[t];return"hours"===t&&this.props.timeFormat.toLowerCase().indexOf(" a")!==-1&&(e=(e-1)%12+1,0===e&&(e=12)),i.div({key:t,className:"rdtCounter"},[i.span({key:"up",className:"rdtBtn",onMouseDown:this.onStartClicking("increase",t)},"▲"),i.div({key:"c",className:"rdtCount"},e),i.span({key:"do",className:"rdtBtn",onMouseDown:this.onStartClicking("decrease",t)},"▼")])}return""},renderDayPart:function(){return i.div({key:"dayPart",className:"rdtCounter"},[i.span({key:"up",className:"rdtBtn",onMouseDown:this.onStartClicking("toggleDayPart","hours")},"▲"),i.div({key:this.state.daypart,className:"rdtCount"},this.state.daypart),i.span({key:"do",className:"rdtBtn",onMouseDown:this.onStartClicking("toggleDayPart","hours")},"▼")])},render:function(){var t=this,e=[];return this.state.counters.forEach(function(s){e.length&&e.push(i.div({key:"sep"+e.length,className:"rdtCounterSeparator"},":")),e.push(t.renderCounter(s))}),this.state.daypart!==!1&&e.push(t.renderDayPart()),3===this.state.counters.length&&this.props.timeFormat.indexOf("S")!==-1&&(e.push(i.div({className:"rdtCounterSeparator",key:"sep5"},":")),e.push(i.div({className:"rdtCounter rdtMilli",key:"m"},i.input({value:this.state.milliseconds,type:"text",onChange:this.updateMilli})))),i.div({className:"rdtTime"},i.table({},[this.renderHeader(),i.tbody({key:"b"},i.tr({},i.td({},i.div({className:"rdtCounters"},e))))]))},componentWillMount:function(){var t=this;t.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(e){a(t.timeConstraints[e],t.props.timeConstraints[e])}),this.setState(this.calculateState(this.props))},componentWillReceiveProps:function(t){this.setState(this.calculateState(t))},updateMilli:function(t){var e=parseInt(t.target.value,10);e===t.target.value&&e>=0&&e<1e3&&(this.props.setTime("milliseconds",e),this.setState({milliseconds:e}))},renderHeader:function(){if(!this.props.dateFormat)return null;var t=this.props.selectedDate||this.props.viewDate;return i.thead({key:"h"},i.tr({},i.th({className:"rdtSwitch",colSpan:4,onClick:this.props.showView("days")},t.format(this.props.dateFormat))))},onStartClicking:function(t,e){var s=this;return function(){var n={};n[e]=s[t](e),s.setState(n),s.timer=setTimeout(function(){s.increaseTimer=setInterval(function(){n[e]=s[t](e),s.setState(n)},70)},500),s.mouseUpListener=function(){clearTimeout(s.timer),clearInterval(s.increaseTimer),s.props.setTime(e,s.state[e]),document.body.removeEventListener("mouseup",s.mouseUpListener)},document.body.addEventListener("mouseup",s.mouseUpListener)}},padValues:{hours:1,minutes:2,seconds:2,milliseconds:3},toggleDayPart:function(t){var e=parseInt(this.state[t],10)+12;return e>this.timeConstraints[t].max&&(e=this.timeConstraints[t].min+(e-(this.timeConstraints[t].max+1))),this.pad(t,e)},increase:function(t){var e=parseInt(this.state[t],10)+this.timeConstraints[t].step;return e>this.timeConstraints[t].max&&(e=this.timeConstraints[t].min+(e-(this.timeConstraints[t].max+1))),this.pad(t,e)},decrease:function(t){var e=parseInt(this.state[t],10)-this.timeConstraints[t].step;return e<this.timeConstraints[t].min&&(e=this.timeConstraints[t].max+1-(this.timeConstraints[t].min-e)),this.pad(t,e)},pad:function(t,e){for(var s=e+"";s.length<this.padValues[t];)s="0"+s;return s}});t.exports=r},function(t,e,s){var n,a;!function(i){function r(t,e,s){return function(t,n){var a=e.createClass({statics:{getClass:function(){return t.getClass?t.getClass():t}},getInstance:function(){return t.prototype.isReactComponent?this.refs.instance:this},__outsideClickHandler:function(){},componentDidMount:function(){if("undefined"!=typeof document&&document.createElement){var t,a=this.getInstance();if(n&&"function"==typeof n.handleClickOutside){if(t=n.handleClickOutside(a),"function"!=typeof t)throw new Error("Component lacks a function for processing outside click events specified by the handleClickOutside config option.")}else if("function"==typeof a.handleClickOutside)t=e.Component.prototype.isPrototypeOf(a)?a.handleClickOutside.bind(a):a.handleClickOutside;else{if("function"!=typeof a.props.handleClickOutside)throw new Error("Component lacks a handleClickOutside(event) function for processing outside click events.");t=a.props.handleClickOutside}var i=s.findDOMNode(a);null===i&&(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(){<A check=... />}\n\nmake sure that you","use:\n\n A{render(){return <.../>}\n B{render(){return <...>{ check ? <A/> : 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 r=this.__outsideClickHandler=f(i,a,t,this.props.outsideClickIgnoreClass||u,this.props.excludeScrollbar||!1,this.props.preventDefault||!1,this.props.stopPropagation||!1),o=c.length;c.push(this),l[o]=r,this.props.disableOnClickOutside||this.enableOnClickOutside()}},componentWillReceiveProps:function(t){this.props.disableOnClickOutside&&!t.disableOnClickOutside?this.enableOnClickOutside():!this.props.disableOnClickOutside&&t.disableOnClickOutside&&this.disableOnClickOutside()},componentWillUnmount:function(){this.disableOnClickOutside(),this.__outsideClickHandler=!1;var t=c.indexOf(this);t>-1&&(l[t]&&l.splice(t,1),c.splice(t,1))},enableOnClickOutside:function(){var t=this.__outsideClickHandler;if("undefined"!=typeof document){var e=this.props.eventTypes||d;e.forEach||(e=[e]),e.forEach(function(e){document.addEventListener(e,t)})}},disableOnClickOutside:function(){var t=this.__outsideClickHandler;if("undefined"!=typeof document){var e=this.props.eventTypes||d;e.forEach||(e=[e]),e.forEach(function(e){document.removeEventListener(e,t)})}},render:function(){var s=this.props,n={};return Object.keys(this.props).forEach(function(t){"excludeScrollbar"!==t&&(n[t]=s[t])}),t.prototype.isReactComponent&&(n.ref="instance"),n.disableOnClickOutside=this.disableOnClickOutside,n.enableOnClickOutside=this.enableOnClickOutside,e.createElement(t,n)}});return function(t,e){var s=t.displayName||t.name||"Component";e.displayName="OnClickOutside("+s+")"}(t,a),a}}function o(i,r){n=[s(3),s(10)],a=function(t,e){return r(i,t,e)}.apply(e,n),!(void 0!==a&&(t.exports=a))}var c=[],l=[],u="ignore-react-onclickoutside",d=["mousedown","touchstart"],p=function(t,e,s){return t===e||(t.correspondingElement?t.correspondingElement.classList.contains(s):t.classList.contains(s))},h=function(t,e,s){if(t===e)return!0;for(;t.parentNode;){if(p(t,e,s))return!0;t=t.parentNode}return t},m=function(t){return document.documentElement.clientWidth<=t.clientX},f=function(t,e,s,n,a,i,r){return function(e){i&&e.preventDefault(),r&&e.stopPropagation();var o=e.target;a&&m(e)||h(o,t,n)!==document||s(e)}};o(i,r)}(this)},function(t,e){t.exports=s}])}); | ||
//# sourceMappingURL=react-datetime.min.js.map |
{ | ||
"name": "react-datetime", | ||
"version": "2.8.6", | ||
"version": "2.8.7", | ||
"description": "A lightweight but complete datetime picker React.js component.", | ||
@@ -24,3 +24,3 @@ "homepage": "https://github.com/YouCanBookMe/react-datetime", | ||
"dev": "./node_modules/.bin/webpack-dev-server --config example/webpack.config.js --devtool eval --progress --colors --hot --content-base example", | ||
"lint": "./node_modules/.bin/eslint src/ DateTime.js", | ||
"lint": "./node_modules/.bin/eslint src/ DateTime.js tests/", | ||
"test": "./node_modules/.bin/jest", | ||
@@ -81,3 +81,3 @@ "test:all": "npm run test:typings && npm run test", | ||
"object-assign": "^3.0.0", | ||
"react-onclickoutside": "^4.1.0" | ||
"react-onclickoutside": "^5.9.0" | ||
}, | ||
@@ -84,0 +84,0 @@ "pre-commit": [ |
@@ -40,4 +40,4 @@ # react-datetime | ||
| **defaultValue** | `Date` | `new Date()` | Represents the selected date for the component to use it as a [uncontrolled component](https://facebook.github.io/react/docs/forms.html#uncontrolled-components). This prop is parsed by Moment.js, so it is possible to use a date `string` or a `moment` object. | | ||
| **dateFormat** | `boolean` or `string` | `true` | Defines the format for the date. It accepts any [Moment.js date format](http://momentjs.com/docs/#/displaying/format/) (not in localized format). If `true` the date will be displayed using the defaults for the current locale. If `false` the datepicker is disabled and the component can be used as timepicker. | | ||
| **timeFormat** | `boolean` or `string` | `true` | Defines the format for the time. It accepts any [Moment.js time format](http://momentjs.com/docs/#/displaying/format/) (not in localized format). If `true` the time will be displayed using the defaults for the current locale. If `false` the timepicker is disabled and the component can be used as datepicker. | | ||
| **dateFormat** | `boolean` or `string` | `true` | Defines the format for the date. It accepts any [Moment.js date format](http://momentjs.com/docs/#/displaying/format/) (not in localized format). If `true` the date will be displayed using the defaults for the current locale. If `false` the datepicker is disabled and the component can be used as timepicker, see [available units docs](#specify-available-units). | | ||
| **timeFormat** | `boolean` or `string` | `true` | Defines the format for the time. It accepts any [Moment.js time format](http://momentjs.com/docs/#/displaying/format/) (not in localized format). If `true` the time will be displayed using the defaults for the current locale. If `false` the timepicker is disabled and the component can be used as datepicker, see [available units docs](#specify-available-units). | | ||
| **input** | `boolean` | `true` | Whether to show an input field to edit the date manually. | | ||
@@ -54,5 +54,5 @@ | **open** | `boolean` | `null` | Whether to open or close the picker. If not set react-datetime will open the datepicker on input focus and close it on click outside. | | ||
| **isValidDate** | `function` | `() => true` | Define the dates that can be selected. The function receives `(currentDate, selectedDate)` and shall return a `true` or `false` whether the `currentDate` is valid or not. See [selectable dates](#selectable-dates).| | ||
| **renderDay** | `function` | `DOM.td(day)` | Customize the way that the days are shown in the daypicker. The accepted function has the `selectedDate`, the current date and the default calculated `props` for the cell, and must return a React component. See [appearance customization](#appearance-customization). | | ||
| **renderMonth** | `function` | `DOM.td(month)` | Customize the way that the months are shown in the monthpicker. The accepted function has the `selectedDate`, the current date and the default calculated `props` for the cell, the `month` and the `year` to be shown, and must return a React component. See [appearance customization](#appearance-customization). | | ||
| **renderYear** | `function` | `DOM.td(year)` | Customize the way that the years are shown in the year picker. The accepted function has the `selectedDate`, the current date and the default calculated `props` for the cell, the `year` to be shown, and must return a React component. See [appearance customization](#appearance-customization). | | ||
| **renderDay** | `function` | `DOM.td(day)` | Customize the way that the days are shown in the daypicker. The accepted function has the `selectedDate`, the current date and the default calculated `props` for the cell, and must return a React component. See [appearance customization](#customize-the-appearance). | | ||
| **renderMonth** | `function` | `DOM.td(month)` | Customize the way that the months are shown in the monthpicker. The accepted function has the `selectedDate`, the current date and the default calculated `props` for the cell, the `month` and the `year` to be shown, and must return a React component. See [appearance customization](#customize-the-appearance). | | ||
| **renderYear** | `function` | `DOM.td(year)` | Customize the way that the years are shown in the year picker. The accepted function has the `selectedDate`, the current date and the default calculated `props` for the cell, the `year` to be shown, and must return a React component. See [appearance customization](#customize-the-appearance). | | ||
| **strictParsing** | `boolean` | `false` | Whether to use Moment.js's [strict parsing](http://momentjs.com/docs/#/parsing/string-format/) when parsing input. | ||
@@ -95,3 +95,3 @@ | **closeOnSelect** | `boolean` | `false` | When `true`, once the day has been selected, the datepicker will be automatically closed. | ||
}, | ||
renderMonth: function( props, month, year, selectedDate){ | ||
renderMonth: function( props, month, year, selectedDate ){ | ||
return <td {...props}>{ month }</td>; | ||
@@ -111,2 +111,17 @@ }, | ||
## Specify Available Units | ||
You can filter out what you want the user to be able to pick by using `dateFormat` and `timeFormat`, e.g. to create a timepicker, yearpicker etc. | ||
In this example the component is being used as a *timepicker* and can *only be used for selecting a time*. | ||
```js | ||
<Datetime dateFormat={false} /> | ||
``` | ||
[Working example of a timepicker here.](http://codepen.io/simeg/pen/mRQBrp) | ||
In this example you can *only select a year and month*. | ||
```js | ||
<Datetime dateFormat="YYYY-MM" timeFormat={false} /> | ||
``` | ||
[Working example of only selecting year and month here.](http://codepen.io/simeg/pen/apQLdd) | ||
## Selectable Dates | ||
@@ -119,3 +134,3 @@ It is possible to disable dates in the calendar if the user are not allowed to select them, e.g. dates in the past. This is done using the prop `isValidDate`, which admits a function in the form `function(currentDate, selectedDate)` where both arguments are [moment objects](http://momentjs.com). The function shall return `true` for selectable dates, and `false` for disabled ones. | ||
// Let's use the static moment reference in the Datetime component | ||
var yesterday = Datetime.moment().subtract(1, 'day'); | ||
var yesterday = Datetime.moment().subtract( 1, 'day' ); | ||
var valid = function( current ){ | ||
@@ -122,0 +137,0 @@ return current.isAfter( yesterday ); |
@@ -84,3 +84,3 @@ 'use strict'; | ||
if (prevMonth.isSame( moment(), 'day' ) ) | ||
if ( prevMonth.isSame( moment(), 'day' ) ) | ||
classes += ' rdtToday'; | ||
@@ -87,0 +87,0 @@ |
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
253976
2683
178
+ Addedcreate-react-class@15.7.0(transitive)
+ Addedjs-tokens@4.0.0(transitive)
+ Addedloose-envify@1.4.0(transitive)
+ Addedreact-onclickoutside@5.11.1(transitive)
- Removedreact-onclickoutside@4.9.0(transitive)
Updatedreact-onclickoutside@^5.9.0