react-date-picker
Advanced tools
react-date-picker - npm Package Compare versions
Comparing version 1.4.5 to 2.0.0
@@ -13,3 +13,4 @@ module.exports = { | ||
| externals: { | ||
| 'react': 'React' | ||
| 'react': 'React', | ||
| 'moment': 'moment' | ||
| }, | ||
@@ -16,0 +17,0 @@ resolve: { |
@@ -61,14 +61,17 @@ (function webpackUniversalModuleDefinition(root, factory) { | ||
| var moment = __webpack_require__(2) | ||
| var copyUtils = __webpack_require__(8) | ||
| var moment = __webpack_require__(2) | ||
| var asConfig = __webpack_require__(8) | ||
| var assign = __webpack_require__(10) | ||
| var copy = copyUtils.copy | ||
| var copyList = copyUtils.copyList | ||
| var asConfig = __webpack_require__(6) | ||
| var MonthView = __webpack_require__(3) | ||
| var YearView = __webpack_require__(4) | ||
| var DecadeView = __webpack_require__(5) | ||
| var Header = __webpack_require__(6) | ||
| var toMoment = __webpack_require__(7) | ||
| var hasOwn = function(obj, key){ | ||
| return Object.prototype.hasOwnProperty.call(obj, key) | ||
| } | ||
| // if (React.createFactory){ | ||
@@ -86,3 +89,3 @@ // MonthView = React.createFactory(MonthView) | ||
| var getWeekDayNames = __webpack_require__(7) | ||
| var getWeekDayNames = __webpack_require__(9) | ||
@@ -106,17 +109,31 @@ function emptyFn(){} | ||
| getInitialState: function() { | ||
| return { | ||
| } | ||
| getViewOrder: function() { | ||
| return ['month', 'year', 'decade'] | ||
| }, | ||
| getDefaultProps: function() { | ||
| return asConfig() | ||
| var props = assign({}, asConfig(), { | ||
| navOnDateClick: true, | ||
| defaultStyle: { | ||
| boxSizing: 'border-box' | ||
| } | ||
| }) | ||
| delete props.viewDate | ||
| delete props.date | ||
| return props | ||
| }, | ||
| getViewName: function() { | ||
| return this.state.view || this.props.view || 'month' | ||
| getInitialState: function() { | ||
| return { | ||
| view: this.props.defaultView, | ||
| viewDate: this.props.defaultViewDate | ||
| } | ||
| }, | ||
| getViewOrder: function() { | ||
| return ['month', 'year', 'decade'] | ||
| getViewName: function() { | ||
| return this.props.view != null? | ||
| this.props.view: | ||
| this.state.view || 'month' | ||
| }, | ||
@@ -159,3 +176,9 @@ | ||
| getViewDate: function() { | ||
| return this.state.viewMoment || this.viewMoment || this.props.viewDate || this.props.date || this.now | ||
| var date = hasOwn(this.props, 'viewDate')? | ||
| this.props.viewDate: | ||
| this.state.viewDate | ||
| date = this.toMoment(date || this.viewMoment || this.props.date || new Date()) | ||
| return date | ||
| }, | ||
@@ -165,10 +188,15 @@ | ||
| this.now = +new Date() | ||
| var props = assign({}, this.props) | ||
| var view = this.getViewFactory() | ||
| var props = asConfig(this.props) | ||
| this.toMoment = function(value, dateFormat){ | ||
| return toMoment(value, dateFormat || props.dateFormat, { locale: props.locale }) | ||
| } | ||
| props.viewDate = this.viewMoment = this.getViewDate() | ||
| var view = this.getViewFactory() | ||
| props.renderDay = this.props.renderDay | ||
| props.viewDate = this.viewMoment = this.getViewDate() | ||
| props.locale = this.props.locale | ||
| props.localeData = moment.localeData(props.locale) | ||
| props.renderDay = this.props.renderDay | ||
| props.onRenderDay = this.props.onRenderDay | ||
@@ -181,10 +209,16 @@ | ||
| props.style = this.prepareStyle(props) | ||
| var viewProps = asConfig(props) | ||
| viewProps.localeData = props.localeData | ||
| return ( | ||
| React.createElement("div", React.__spread({className: className}, this.props), | ||
| React.createElement("div", {className: "dp-inner"}, | ||
| React.createElement("div", React.__spread({className: className, style: props.style}, this.props), | ||
| React.createElement("div", {className: "dp-inner", style: {width: '100%', height: '100%', display: 'flex', flexFlow: 'column'}}, | ||
| this.renderHeader(view), | ||
| React.createElement("div", {className: "dp-body"}, | ||
| React.createElement("div", {className: "dp-body", style: {flex: 1}}, | ||
| React.createElement("div", {className: "dp-anim-target"}, | ||
| view(props) | ||
| view(viewProps) | ||
| ) | ||
@@ -199,2 +233,8 @@ ), | ||
| prepareStyle: function(props) { | ||
| var style = assign({}, props.defaultStyle, props.style) | ||
| return style | ||
| }, | ||
| renderFooter: function(props) { | ||
@@ -254,6 +294,5 @@ if (this.props.hideFooter){ | ||
| gotoDate: function(value) { | ||
| this.setState({ | ||
| view: 'month', | ||
| viewMoment: moment(value) | ||
| }) | ||
| this.setView('month') | ||
| this.setViewDate(value) | ||
| }, | ||
@@ -280,14 +319,11 @@ | ||
| return ( | ||
| React.createElement("div", {className: "dp-header"}, | ||
| React.createElement("table", {className: "dp-nav-table"}, React.createElement("tbody", null, | ||
| React.createElement("tr", {className: "dp-row"}, | ||
| React.createElement("td", {className: "dp-prev-nav dp-nav-cell dp-cell", onClick: this.handleNavPrev}, prev), | ||
| React.createElement("td", {className: "dp-nav-view dp-cell ", colSpan: colspan, onClick: this.handleViewChange}, headerText), | ||
| React.createElement("td", {className: "dp-next-nav dp-nav-cell dp-cell", onClick: this.handleNavNext}, next) | ||
| ) | ||
| )) | ||
| ) | ||
| return React.createElement(Header, { | ||
| prevText: prev, | ||
| nextText: next, | ||
| colspan: colspan, | ||
| onPrev: this.handleNavPrev, | ||
| onNext: this.handleNavNext, | ||
| onChange: this.handleViewChange | ||
| }, | ||
| headerText | ||
| ) | ||
@@ -301,19 +337,61 @@ }, | ||
| handleViewChange: function() { | ||
| this.setState({ | ||
| view: this.getNextViewName() | ||
| }) | ||
| this.setView(this.getNextViewName()) | ||
| }, | ||
| /** | ||
| * Use this method to set the view. | ||
| * | ||
| * @param {String} view 'month'/'year'/'decade' | ||
| * | ||
| * It calls onViewChange, and if the view is uncontrolled, also sets it is state, | ||
| * so the datepicker gets re-rendered view the new view | ||
| * | ||
| */ | ||
| setView: function(view) { | ||
| if (typeof this.props.onViewChange == 'function'){ | ||
| this.props.onViewChange(view) | ||
| } | ||
| if (this.props.view == null){ | ||
| this.setState({ | ||
| view: view | ||
| }) | ||
| } | ||
| }, | ||
| setViewDate: function(moment) { | ||
| moment = this.toMoment(moment) | ||
| var fn = this.props.onViewDateChange | ||
| if (typeof fn == 'function'){ | ||
| var text = moment.format(this.props.dateFormat) | ||
| var view = this.getViewName() | ||
| fn(text, moment, view) | ||
| } | ||
| if (!hasOwn(this.props, 'viewDate')){ | ||
| this.setState({ | ||
| viewDate: moment | ||
| }) | ||
| } | ||
| }, | ||
| getNext: function() { | ||
| var current = this.getViewDate() | ||
| var toMoment = this.toMoment | ||
| return ({ | ||
| month: function() { | ||
| return moment(current).add(1, 'month') | ||
| return toMoment(current).add(1, 'month') | ||
| }, | ||
| year: function() { | ||
| return moment(current).add(1, 'year') | ||
| return toMoment(current).add(1, 'year') | ||
| }, | ||
| decade: function() { | ||
| return moment(current).add(10, 'year') | ||
| return toMoment(current).add(10, 'year') | ||
| } | ||
@@ -325,12 +403,13 @@ })[this.getViewName()]() | ||
| var current = this.getViewDate() | ||
| var toMoment = this.toMoment | ||
| return ({ | ||
| month: function() { | ||
| return moment(current).add(-1, 'month') | ||
| return toMoment(current).add(-1, 'month') | ||
| }, | ||
| year: function() { | ||
| return moment(current).add(-1, 'year') | ||
| return toMoment(current).add(-1, 'year') | ||
| }, | ||
| decade: function() { | ||
| return moment(current).add(-10, 'year') | ||
| return toMoment(current).add(-10, 'year') | ||
| } | ||
@@ -340,8 +419,8 @@ })[this.getViewName()]() | ||
| handleNavPrev: function(event) { | ||
| var viewMoment = this.getPrev() | ||
| handleNavigation: function(direction, event) { | ||
| var viewMoment = direction == -1? | ||
| this.getPrev(): | ||
| this.getNext() | ||
| this.setState({ | ||
| viewMoment: viewMoment | ||
| }) | ||
| this.setViewDate(viewMoment) | ||
@@ -352,36 +431,31 @@ if (typeof this.props.onNav === 'function'){ | ||
| this.props.onNav(viewMoment, text, view, -1, event) | ||
| this.props.onNav(text, viewMoment, view, direction, event) | ||
| } | ||
| }, | ||
| handleNavPrev: function(event) { | ||
| this.handleNavigation(-1, event) | ||
| }, | ||
| handleNavNext: function(event) { | ||
| var viewMoment = this.getNext() | ||
| this.setState({ | ||
| viewMoment: viewMoment | ||
| }) | ||
| if (typeof this.props.onNav === 'function'){ | ||
| var text = viewMoment.format(this.props.dateFormat) | ||
| var view = this.getViewName() | ||
| this.props.onNav(viewMoment, text, view, 1, event) | ||
| } | ||
| this.handleNavigation(1, event) | ||
| }, | ||
| handleChange: function(date, event) { | ||
| date = moment(date) | ||
| date = this.toMoment(date) | ||
| var viewDate = moment(this.getViewDate()) | ||
| if (this.props.navOnDateClick){ | ||
| var viewDate = this.toMoment(this.getViewDate()) | ||
| //it's not enough to compare months, since the year can change as well | ||
| // | ||
| //also it's ok to hardcode the format here | ||
| var viewMonth = viewDate.format('YYYY-MM') | ||
| var dateMonth = date.format('YYYY-MM') | ||
| //it's not enough to compare months, since the year can change as well | ||
| // | ||
| //also it's ok to hardcode the format here | ||
| var viewMonth = viewDate.format('YYYY-MM') | ||
| var dateMonth = date.format('YYYY-MM') | ||
| if (dateMonth > viewMonth){ | ||
| this.handleNavNext(event) | ||
| } else if (dateMonth < viewMonth){ | ||
| this.handleNavPrev(event) | ||
| if (dateMonth > viewMonth){ | ||
| this.handleNavNext(event) | ||
| } else if (dateMonth < viewMonth){ | ||
| this.handleNavPrev(event) | ||
| } | ||
| } | ||
@@ -391,3 +465,3 @@ | ||
| ;(this.props.onChange || emptyFn)(date, text, event) | ||
| ;(this.props.onChange || emptyFn)(text, date, event) | ||
| }, | ||
@@ -397,2 +471,3 @@ | ||
| var viewName = this.getViewName() | ||
| var property = ({ | ||
@@ -403,14 +478,13 @@ decade: 'year', | ||
| var value = date.get(property) | ||
| var viewMoment = moment(this.getViewDate()).set(property, value) | ||
| var view = this.getPrevViewName() | ||
| var value = date.get(property) | ||
| var viewMoment = this.toMoment(this.getViewDate()).set(property, value) | ||
| var view = this.getPrevViewName() | ||
| this.setState({ | ||
| viewMoment: viewMoment, | ||
| view: view | ||
| }) | ||
| this.setViewDate(viewMoment) | ||
| this.setView(view) | ||
| if (typeof this.props.onSelect === 'function'){ | ||
| var text = viewMoment.format(this.props.dateFormat) | ||
| this.props.onSelect(viewMoment, text, view, event) | ||
| this.props.onSelect(text, viewMoment, view, event) | ||
| } | ||
@@ -443,7 +517,7 @@ } | ||
| var moment = __webpack_require__(2) | ||
| var copy = __webpack_require__(8).copy | ||
| var assign = __webpack_require__(10) | ||
| var FORMAT = __webpack_require__(9) | ||
| var asConfig = __webpack_require__(6) | ||
| var toMoment = __webpack_require__(10) | ||
| var FORMAT = __webpack_require__(11) | ||
| var asConfig = __webpack_require__(8) | ||
| var toMoment = __webpack_require__(7) | ||
@@ -478,4 +552,13 @@ var TODAY | ||
| getWeekStartMoment: function(value){ | ||
| var clone = moment(value).startOf('week') | ||
| // var clone = moment(value).startOf('week') | ||
| var weekStartDay = this.weekStartDay | ||
| var clone = this.toMoment(value).day(weekStartDay) | ||
| // debugger | ||
| if (weekStartDay != null){ | ||
| // debugger | ||
| // clone.add(this.props.weekStartDay, 'days') | ||
| } | ||
| // if (DEFAULT_WEEK_START_DAY != this.weekStartDay){ | ||
@@ -495,3 +578,3 @@ // clone.add('days', this.weekStartDay - DEFAULT_WEEK_START_DAY) | ||
| getDaysInMonth: function(value){ | ||
| var first = moment(value).startOf('month') | ||
| var first = this.toMoment(value).startOf('month') | ||
| var start = this.getWeekStartMoment(first) | ||
@@ -507,3 +590,3 @@ var result = [] | ||
| for (; i < 42; i++){ | ||
| result.push(moment(start)) | ||
| result.push(this.toMoment(start)) | ||
| start.add(1, 'days') | ||
@@ -517,18 +600,30 @@ } | ||
| TODAY = +moment().startOf('day') | ||
| var props = assign({}, this.props) | ||
| var viewMoment = this.props.viewMoment = toMoment(this.props.viewDate, this.props.dateFormat) | ||
| this.toMoment = function(value, dateFormat){ | ||
| // debugger | ||
| return toMoment(value, dateFormat || props.dateFormat, { locale: props.locale }) | ||
| } | ||
| this.props.minDate && (this.props.minDate = +toMoment(this.props.minDate, this.props.dateFormat)) | ||
| this.props.maxDate && (this.props.maxDate = +toMoment(this.props.maxDate, this.props.dateFormat)) | ||
| TODAY = +this.toMoment().startOf('day') | ||
| if (this.props.minDate){ | ||
| // debugger | ||
| var dateFormat = props.dateFormat | ||
| var viewMoment = props.viewMoment = this.toMoment(props.viewDate, dateFormat) | ||
| var weekStartDay = props.weekStartDay | ||
| if (weekStartDay == null){ | ||
| weekStartDay = props.localeData._week? props.localeData._week.dow: null | ||
| } | ||
| this.monthFirst = moment(viewMoment).startOf('month') | ||
| this.monthLast = moment(viewMoment).endOf('month') | ||
| this.weekStartDay = props.weekStartDay = weekStartDay | ||
| if (this.props.date){ | ||
| this.props.moment = moment(this.props.date).startOf('day') | ||
| props.minDate && (props.minDate = +this.toMoment(props.minDate, dateFormat)) | ||
| props.maxDate && (props.maxDate = +this.toMoment(props.maxDate, dateFormat)) | ||
| this.monthFirst = this.toMoment(viewMoment).startOf('month') | ||
| this.monthLast = this.toMoment(viewMoment).endOf('month') | ||
| if (props.date){ | ||
| props.moment = this.toMoment(props.date).startOf('day') | ||
| } | ||
@@ -542,5 +637,3 @@ | ||
| this.renderWeekDayNames(), | ||
| this.renderDays(daysInView) | ||
| this.renderDays(props, daysInView) | ||
| ) | ||
@@ -556,4 +649,7 @@ ) | ||
| */ | ||
| renderDays: function(days) { | ||
| var nodes = days.map(this.renderDay, this) | ||
| renderDays: function(props, days) { | ||
| var nodes = days.map(function(date){ | ||
| return this.renderDay(props, date) | ||
| }, this) | ||
| var len = days.length | ||
@@ -574,4 +670,4 @@ var buckets = [] | ||
| renderDay: function(date) { | ||
| var dayText = FORMAT.day(date) | ||
| renderDay: function(props, date) { | ||
| var dayText = FORMAT.day(date, props.dayFormat) | ||
| var classes = ["dp-cell dp-day"] | ||
@@ -589,10 +685,10 @@ | ||
| if (this.props.minDate && date < this.props.minDate){ | ||
| if (props.minDate && date < props.minDate){ | ||
| classes.push('dp-disabled dp-before-min') | ||
| } | ||
| if (this.props.maxDate && date > this.props.maxDate){ | ||
| if (props.maxDate && date > props.maxDate){ | ||
| classes.push('dp-disabled dp-after-max') | ||
| } | ||
| if (dateTimestamp == this.props.moment){ | ||
| if (dateTimestamp == props.moment){ | ||
| classes.push('dp-value') | ||
@@ -607,12 +703,12 @@ } | ||
| style : {}, | ||
| onClick : this.handleClick.bind(this, date, dateTimestamp), | ||
| onClick : this.handleClick.bind(this, props, date, dateTimestamp), | ||
| children : dayText | ||
| } | ||
| if (typeof this.props.onRenderDay === 'function'){ | ||
| renderDayProps = this.props.onRenderDay(renderDayProps) | ||
| if (typeof props.onRenderDay === 'function'){ | ||
| renderDayProps = props.onRenderDay(renderDayProps) | ||
| } | ||
| var defaultRenderFunction = React.DOM.td | ||
| var renderFunction = this.props.renderDay || defaultRenderFunction | ||
| var renderFunction = props.renderDay || defaultRenderFunction | ||
@@ -628,4 +724,24 @@ var result = renderFunction(renderDayProps) | ||
| getWeekDayNames: function(props) { | ||
| props = props || this.props | ||
| var names = props.weekDayNames | ||
| var weekStartDay = this.weekStartDay | ||
| if (typeof names == 'function'){ | ||
| names = names(weekStartDay, props.locale) | ||
| } else { | ||
| var index = weekStartDay | ||
| while (index > 0){ | ||
| names.push(names.shift()) | ||
| index-- | ||
| } | ||
| } | ||
| return names | ||
| }, | ||
| renderWeekDayNames: function(){ | ||
| var names = this.props.weekDayNames | ||
| var names = this.getWeekDayNames() | ||
@@ -639,7 +755,7 @@ return ( | ||
| handleClick: function(date, timestamp, event) { | ||
| if (this.props.minDate && timestamp < this.props.minDate){ | ||
| handleClick: function(props, date, timestamp, event) { | ||
| if (props.minDate && timestamp < props.minDate){ | ||
| return | ||
| } | ||
| if (this.props.maxDate && timestamp > this.props.maxDate){ | ||
| if (props.maxDate && timestamp > props.maxDate){ | ||
| return | ||
@@ -650,11 +766,9 @@ } | ||
| ;(this.props.onChange || emptyFn)(date, event) | ||
| ;(props.onChange || emptyFn)(date, event) | ||
| } | ||
| }) | ||
| copy({ | ||
| getHeaderText: function(moment) { | ||
| return toMoment(moment).format('MMMM YYYY') | ||
| } | ||
| }, MonthView) | ||
| MonthView.getHeaderText = function(moment) { | ||
| return toMoment(moment).format('MMMM YYYY') | ||
| } | ||
@@ -671,7 +785,7 @@ module.exports = MonthView | ||
| var moment = __webpack_require__(2) | ||
| var copy = __webpack_require__(8).copy | ||
| var FORMAT = __webpack_require__(9) | ||
| var asConfig = __webpack_require__(6) | ||
| var toMoment = __webpack_require__(10) | ||
| var FORMAT = __webpack_require__(11) | ||
| var asConfig = __webpack_require__(8) | ||
| var toMoment = __webpack_require__(7) | ||
| var assign = __webpack_require__(10) | ||
@@ -714,6 +828,8 @@ var TODAY | ||
| var viewMoment = this.props.viewMoment = moment(this.props.viewDate) | ||
| var props = assign({}, this.props) | ||
| if (this.props.date){ | ||
| this.props.moment = moment(this.props.date).startOf('month') | ||
| var viewMoment = props.viewMoment = moment(this.props.viewDate) | ||
| if (props.date){ | ||
| props.moment = moment(props.date).startOf('month') | ||
| } | ||
@@ -726,3 +842,3 @@ | ||
| React.createElement("tbody", null, | ||
| this.renderMonths(monthsInView) | ||
| this.renderMonths(props, monthsInView) | ||
@@ -739,4 +855,6 @@ ) | ||
| */ | ||
| renderMonths: function(days) { | ||
| var nodes = days.map(this.renderMonth, this) | ||
| renderMonths: function(props, days) { | ||
| var nodes = days.map(function(date){ | ||
| return this.renderMonth(props, date) | ||
| }, this) | ||
| var len = days.length | ||
@@ -757,4 +875,4 @@ var buckets = [] | ||
| renderMonth: function(date) { | ||
| var monthText = FORMAT.month(date) | ||
| renderMonth: function(props, date) { | ||
| var monthText = FORMAT.month(date, props.monthFormat) | ||
| var classes = ["dp-cell dp-month"] | ||
@@ -764,3 +882,3 @@ | ||
| if (dateTimestamp == this.props.moment){ | ||
| if (dateTimestamp == props.moment){ | ||
| classes.push('dp-value') | ||
@@ -770,3 +888,3 @@ } | ||
| return ( | ||
| React.createElement("td", {key: monthText, className: classes.join(' '), onClick: this.handleClick.bind(this, date)}, | ||
| React.createElement("td", {key: monthText, className: classes.join(' '), onClick: this.handleClick.bind(this, props, date)}, | ||
| monthText | ||
@@ -779,11 +897,10 @@ ) | ||
| event.target.value = date | ||
| ;(this.props.onSelect || emptyFn)(date, event) | ||
| ;(props.onSelect || emptyFn)(date, event) | ||
| } | ||
| }) | ||
| copy({ | ||
| getHeaderText: function(moment) { | ||
| return toMoment(moment).format('YYYY') | ||
| } | ||
| }, YearView) | ||
| YearView.getHeaderText = function(moment) { | ||
| return toMoment(moment).format('YYYY') | ||
| } | ||
@@ -800,7 +917,8 @@ module.exports = YearView | ||
| var moment = __webpack_require__(2) | ||
| var copy = __webpack_require__(8).copy | ||
| var assign = __webpack_require__(10) | ||
| var FORMAT = __webpack_require__(9) | ||
| var asConfig = __webpack_require__(6) | ||
| var toMoment = __webpack_require__(10) | ||
| var FORMAT = __webpack_require__(11) | ||
| var asConfig = __webpack_require__(8) | ||
| var toMoment = __webpack_require__(7) | ||
| var assign = __webpack_require__(10) | ||
@@ -848,6 +966,8 @@ var TODAY | ||
| var viewMoment = this.props.viewMoment = moment(this.props.viewDate) | ||
| var props = assign({}, this.props) | ||
| if (this.props.date){ | ||
| this.props.moment = moment(this.props.date).startOf('year') | ||
| var viewMoment = props.viewMoment = moment(this.props.viewDate) | ||
| if (props.date){ | ||
| props.moment = moment(props.date).startOf('year') | ||
| } | ||
@@ -860,4 +980,3 @@ | ||
| React.createElement("tbody", null, | ||
| this.renderYears(yearsInView) | ||
| this.renderYears(props, yearsInView) | ||
| ) | ||
@@ -873,4 +992,6 @@ ) | ||
| */ | ||
| renderYears: function(days) { | ||
| var nodes = days.map(this.renderYear, this) | ||
| renderYears: function(props, days) { | ||
| var nodes = days.map(function(date, index, arr){ | ||
| return this.renderYear(props, date, index, arr) | ||
| }, this) | ||
| var len = days.length | ||
@@ -891,4 +1012,4 @@ var buckets = [] | ||
| renderYear: function(date, index, arr) { | ||
| var yearText = FORMAT.year(date) | ||
| renderYear: function(props, date, index, arr) { | ||
| var yearText = FORMAT.year(date, props.yearFormat) | ||
| var classes = ["dp-cell dp-year"] | ||
@@ -898,3 +1019,3 @@ | ||
| if (dateTimestamp == this.props.moment){ | ||
| if (dateTimestamp == props.moment){ | ||
| classes.push('dp-value') | ||
@@ -912,3 +1033,3 @@ } | ||
| return ( | ||
| React.createElement("td", {key: yearText, className: classes.join(' '), onClick: this.handleClick.bind(this, date)}, | ||
| React.createElement("td", {key: yearText, className: classes.join(' '), onClick: this.handleClick.bind(this, props, date)}, | ||
| yearText | ||
@@ -921,16 +1042,14 @@ ) | ||
| event.target.value = date | ||
| ;(this.props.onSelect || emptyFn)(date, event) | ||
| ;(props.onSelect || emptyFn)(date, event) | ||
| } | ||
| }) | ||
| copy({ | ||
| getHeaderText: function(value) { | ||
| var year = moment(value).get('year') | ||
| var offset = year % 10 | ||
| DecadeView.getHeaderText = function(value) { | ||
| var year = moment(value).get('year') | ||
| var offset = year % 10 | ||
| year = year - offset - 1 | ||
| year = year - offset - 1 | ||
| return year + ' - ' + (year + 11) | ||
| } | ||
| }, DecadeView) | ||
| return year + ' - ' + (year + 11) | ||
| } | ||
@@ -943,11 +1062,108 @@ module.exports = DecadeView | ||
| /** @jsx React.DOM */'use strict'; | ||
| var React = __webpack_require__(1) | ||
| var P = React.PropTypes | ||
| module.exports = React.createClass({ | ||
| displayName: 'DatePickerHeader', | ||
| propTypes: { | ||
| onChange: P.func, | ||
| onPrev : P.func, | ||
| onNext : P.func, | ||
| colspan : P.number, | ||
| children: P.node | ||
| }, | ||
| render: function() { | ||
| var props = this.props | ||
| return React.createElement("div", {className: "dp-header"}, | ||
| React.createElement("table", {className: "dp-nav-table"}, | ||
| React.createElement("tbody", null, | ||
| React.createElement("tr", {className: "dp-row"}, | ||
| React.createElement("td", { | ||
| className: "dp-prev-nav dp-nav-cell dp-cell", | ||
| onClick: props.onPrev | ||
| }, props.prevText | ||
| ), | ||
| React.createElement("td", { | ||
| className: "dp-nav-view dp-cell", | ||
| colSpan: props.colspan, | ||
| onClick: props.onChange | ||
| }, props.children), | ||
| React.createElement("td", { | ||
| className: "dp-next-nav dp-nav-cell dp-cell", | ||
| onClick: props.onNext | ||
| }, props.nextText) | ||
| ) | ||
| ) | ||
| ) | ||
| ) | ||
| } | ||
| }) | ||
| /***/ }, | ||
| /* 7 */ | ||
| /***/ function(module, exports, __webpack_require__) { | ||
| 'use strict' | ||
| var copyUtils = __webpack_require__(8) | ||
| var copy = copyUtils.copy | ||
| var copyList = copyUtils.copyList | ||
| var moment = __webpack_require__(2) | ||
| var CONFIG = __webpack_require__(12) | ||
| var CONFIG = __webpack_require__(11) | ||
| /** | ||
| * This function will be used to convert a date to a moment. | ||
| * | ||
| * It accepts input as sring, date or moment | ||
| * | ||
| * @param {String/Date/Moment} value | ||
| * @param {String} [dateFormat] if value is string, it will be parsed to a moment using this format | ||
| * @param {Object} [config] | ||
| * @param {Boolean} [config.strict] whether to perform strict parsing on strings | ||
| * @return {Moment} | ||
| */ | ||
| module.exports = function(value, dateFormat, config){ | ||
| var strict = !!(config && config.strict) | ||
| var locale = config && config.locale | ||
| dateFormat = dateFormat || CONFIG.dateFormat | ||
| if (typeof value == 'string'){ | ||
| return moment(value, dateFormat, locale, strict) | ||
| } | ||
| // return moment.isMoment(value)? | ||
| // value: | ||
| return moment(value == null? new Date(): value)//, undefined, locale, strict) | ||
| } | ||
| /***/ }, | ||
| /* 8 */ | ||
| /***/ function(module, exports, __webpack_require__) { | ||
| 'use strict' | ||
| var assign = __webpack_require__(10) | ||
| var CONFIG = __webpack_require__(12) | ||
| var KEYS = Object.keys(CONFIG) | ||
| function copyList(src, target, list){ | ||
| if (src){ | ||
| list.forEach(function(key){ | ||
| target[key] = src[key] | ||
| }) | ||
| } | ||
| return target | ||
| } | ||
| /** | ||
@@ -975,11 +1191,10 @@ * Returns an object that copies from given source object | ||
| if (!source){ | ||
| return copy(cfg) | ||
| return assign({}, cfg) | ||
| } | ||
| return copyList(source, copy(cfg), keys) | ||
| return copyList(source, assign({}, cfg), keys) | ||
| } | ||
| /***/ }, | ||
| /* 7 */ | ||
| /* 9 */ | ||
| /***/ function(module, exports, __webpack_require__) { | ||
@@ -993,7 +1208,17 @@ | ||
| module.exports = function getWeekDayNames(startDay){ | ||
| module.exports = function getWeekDayNames(startDay, locale){ | ||
| var names = moment.weekdaysShort() | ||
| var index = startDay || DEFAULT_WEEK_START_DAY | ||
| var weekDays | ||
| if (locale){ | ||
| var data = moment.localeData(locale) | ||
| weekDays = data && data._weekdaysShort? data._weekdaysShort: weekDays | ||
| } | ||
| weekDays = weekDays || moment.weekdaysShort() | ||
| var names = weekDays | ||
| var index = startDay == null? DEFAULT_WEEK_START_DAY: startDay | ||
| while (index > 0){ | ||
@@ -1008,204 +1233,35 @@ names.push(names.shift()) | ||
| /***/ }, | ||
| /* 8 */ | ||
| /* 10 */ | ||
| /***/ function(module, exports, __webpack_require__) { | ||
| module.exports = function(){ | ||
| 'use strict'; | ||
| 'use strict' | ||
| function ToObject(val) { | ||
| if (val == null) { | ||
| throw new TypeError('Object.assign cannot be called with null or undefined'); | ||
| } | ||
| var HAS_OWN = Object.prototype.hasOwnProperty, | ||
| STR_OBJECT = 'object', | ||
| STR_UNDEFINED = 'undefined' | ||
| return Object(val); | ||
| } | ||
| return { | ||
| module.exports = Object.assign || function (target, source) { | ||
| var from; | ||
| var keys; | ||
| var to = ToObject(target); | ||
| /** | ||
| * Copies all properties from source to destination | ||
| * | ||
| * copy({name: 'jon',age:5}, this); | ||
| * // => this will have the 'name' and 'age' properties set to 'jon' and 5 respectively | ||
| * | ||
| * @param {Object} source | ||
| * @param {Object} destination | ||
| * | ||
| * @return {Object} destination | ||
| */ | ||
| copy: __webpack_require__(12), | ||
| for (var s = 1; s < arguments.length; s++) { | ||
| from = arguments[s]; | ||
| keys = Object.keys(Object(from)); | ||
| /** | ||
| * Copies all properties from source to destination, if the property does not exist into the destination | ||
| * | ||
| * copyIf({name: 'jon',age:5}, {age:7}) | ||
| * // => { name: 'jon', age: 7} | ||
| * | ||
| * @param {Object} source | ||
| * @param {Object} destination | ||
| * | ||
| * @return {Object} destination | ||
| */ | ||
| copyIf: __webpack_require__(13), | ||
| for (var i = 0; i < keys.length; i++) { | ||
| to[keys[i]] = from[keys[i]]; | ||
| } | ||
| } | ||
| /** | ||
| * Copies all properties from source to a new object, with the given value. This object is returned | ||
| * | ||
| * copyAs({name: 'jon',age:5}) | ||
| * // => the resulting object will have the 'name' and 'age' properties set to 1 | ||
| * | ||
| * @param {Object} source | ||
| * @param {Object/Number/String} [value=1] | ||
| * | ||
| * @return {Object} destination | ||
| */ | ||
| copyAs: function(source, value){ | ||
| return to; | ||
| }; | ||
| var destination = {} | ||
| value = value || 1 | ||
| if (source != null && typeof source === STR_OBJECT ){ | ||
| for (var i in source) if ( HAS_OWN.call(source, i) ) { | ||
| destination[i] = value | ||
| } | ||
| } | ||
| return destination | ||
| }, | ||
| /** | ||
| * Copies all properties named in the list, from source to destination | ||
| * | ||
| * copyList({name: 'jon',age:5, year: 2006}, {}, ['name','age']) | ||
| * // => {name: 'jon', age: 5} | ||
| * | ||
| * @param {Object} source | ||
| * @param {Object} destination | ||
| * @param {Array} list the array with the names of the properties to copy | ||
| * | ||
| * @return {Object} destination | ||
| */ | ||
| copyList: __webpack_require__(14), | ||
| /** | ||
| * Copies all properties named in the list, from source to destination, if the property does not exist into the destination | ||
| * | ||
| * copyListIf({name: 'jon',age:5, year: 2006}, {age: 10}, ['name','age']) | ||
| * // => {name: 'jon', age: 10} | ||
| * | ||
| * @param {Object} source | ||
| * @param {Object} destination | ||
| * @param {Array} list the array with the names of the properties to copy | ||
| * | ||
| * @return {Object} destination | ||
| */ | ||
| copyListIf: __webpack_require__(15), | ||
| /** | ||
| * Copies all properties named in the namedKeys, from source to destination | ||
| * | ||
| * copyKeys({name: 'jon',age:5, year: 2006, date: '2010/05/12'}, {}, {name:1 ,age: true, year: 'theYear'}) | ||
| * // => {name: 'jon', age: 5, theYear: 2006} | ||
| * | ||
| * @param {Object} source | ||
| * @param {Object} destination | ||
| * @param {Object} namedKeys an object with keys denoting the properties to be copied | ||
| * | ||
| * @return {Object} destination | ||
| */ | ||
| copyKeys: __webpack_require__(16), | ||
| /** | ||
| * Copies all properties named in the namedKeys, from source to destination, | ||
| * but only if the property does not already exist in the destination object | ||
| * | ||
| * copyKeysIf({name: 'jon',age:5, year: 2006}, {aname: 'test'}, {name:'aname' ,age: true}) | ||
| * // => {aname: 'test', age: 5} | ||
| * | ||
| * @param {Object} source | ||
| * @param {Object} destination | ||
| * @param {Object} namedKeys an object with keys denoting the properties to be copied | ||
| * | ||
| * @return {Object} destination | ||
| */ | ||
| copyKeysIf: __webpack_require__(17), | ||
| copyExceptKeys: function(source, destination, exceptKeys){ | ||
| destination = destination || {} | ||
| exceptKeys = exceptKeys || {} | ||
| if (source != null && typeof source === STR_OBJECT ){ | ||
| for (var i in source) if ( HAS_OWN.call(source, i) && !HAS_OWN.call(exceptKeys, i) ) { | ||
| destination[i] = source[i] | ||
| } | ||
| } | ||
| return destination | ||
| }, | ||
| /** | ||
| * Copies the named keys from source to destination. | ||
| * For the keys that are functions, copies the functions bound to the source | ||
| * | ||
| * @param {Object} source The source object | ||
| * @param {Object} destination The target object | ||
| * @param {Object} namedKeys An object with the names of the keys to copy The values from the keys in this object | ||
| * need to be either numbers or booleans if you want to copy the property under the same name, | ||
| * or a string if you want to copy the property under a different name | ||
| * @return {Object} Returns the destination object | ||
| */ | ||
| bindCopyKeys: function(source, destination, namedKeys){ | ||
| if (arguments.length == 2){ | ||
| namedKeys = destination | ||
| destination = null | ||
| } | ||
| destination = destination || {} | ||
| if ( | ||
| source != null && typeof source === STR_OBJECT && | ||
| namedKeys != null && typeof namedKeys === STR_OBJECT | ||
| ) { | ||
| var typeOfNamedProperty, | ||
| namedPropertyValue, | ||
| typeOfSourceProperty, | ||
| propValue | ||
| for(var propName in namedKeys) if (HAS_OWN.call(namedKeys, propName)) { | ||
| namedPropertyValue = namedKeys[propName] | ||
| typeOfNamedProperty = typeof namedPropertyValue | ||
| propValue = source[propName] | ||
| typeOfSourceProperty = typeof propValue | ||
| if ( typeOfSourceProperty !== STR_UNDEFINED ) { | ||
| destination[ | ||
| typeOfNamedProperty == 'string'? | ||
| namedPropertyValue : | ||
| propName | ||
| ] = typeOfSourceProperty == 'function' ? | ||
| propValue.bind(source): | ||
| propValue | ||
| } | ||
| } | ||
| } | ||
| return destination | ||
| } | ||
| } | ||
| }() | ||
| /***/ }, | ||
| /* 9 */ | ||
| /* 11 */ | ||
| /***/ function(module, exports, __webpack_require__) { | ||
@@ -1215,4 +1271,4 @@ | ||
| var CONFIG = __webpack_require__(11) | ||
| var toMoment = __webpack_require__(10) | ||
| var CONFIG = __webpack_require__(12) | ||
| var toMoment = __webpack_require__(7) | ||
@@ -1238,3 +1294,3 @@ function f(mom, format){ | ||
| /***/ }, | ||
| /* 10 */ | ||
| /* 12 */ | ||
| /***/ function(module, exports, __webpack_require__) { | ||
@@ -1244,44 +1300,16 @@ | ||
| var moment = __webpack_require__(2) | ||
| var CONFIG = __webpack_require__(11) | ||
| var getWeekDayNames = __webpack_require__(9) | ||
| /** | ||
| * This function will be used to convert a date to a moment. | ||
| * | ||
| * It accepts input as sring, date or moment | ||
| * | ||
| * @param {String/Date/Moment} value | ||
| * @param {String} [dateFormat] if value is string, it will be parsed to a moment using this format | ||
| * @param {Object} [config] | ||
| * @param {Boolean} [config.strict] whether to perform strict parsing on strings | ||
| * @return {Moment} | ||
| */ | ||
| module.exports = function(value, dateFormat, config){ | ||
| var strict = !!(config && config.strict) | ||
| // console.log(getWeekDayNames()) | ||
| dateFormat = dateFormat || CONFIG.dateFormat | ||
| if (typeof value == 'string'){ | ||
| return moment(value, dateFormat, strict) | ||
| } | ||
| return moment(value == null? new Date(): value) | ||
| } | ||
| /***/ }, | ||
| /* 11 */ | ||
| /***/ function(module, exports, __webpack_require__) { | ||
| 'use strict' | ||
| var getWeekDayNames = __webpack_require__(7) | ||
| module.exports = { | ||
| //the names of week days to be displayed in month view - first should be sunday | ||
| weekDayNames: getWeekDayNames(), | ||
| weekDayNames: getWeekDayNames, | ||
| //the day to display as first day of week. defaults to 0, which is sunday | ||
| weekStartDay: 0, | ||
| weekStartDay: null, | ||
| locale: null, | ||
| //the format in which days should be displayed in month view | ||
@@ -1321,286 +1349,4 @@ dayFormat: 'D', | ||
| /***/ }, | ||
| /* 12 */ | ||
| /***/ function(module, exports, __webpack_require__) { | ||
| 'use strict' | ||
| var HAS_OWN = Object.prototype.hasOwnProperty | ||
| var STR_OBJECT = 'object' | ||
| /** | ||
| * Copies all properties from source to destination | ||
| * | ||
| * copy({name: 'jon',age:5}, this); | ||
| * // => this will have the 'name' and 'age' properties set to 'jon' and 5 respectively | ||
| * | ||
| * @param {Object} source | ||
| * @param {Object} destination | ||
| * | ||
| * @return {Object} destination | ||
| */ | ||
| module.exports = function(source, destination){ | ||
| destination = destination || {} | ||
| if (source != null && typeof source === STR_OBJECT ){ | ||
| for (var i in source) if ( HAS_OWN.call(source, i) ) { | ||
| destination[i] = source[i] | ||
| } | ||
| } | ||
| return destination | ||
| } | ||
| /***/ }, | ||
| /* 13 */ | ||
| /***/ function(module, exports, __webpack_require__) { | ||
| 'use strict' | ||
| var HAS_OWN = Object.prototype.hasOwnProperty | ||
| var STR_OBJECT = 'object' | ||
| var STR_UNDEFINED = 'undefined' | ||
| /** | ||
| * Copies all properties from source to destination, if the property does not exist into the destination | ||
| * | ||
| * copyIf({name: 'jon',age:5}, {age:7}) | ||
| * // => { name: 'jon', age: 7} | ||
| * | ||
| * @param {Object} source | ||
| * @param {Object} destination | ||
| * | ||
| * @return {Object} destination | ||
| */ | ||
| module.exports = function(source, destination){ | ||
| destination = destination || {} | ||
| if (source != null && typeof source === STR_OBJECT){ | ||
| for (var i in source) if ( HAS_OWN.call(source, i) && (typeof destination[i] === STR_UNDEFINED) ) { | ||
| destination[i] = source[i] | ||
| } | ||
| } | ||
| return destination | ||
| } | ||
| /***/ }, | ||
| /* 14 */ | ||
| /***/ function(module, exports, __webpack_require__) { | ||
| 'use strict' | ||
| var STR_UNDEFINED = 'undefined' | ||
| /** | ||
| * Copies all properties named in the list, from source to destination | ||
| * | ||
| * copyList({name: 'jon',age:5, year: 2006}, {}, ['name','age']) | ||
| * // => {name: 'jon', age: 5} | ||
| * | ||
| * @param {Object} source | ||
| * @param {Object} destination | ||
| * @param {Array} list the array with the names of the properties to copy | ||
| * | ||
| * @return {Object} destination | ||
| */ | ||
| module.exports = function(source, destination, list){ | ||
| if (arguments.length < 3){ | ||
| list = destination | ||
| destination = null | ||
| } | ||
| destination = destination || {} | ||
| list = list || Object.keys(source) | ||
| var i = 0 | ||
| var len = list.length | ||
| var propName | ||
| for ( ; i < len; i++ ){ | ||
| propName = list[i] | ||
| if ( typeof source[propName] !== STR_UNDEFINED ) { | ||
| destination[list[i]] = source[list[i]] | ||
| } | ||
| } | ||
| return destination | ||
| } | ||
| /***/ }, | ||
| /* 15 */ | ||
| /***/ function(module, exports, __webpack_require__) { | ||
| 'use strict' | ||
| var STR_UNDEFINED = 'undefined' | ||
| /** | ||
| * Copies all properties named in the list, from source to destination, if the property does not exist into the destination | ||
| * | ||
| * copyListIf({name: 'jon',age:5, year: 2006}, {age: 10}, ['name','age']) | ||
| * // => {name: 'jon', age: 10} | ||
| * | ||
| * @param {Object} source | ||
| * @param {Object} destination | ||
| * @param {Array} list the array with the names of the properties to copy | ||
| * | ||
| * @return {Object} destination | ||
| */ | ||
| module.exports = function(source, destination, list){ | ||
| if (arguments.length < 3){ | ||
| list = destination | ||
| destination = null | ||
| } | ||
| destination = destination || {} | ||
| list = list || Object.keys(source) | ||
| var i = 0 | ||
| var len = list.length | ||
| var propName | ||
| for ( ; i < len ; i++ ){ | ||
| propName = list[i] | ||
| if ( | ||
| (typeof source[propName] !== STR_UNDEFINED) && | ||
| (typeof destination[propName] === STR_UNDEFINED) | ||
| ){ | ||
| destination[propName] = source[propName] | ||
| } | ||
| } | ||
| return destination | ||
| } | ||
| /***/ }, | ||
| /* 16 */ | ||
| /***/ function(module, exports, __webpack_require__) { | ||
| 'use strict' | ||
| var STR_UNDEFINED = 'undefined' | ||
| var STR_OBJECT = 'object' | ||
| var HAS_OWN = Object.prototype.hasOwnProperty | ||
| var copyList = __webpack_require__(14) | ||
| /** | ||
| * Copies all properties named in the namedKeys, from source to destination | ||
| * | ||
| * copyKeys({name: 'jon',age:5, year: 2006, date: '2010/05/12'}, {}, {name:1 ,age: true, year: 'theYear'}) | ||
| * // => {name: 'jon', age: 5, theYear: 2006} | ||
| * | ||
| * @param {Object} source | ||
| * @param {Object} destination | ||
| * @param {Object} namedKeys an object with keys denoting the properties to be copied | ||
| * | ||
| * @return {Object} destination | ||
| */ | ||
| module.exports = function(source, destination, namedKeys){ | ||
| if (arguments.length < 3 ){ | ||
| namedKeys = destination | ||
| destination = null | ||
| } | ||
| destination = destination || {} | ||
| if (!namedKeys || Array.isArray(namedKeys)){ | ||
| return copyList(source, destination, namedKeys) | ||
| } | ||
| if ( | ||
| source != null && typeof source === STR_OBJECT && | ||
| namedKeys != null && typeof namedKeys === STR_OBJECT | ||
| ) { | ||
| var typeOfNamedProperty | ||
| var namedPropertyValue | ||
| for (var propName in namedKeys) if ( HAS_OWN.call(namedKeys, propName) ) { | ||
| namedPropertyValue = namedKeys[propName] | ||
| typeOfNamedProperty = typeof namedPropertyValue | ||
| if (typeof source[propName] !== STR_UNDEFINED){ | ||
| destination[typeOfNamedProperty == 'string'? namedPropertyValue : propName] = source[propName] | ||
| } | ||
| } | ||
| } | ||
| return destination | ||
| } | ||
| /***/ }, | ||
| /* 17 */ | ||
| /***/ function(module, exports, __webpack_require__) { | ||
| 'use strict' | ||
| var STR_UNDEFINED = 'undefined' | ||
| var STR_OBJECT = 'object' | ||
| var HAS_OWN = Object.prototype.hasOwnProperty | ||
| var copyListIf = __webpack_require__(15) | ||
| /** | ||
| * Copies all properties named in the namedKeys, from source to destination, | ||
| * but only if the property does not already exist in the destination object | ||
| * | ||
| * copyKeysIf({name: 'jon',age:5, year: 2006}, {aname: 'test'}, {name:'aname' ,age: true}) | ||
| * // => {aname: 'test', age: 5} | ||
| * | ||
| * @param {Object} source | ||
| * @param {Object} destination | ||
| * @param {Object} namedKeys an object with keys denoting the properties to be copied | ||
| * | ||
| * @return {Object} destination | ||
| */ | ||
| module.exports = function(source, destination, namedKeys){ | ||
| if (arguments.length < 3 ){ | ||
| namedKeys = destination | ||
| destination = null | ||
| } | ||
| destination = destination || {} | ||
| if (!namedKeys || Array.isArray(namedKeys)){ | ||
| return copyListIf(source, destination, namedKeys) | ||
| } | ||
| if ( | ||
| source != null && typeof source === STR_OBJECT && | ||
| namedKeys != null && typeof namedKeys === STR_OBJECT | ||
| ) { | ||
| var typeOfNamedProperty | ||
| var namedPropertyValue | ||
| var newPropertyName | ||
| for (var propName in namedKeys) if ( HAS_OWN.call(namedKeys, propName) ) { | ||
| namedPropertyValue = namedKeys[propName] | ||
| typeOfNamedProperty = typeof namedPropertyValue | ||
| newPropertyName = typeOfNamedProperty == 'string'? namedPropertyValue : propName | ||
| if ( | ||
| typeof source[propName] !== STR_UNDEFINED && | ||
| typeof destination[newPropertyName] === STR_UNDEFINED | ||
| ) { | ||
| destination[newPropertyName] = source[propName] | ||
| } | ||
| } | ||
| } | ||
| return destination | ||
| } | ||
| /***/ } | ||
| /******/ ]) | ||
| }); |
@@ -1,1 +0,1 @@ | ||
| !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("moment"),require("React")):"function"==typeof define&&define.amd?define(["moment","React"],t):"object"==typeof exports?exports.DatePicker=t(require("moment"),require("React")):e.DatePicker=t(e.moment,e.React)}(this,function(e,t){return function(e){function t(n){if(r[n])return r[n].exports;var a=r[n]={exports:{},id:n,loaded:!1};return e[n].call(a.exports,a,a.exports,t),a.loaded=!0,a.exports}var r={};return t.m=e,t.c=r,t.p="",t(0)}([function(e,t,r){"use strict";function n(){}var a=r(5),o=r(1),s=r(2),i=(s.copy,s.copyList,r(4)),p=r(16),c=r(17),d=r(15),u={month:p,year:c,decade:d},h=(r(10),a.createClass({displayName:"DatePicker",propTypes:{todayText:a.PropTypes.string,gotoSelectedText:a.PropTypes.string,renderFooter:a.PropTypes.func,onChange:a.PropTypes.func,date:a.PropTypes.any,viewDate:a.PropTypes.any},getInitialState:function(){return{}},getDefaultProps:function(){return i()},getViewName:function(){return this.state.view||this.props.view||"month"},getViewOrder:function(){return["month","year","decade"]},addViewIndex:function(e){var t=this.getViewName(),r=this.getViewOrder(),n=r.indexOf(t);return n+=e,n%r.length},getNextViewName:function(){return this.getViewOrder()[this.addViewIndex(1)]},getPrevViewName:function(){return this.getViewOrder()[this.addViewIndex(-1)]},getView:function(){return u[this.getViewName()]||u.month},getViewFactory:function(){var e=this.getView();return a.createFactory&&(e.__factory=e.__factory||a.createFactory(e),e=e.__factory),e},getViewDate:function(){return this.state.viewMoment||this.viewMoment||this.props.viewDate||this.props.date||this.now},render:function(){this.now=+new Date;var e=this.getViewFactory(),t=i(this.props);t.viewDate=this.viewMoment=this.getViewDate(),t.renderDay=this.props.renderDay,t.onRenderDay=this.props.onRenderDay,t.onChange=this.handleChange,t.onSelect=this.handleSelect;var r=(this.props.className||"")+" date-picker";return a.createElement("div",a.__spread({className:r},this.props),a.createElement("div",{className:"dp-inner"},this.renderHeader(e),a.createElement("div",{className:"dp-body"},a.createElement("div",{className:"dp-anim-target"},e(t))),this.renderFooter(t)))},renderFooter:function(e){if(!this.props.hideFooter){this.props.today&&console.warn('Please use "todayText" prop instead of "today"!'),this.props.gotoSelected&&console.warn('Please use "gotoSelectedText" prop instead of "gotoSelected"!');var t,r=this.props.todayText||"Today",n=this.props.gotoSelectedText||"Go to selected",o={todayText:r,gotoSelectedText:n,onTodayClick:this.gotoNow,onGotoSelectedClick:this.gotoSelected,date:e.date,viewDate:e.viewDate};return"function"==typeof this.props.renderFooter&&(t=this.props.renderFooter(o)),void 0!==t?t:a.createElement("div",{className:"dp-footer"},a.createElement("div",{className:"dp-footer-today",onClick:this.gotoNow},r),a.createElement("div",{className:"dp-footer-selected",onClick:this.gotoSelected},n))}},gotoNow:function(){this.gotoDate(+new Date)},gotoSelected:function(){this.gotoDate(this.props.date||+new Date)},gotoDate:function(e){this.setState({view:"month",viewMoment:o(e)})},getViewColspan:function(){var e={month:5,year:2,decade:2};return e[this.getViewName()]},renderHeader:function(){var e=this.getViewDate(),t=this.getView().getHeaderText(e),r=this.getViewColspan(),n=this.props.navPrev,o=this.props.navNext;return a.createElement("div",{className:"dp-header"},a.createElement("table",{className:"dp-nav-table"},a.createElement("tbody",null,a.createElement("tr",{className:"dp-row"},a.createElement("td",{className:"dp-prev-nav dp-nav-cell dp-cell",onClick:this.handleNavPrev},n),a.createElement("td",{className:"dp-nav-view dp-cell ",colSpan:r,onClick:this.handleViewChange},t),a.createElement("td",{className:"dp-next-nav dp-nav-cell dp-cell",onClick:this.handleNavNext},o)))))},handleRenderDay:function(e){return(this.props.renderDay||n)(e)||[]},handleViewChange:function(){this.setState({view:this.getNextViewName()})},getNext:function(){var e=this.getViewDate();return{month:function(){return o(e).add(1,"month")},year:function(){return o(e).add(1,"year")},decade:function(){return o(e).add(10,"year")}}[this.getViewName()]()},getPrev:function(){var e=this.getViewDate();return{month:function(){return o(e).add(-1,"month")},year:function(){return o(e).add(-1,"year")},decade:function(){return o(e).add(-10,"year")}}[this.getViewName()]()},handleNavPrev:function(e){var t=this.getPrev();if(this.setState({viewMoment:t}),"function"==typeof this.props.onNav){var r=t.format(this.props.dateFormat),n=this.getViewName();this.props.onNav(t,r,n,-1,e)}},handleNavNext:function(e){var t=this.getNext();if(this.setState({viewMoment:t}),"function"==typeof this.props.onNav){var r=t.format(this.props.dateFormat),n=this.getViewName();this.props.onNav(t,r,n,1,e)}},handleChange:function(e,t){e=o(e);var r=o(this.getViewDate()),a=r.format("YYYY-MM"),s=e.format("YYYY-MM");s>a?this.handleNavNext(t):a>s&&this.handleNavPrev(t);var i=e.format(this.props.dateFormat);(this.props.onChange||n)(e,i,t)},handleSelect:function(e,t){var r=this.getViewName(),n={decade:"year",year:"month"}[r],a=e.get(n),s=o(this.getViewDate()).set(n,a),i=this.getPrevViewName();if(this.setState({viewMoment:s,view:i}),"function"==typeof this.props.onSelect){var p=s.format(this.props.dateFormat);this.props.onSelect(s,p,i,t)}}}));e.exports=h},function(t){t.exports=e},function(e,t,r){e.exports=function(){"use strict";var e=Object.prototype.hasOwnProperty,t="object",n="undefined";return{copy:r(11),copyIf:r(12),copyAs:function(r,n){var a={};if(n=n||1,null!=r&&typeof r===t)for(var o in r)e.call(r,o)&&(a[o]=n);return a},copyList:r(8),copyListIf:r(9),copyKeys:r(13),copyKeysIf:r(14),copyExceptKeys:function(r,n,a){if(n=n||{},a=a||{},null!=r&&typeof r===t)for(var o in r)e.call(r,o)&&!e.call(a,o)&&(n[o]=r[o]);return n},bindCopyKeys:function(r,a,o){if(2==arguments.length&&(o=a,a=null),a=a||{},null!=r&&typeof r===t&&null!=o&&typeof o===t){var s,i,p,c;for(var d in o)e.call(o,d)&&(i=o[d],s=typeof i,c=r[d],p=typeof c,p!==n&&(a["string"==s?i:d]="function"==p?c.bind(r):c))}return a}}}()},function(e,t,r){"use strict";var n=r(1),a=r(6);e.exports=function(e,t,r){var o=!(!r||!r.strict);return t=t||a.dateFormat,"string"==typeof e?n(e,t,o):n(null==e?new Date:e)}},function(e,t,r){"use strict";var n=r(2),a=n.copy,o=n.copyList,s=r(6),i=Object.keys(s);e.exports=function(e,t){var r=i;return t&&(r=Object.keys(t)),t=t||s,e?o(e,a(t),r):a(t)}},function(e){e.exports=t},function(e,t,r){"use strict";var n=r(10);e.exports={weekDayNames:n(),weekStartDay:0,dayFormat:"D",monthFormat:"MMMM",yearFormat:"YYYY",navPrev:"‹",navNext:"›",view:"month",date:null,minDate:null,maxDate:null,viewDate:null,dateFormat:"YYYY-MM-DD"}},function(e,t,r){"use strict";function n(e,t){return o(e).format(t)}var a=r(6),o=r(3);e.exports={day:function(e,t){return n(e,t||a.dayFormat)},month:function(e,t){return n(e,t||a.monthFormat)},year:function(e,t){return n(e,t||a.yearFormat)}}},function(e){"use strict";var t="undefined";e.exports=function(e,r,n){arguments.length<3&&(n=r,r=null),r=r||{},n=n||Object.keys(e);for(var a,o=0,s=n.length;s>o;o++)a=n[o],typeof e[a]!==t&&(r[n[o]]=e[n[o]]);return r}},function(e){"use strict";var t="undefined";e.exports=function(e,r,n){arguments.length<3&&(n=r,r=null),r=r||{},n=n||Object.keys(e);for(var a,o=0,s=n.length;s>o;o++)a=n[o],typeof e[a]!==t&&typeof r[a]===t&&(r[a]=e[a]);return r}},function(e,t,r){"use strict";var n=r(1),a=1*n().startOf("week").format("d");e.exports=function(e){for(var t=n.weekdaysShort(),r=e||a;r>0;)t.push(t.shift()),r--;return t}},function(e){"use strict";var t=Object.prototype.hasOwnProperty,r="object";e.exports=function(e,n){if(n=n||{},null!=e&&typeof e===r)for(var a in e)t.call(e,a)&&(n[a]=e[a]);return n}},function(e){"use strict";var t=Object.prototype.hasOwnProperty,r="object",n="undefined";e.exports=function(e,a){if(a=a||{},null!=e&&typeof e===r)for(var o in e)t.call(e,o)&&typeof a[o]===n&&(a[o]=e[o]);return a}},function(e,t,r){"use strict";var n="undefined",a="object",o=Object.prototype.hasOwnProperty,s=r(8);e.exports=function(e,t,r){if(arguments.length<3&&(r=t,t=null),t=t||{},!r||Array.isArray(r))return s(e,t,r);if(null!=e&&typeof e===a&&null!=r&&typeof r===a){var i,p;for(var c in r)o.call(r,c)&&(p=r[c],i=typeof p,typeof e[c]!==n&&(t["string"==i?p:c]=e[c]))}return t}},function(e,t,r){"use strict";var n="undefined",a="object",o=Object.prototype.hasOwnProperty,s=r(9);e.exports=function(e,t,r){if(arguments.length<3&&(r=t,t=null),t=t||{},!r||Array.isArray(r))return s(e,t,r);if(null!=e&&typeof e===a&&null!=r&&typeof r===a){var i,p,c;for(var d in r)o.call(r,d)&&(p=r[d],i=typeof p,c="string"==i?p:d,typeof e[d]!==n&&typeof t[c]===n&&(t[c]=e[d]))}return t}},function(e,t,r){"use strict";function n(){}var a,o=r(5),s=r(1),i=r(2).copy,p=r(7),c=r(4),d=(r(3),o.createClass({displayName:"DecadeView",getDefaultProps:function(){return c()},getYearsInDecade:function(e){var t=s(e).get("year"),r=t%10;t=t-r-1;for(var n=[],a=0,o=s(t,"YYYY").startOf("year");12>a;a++)n.push(s(o)),o.add(1,"year");return n},render:function(){a=+s().startOf("day");var e=this.props.viewMoment=s(this.props.viewDate);this.props.date&&(this.props.moment=s(this.props.date).startOf("year"));var t=this.getYearsInDecade(e);return o.createElement("table",{className:"dp-table dp-decade-view"},o.createElement("tbody",null,this.renderYears(t)))},renderYears:function(e){for(var t=e.map(this.renderYear,this),r=e.length,n=[],a=Math.ceil(r/4),s=0;a>s;s++)n.push(t.slice(4*s,4*(s+1)));return n.map(function(e,t){return o.createElement("tr",{key:"row"+t},e)})},renderYear:function(e,t,r){var n=p.year(e),a=["dp-cell dp-year"],s=+e;return s==this.props.moment&&a.push("dp-value"),t||a.push("dp-prev"),t==r.length-1&&a.push("dp-next"),o.createElement("td",{key:n,className:a.join(" "),onClick:this.handleClick.bind(this,e)},n)},handleClick:function(e,t){t.target.value=e,(this.props.onSelect||n)(e,t)}}));i({getHeaderText:function(e){var t=s(e).get("year"),r=t%10;return t=t-r-1,t+" - "+(t+11)}},d),e.exports=d},function(e,t,r){"use strict";function n(){}var a,o=r(5),s=r(1),i=r(2).copy,p=r(7),c=r(4),d=r(3),u=o.createClass({displayName:"MonthView",formatAsDay:function(e,t){return e.format(t||"D")},getDefaultProps:function(){return c()},getWeekStartMoment:function(e){var t=s(e).startOf("week");return t},getDaysInMonth:function(e){var t=s(e).startOf("month"),r=this.getWeekStartMoment(t),n=[],a=0;for(t.add(-1,"days").isBefore(r)&&r.add(-1,"weeks");42>a;a++)n.push(s(r)),r.add(1,"days");return n},render:function(){a=+s().startOf("day");var e=this.props.viewMoment=d(this.props.viewDate,this.props.dateFormat);this.props.minDate&&(this.props.minDate=+d(this.props.minDate,this.props.dateFormat)),this.props.maxDate&&(this.props.maxDate=+d(this.props.maxDate,this.props.dateFormat)),this.props.minDate,this.monthFirst=s(e).startOf("month"),this.monthLast=s(e).endOf("month"),this.props.date&&(this.props.moment=s(this.props.date).startOf("day"));var t=this.getDaysInMonth(e);return o.createElement("table",{className:"dp-table dp-month-view"},o.createElement("tbody",null,this.renderWeekDayNames(),this.renderDays(t)))},renderDays:function(e){for(var t=e.map(this.renderDay,this),r=e.length,n=[],a=Math.ceil(r/7),s=0;a>s;s++)n.push(t.slice(7*s,7*(s+1)));return n.map(function(e,t){return o.createElement("tr",{key:"row"+t,className:"dp-week dp-row"},e)})},renderDay:function(e){var t=p.day(e),r=["dp-cell dp-day"],n=+e;n==a?r.push("dp-current"):n<this.monthFirst?r.push("dp-prev"):n>this.monthLast&&r.push("dp-next"),this.props.minDate&&e<this.props.minDate&&r.push("dp-disabled dp-before-min"),this.props.maxDate&&e>this.props.maxDate&&r.push("dp-disabled dp-after-max"),n==this.props.moment&&r.push("dp-value");var s={key:t,text:t,date:e,className:r.join(" "),style:{},onClick:this.handleClick.bind(this,e,n),children:t};"function"==typeof this.props.onRenderDay&&(s=this.props.onRenderDay(s));var i=o.DOM.td,c=this.props.renderDay||i,d=c(s);return void 0===d&&(d=i(s)),d},renderWeekDayNames:function(){var e=this.props.weekDayNames;return o.createElement("tr",{className:"dp-row dp-week-day-names"},e.map(function(e){return o.createElement("td",{key:e,className:"dp-cell dp-week-day-name"},e)}))},handleClick:function(e,t,r){this.props.minDate&&t<this.props.minDate||this.props.maxDate&&t>this.props.maxDate||(r.target.value=e,(this.props.onChange||n)(e,r))}});i({getHeaderText:function(e){return d(e).format("MMMM YYYY")}},u),e.exports=u},function(e,t,r){"use strict";function n(){}var a,o=r(5),s=r(1),i=r(2).copy,p=r(7),c=r(4),d=r(3),u=o.createClass({displayName:"YearView",getDefaultProps:function(){return c()},getMonthsInYear:function(e){for(var t=s(e).startOf("year"),r=[],n=0;12>n;n++)r.push(s(t)),t.add(1,"month");return r},render:function(){a=+s().startOf("day");var e=this.props.viewMoment=s(this.props.viewDate);this.props.date&&(this.props.moment=s(this.props.date).startOf("month"));var t=this.getMonthsInYear(e);return o.createElement("table",{className:"dp-table dp-year-view"},o.createElement("tbody",null,this.renderMonths(t)))},renderMonths:function(e){for(var t=e.map(this.renderMonth,this),r=e.length,n=[],a=Math.ceil(r/4),s=0;a>s;s++)n.push(t.slice(4*s,4*(s+1)));return n.map(function(e,t){return o.createElement("tr",{key:"row"+t},e)})},renderMonth:function(e){var t=p.month(e),r=["dp-cell dp-month"],n=+e;return n==this.props.moment&&r.push("dp-value"),o.createElement("td",{key:t,className:r.join(" "),onClick:this.handleClick.bind(this,e)},t)},handleClick:function(e,t){t.target.value=e,(this.props.onSelect||n)(e,t)}});i({getHeaderText:function(e){return d(e).format("YYYY")}},u),e.exports=u}])}); | ||
| !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("moment"),require("React")):"function"==typeof define&&define.amd?define(["moment","React"],t):"object"==typeof exports?exports.DatePicker=t(require("moment"),require("React")):e.DatePicker=t(e.moment,e.React)}(this,function(e,t){return function(e){function t(a){if(n[a])return n[a].exports;var r=n[a]={exports:{},id:a,loaded:!1};return e[a].call(r.exports,r,r.exports,t),r.loaded=!0,r.exports}var n={};return t.m=e,t.c=n,t.p="",t(0)}([function(e,t,n){"use strict";function a(){}var r=n(4),o=n(2),i=n(5),s=n(1),c=n(11),d=n(12),l=n(9),h=n(10),u=n(3),p=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},m={month:c,year:d,decade:l},f=(n(8),r.createClass({displayName:"DatePicker",propTypes:{todayText:r.PropTypes.string,gotoSelectedText:r.PropTypes.string,renderFooter:r.PropTypes.func,onChange:r.PropTypes.func,date:r.PropTypes.any,viewDate:r.PropTypes.any},getViewOrder:function(){return["month","year","decade"]},getDefaultProps:function(){var e=s({},i(),{navOnDateClick:!0,defaultStyle:{boxSizing:"border-box"}});return delete e.viewDate,delete e.date,e},getInitialState:function(){return{view:this.props.defaultView,viewDate:this.props.defaultViewDate}},getViewName:function(){return null!=this.props.view?this.props.view:this.state.view||"month"},addViewIndex:function(e){var t=this.getViewName(),n=this.getViewOrder(),a=n.indexOf(t);return a+=e,a%n.length},getNextViewName:function(){return this.getViewOrder()[this.addViewIndex(1)]},getPrevViewName:function(){return this.getViewOrder()[this.addViewIndex(-1)]},getView:function(){return m[this.getViewName()]||m.month},getViewFactory:function(){var e=this.getView();return r.createFactory&&(e.__factory=e.__factory||r.createFactory(e),e=e.__factory),e},getViewDate:function(){var e=p(this.props,"viewDate")?this.props.viewDate:this.state.viewDate;return e=this.toMoment(e||this.viewMoment||this.props.date||new Date)},render:function(){var e=s({},this.props);this.toMoment=function(t,n){return u(t,n||e.dateFormat,{locale:e.locale})};var t=this.getViewFactory();e.viewDate=this.viewMoment=this.getViewDate(),e.locale=this.props.locale,e.localeData=o.localeData(e.locale),e.renderDay=this.props.renderDay,e.onRenderDay=this.props.onRenderDay,e.onChange=this.handleChange,e.onSelect=this.handleSelect;var n=(this.props.className||"")+" date-picker";e.style=this.prepareStyle(e);var a=i(e);return a.localeData=e.localeData,r.createElement("div",r.__spread({className:n,style:e.style},this.props),r.createElement("div",{className:"dp-inner",style:{width:"100%",height:"100%",display:"flex",flexFlow:"column"}},this.renderHeader(t),r.createElement("div",{className:"dp-body",style:{flex:1}},r.createElement("div",{className:"dp-anim-target"},t(a))),this.renderFooter(e)))},prepareStyle:function(e){var t=s({},e.defaultStyle,e.style);return t},renderFooter:function(e){if(!this.props.hideFooter){this.props.today&&console.warn('Please use "todayText" prop instead of "today"!'),this.props.gotoSelected&&console.warn('Please use "gotoSelectedText" prop instead of "gotoSelected"!');var t,n=this.props.todayText||"Today",a=this.props.gotoSelectedText||"Go to selected",o={todayText:n,gotoSelectedText:a,onTodayClick:this.gotoNow,onGotoSelectedClick:this.gotoSelected,date:e.date,viewDate:e.viewDate};return"function"==typeof this.props.renderFooter&&(t=this.props.renderFooter(o)),void 0!==t?t:r.createElement("div",{className:"dp-footer"},r.createElement("div",{className:"dp-footer-today",onClick:this.gotoNow},n),r.createElement("div",{className:"dp-footer-selected",onClick:this.gotoSelected},a))}},gotoNow:function(){this.gotoDate(+new Date)},gotoSelected:function(){this.gotoDate(this.props.date||+new Date)},gotoDate:function(e){this.setView("month"),this.setViewDate(e)},getViewColspan:function(){var e={month:5,year:2,decade:2};return e[this.getViewName()]},renderHeader:function(){var e=this.getViewDate(),t=this.getView().getHeaderText(e),n=this.getViewColspan(),a=this.props.navPrev,o=this.props.navNext;return r.createElement(h,{prevText:a,nextText:o,colspan:n,onPrev:this.handleNavPrev,onNext:this.handleNavNext,onChange:this.handleViewChange},t)},handleRenderDay:function(e){return(this.props.renderDay||a)(e)||[]},handleViewChange:function(){this.setView(this.getNextViewName())},setView:function(e){"function"==typeof this.props.onViewChange&&this.props.onViewChange(e),null==this.props.view&&this.setState({view:e})},setViewDate:function(e){e=this.toMoment(e);var t=this.props.onViewDateChange;if("function"==typeof t){var n=e.format(this.props.dateFormat),a=this.getViewName();t(n,e,a)}p(this.props,"viewDate")||this.setState({viewDate:e})},getNext:function(){var e=this.getViewDate(),t=this.toMoment;return{month:function(){return t(e).add(1,"month")},year:function(){return t(e).add(1,"year")},decade:function(){return t(e).add(10,"year")}}[this.getViewName()]()},getPrev:function(){var e=this.getViewDate(),t=this.toMoment;return{month:function(){return t(e).add(-1,"month")},year:function(){return t(e).add(-1,"year")},decade:function(){return t(e).add(-10,"year")}}[this.getViewName()]()},handleNavigation:function(e,t){var n=-1==e?this.getPrev():this.getNext();if(this.setViewDate(n),"function"==typeof this.props.onNav){var a=n.format(this.props.dateFormat),r=this.getViewName();this.props.onNav(a,n,r,e,t)}},handleNavPrev:function(e){this.handleNavigation(-1,e)},handleNavNext:function(e){this.handleNavigation(1,e)},handleChange:function(e,t){if(e=this.toMoment(e),this.props.navOnDateClick){var n=this.toMoment(this.getViewDate()),r=n.format("YYYY-MM"),o=e.format("YYYY-MM");o>r?this.handleNavNext(t):r>o&&this.handleNavPrev(t)}var i=e.format(this.props.dateFormat);(this.props.onChange||a)(i,e,t)},handleSelect:function(e,t){var n=this.getViewName(),a={decade:"year",year:"month"}[n],r=e.get(a),o=this.toMoment(this.getViewDate()).set(a,r),i=this.getPrevViewName();if(this.setViewDate(o),this.setView(i),"function"==typeof this.props.onSelect){var s=o.format(this.props.dateFormat);this.props.onSelect(s,o,i,t)}}}));e.exports=f},function(e){"use strict";function t(e){if(null==e)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}e.exports=Object.assign||function(e){for(var n,a,r=t(e),o=1;o<arguments.length;o++){n=arguments[o],a=Object.keys(Object(n));for(var i=0;i<a.length;i++)r[a[i]]=n[a[i]]}return r}},function(t){t.exports=e},function(e,t,n){"use strict";var a=n(2),r=n(6);e.exports=function(e,t,n){var o=!(!n||!n.strict),i=n&&n.locale;return t=t||r.dateFormat,"string"==typeof e?a(e,t,i,o):a(null==e?new Date:e)}},function(e){e.exports=t},function(e,t,n){"use strict";function a(e,t,n){return e&&n.forEach(function(n){t[n]=e[n]}),t}var r=n(1),o=n(6),i=Object.keys(o);e.exports=function(e,t){var n=i;return t&&(n=Object.keys(t)),t=t||o,e?a(e,r({},t),n):r({},t)}},function(e,t,n){"use strict";var a=n(8);e.exports={weekDayNames:a,weekStartDay:null,locale:null,dayFormat:"D",monthFormat:"MMMM",yearFormat:"YYYY",navPrev:"‹",navNext:"›",view:"month",date:null,minDate:null,maxDate:null,viewDate:null,dateFormat:"YYYY-MM-DD"}},function(e,t,n){"use strict";function a(e,t){return o(e).format(t)}var r=n(6),o=n(3);e.exports={day:function(e,t){return a(e,t||r.dayFormat)},month:function(e,t){return a(e,t||r.monthFormat)},year:function(e,t){return a(e,t||r.yearFormat)}}},function(e,t,n){"use strict";var a=n(2),r=1*a().startOf("week").format("d");e.exports=function(e,t){var n;if(t){var o=a.localeData(t);n=o&&o._weekdaysShort?o._weekdaysShort:n}n=n||a.weekdaysShort();for(var i=n,s=null==e?r:e;s>0;)i.push(i.shift()),s--;return i}},function(e,t,n){"use strict";function a(){}var r,o=n(4),i=n(2),s=n(1),c=n(7),d=n(5),s=(n(3),n(1)),l=o.createClass({displayName:"DecadeView",getDefaultProps:function(){return d()},getYearsInDecade:function(e){var t=i(e).get("year"),n=t%10;t=t-n-1;for(var a=[],r=0,o=i(t,"YYYY").startOf("year");12>r;r++)a.push(i(o)),o.add(1,"year");return a},render:function(){r=+i().startOf("day");var e=s({},this.props),t=e.viewMoment=i(this.props.viewDate);e.date&&(e.moment=i(e.date).startOf("year"));var n=this.getYearsInDecade(t);return o.createElement("table",{className:"dp-table dp-decade-view"},o.createElement("tbody",null,this.renderYears(e,n)))},renderYears:function(e,t){for(var n=t.map(function(t,n,a){return this.renderYear(e,t,n,a)},this),a=t.length,r=[],i=Math.ceil(a/4),s=0;i>s;s++)r.push(n.slice(4*s,4*(s+1)));return r.map(function(e,t){return o.createElement("tr",{key:"row"+t},e)})},renderYear:function(e,t,n,a){var r=c.year(t,e.yearFormat),i=["dp-cell dp-year"],s=+t;return s==e.moment&&i.push("dp-value"),n||i.push("dp-prev"),n==a.length-1&&i.push("dp-next"),o.createElement("td",{key:r,className:i.join(" "),onClick:this.handleClick.bind(this,e,t)},r)},handleClick:function(e,t){t.target.value=e,(props.onSelect||a)(e,t)}});l.getHeaderText=function(e){var t=i(e).get("year"),n=t%10;return t=t-n-1,t+" - "+(t+11)},e.exports=l},function(e,t,n){"use strict";var a=n(4),r=a.PropTypes;e.exports=a.createClass({displayName:"DatePickerHeader",propTypes:{onChange:r.func,onPrev:r.func,onNext:r.func,colspan:r.number,children:r.node},render:function(){var e=this.props;return a.createElement("div",{className:"dp-header"},a.createElement("table",{className:"dp-nav-table"},a.createElement("tbody",null,a.createElement("tr",{className:"dp-row"},a.createElement("td",{className:"dp-prev-nav dp-nav-cell dp-cell",onClick:e.onPrev},e.prevText),a.createElement("td",{className:"dp-nav-view dp-cell",colSpan:e.colspan,onClick:e.onChange},e.children),a.createElement("td",{className:"dp-next-nav dp-nav-cell dp-cell",onClick:e.onNext},e.nextText)))))}})},function(e,t,n){"use strict";function a(){}var r,o=n(4),i=(n(2),n(1)),s=n(7),c=n(5),d=n(3),l=o.createClass({displayName:"MonthView",formatAsDay:function(e,t){return e.format(t||"D")},getDefaultProps:function(){return c()},getWeekStartMoment:function(e){var t=this.weekStartDay,n=this.toMoment(e).day(t);return n},getDaysInMonth:function(e){var t=this.toMoment(e).startOf("month"),n=this.getWeekStartMoment(t),a=[],r=0;for(t.add(-1,"days").isBefore(n)&&n.add(-1,"weeks");42>r;r++)a.push(this.toMoment(n)),n.add(1,"days");return a},render:function(){var e=i({},this.props);this.toMoment=function(t,n){return d(t,n||e.dateFormat,{locale:e.locale})},r=+this.toMoment().startOf("day");var t=e.dateFormat,n=e.viewMoment=this.toMoment(e.viewDate,t),a=e.weekStartDay;null==a&&(a=e.localeData._week?e.localeData._week.dow:null),this.weekStartDay=e.weekStartDay=a,e.minDate&&(e.minDate=+this.toMoment(e.minDate,t)),e.maxDate&&(e.maxDate=+this.toMoment(e.maxDate,t)),this.monthFirst=this.toMoment(n).startOf("month"),this.monthLast=this.toMoment(n).endOf("month"),e.date&&(e.moment=this.toMoment(e.date).startOf("day"));var s=this.getDaysInMonth(n);return o.createElement("table",{className:"dp-table dp-month-view"},o.createElement("tbody",null,this.renderWeekDayNames(),this.renderDays(e,s)))},renderDays:function(e,t){for(var n=t.map(function(t){return this.renderDay(e,t)},this),a=t.length,r=[],i=Math.ceil(a/7),s=0;i>s;s++)r.push(n.slice(7*s,7*(s+1)));return r.map(function(e,t){return o.createElement("tr",{key:"row"+t,className:"dp-week dp-row"},e)})},renderDay:function(e,t){var n=s.day(t,e.dayFormat),a=["dp-cell dp-day"],i=+t;i==r?a.push("dp-current"):i<this.monthFirst?a.push("dp-prev"):i>this.monthLast&&a.push("dp-next"),e.minDate&&t<e.minDate&&a.push("dp-disabled dp-before-min"),e.maxDate&&t>e.maxDate&&a.push("dp-disabled dp-after-max"),i==e.moment&&a.push("dp-value");var c={key:n,text:n,date:t,className:a.join(" "),style:{},onClick:this.handleClick.bind(this,e,t,i),children:n};"function"==typeof e.onRenderDay&&(c=e.onRenderDay(c));var d=o.DOM.td,l=e.renderDay||d,h=l(c);return void 0===h&&(h=d(c)),h},getWeekDayNames:function(e){e=e||this.props;var t=e.weekDayNames,n=this.weekStartDay;if("function"==typeof t)t=t(n,e.locale);else for(var a=n;a>0;)t.push(t.shift()),a--;return t},renderWeekDayNames:function(){var e=this.getWeekDayNames();return o.createElement("tr",{className:"dp-row dp-week-day-names"},e.map(function(e){return o.createElement("td",{key:e,className:"dp-cell dp-week-day-name"},e)}))},handleClick:function(e,t,n,r){e.minDate&&n<e.minDate||e.maxDate&&n>e.maxDate||(r.target.value=t,(e.onChange||a)(t,r))}});l.getHeaderText=function(e){return d(e).format("MMMM YYYY")},e.exports=l},function(e,t,n){"use strict";function a(){}var r,o=n(4),i=n(2),s=n(7),c=n(5),d=n(3),l=n(1),h=o.createClass({displayName:"YearView",getDefaultProps:function(){return c()},getMonthsInYear:function(e){for(var t=i(e).startOf("year"),n=[],a=0;12>a;a++)n.push(i(t)),t.add(1,"month");return n},render:function(){r=+i().startOf("day");var e=l({},this.props),t=e.viewMoment=i(this.props.viewDate);e.date&&(e.moment=i(e.date).startOf("month"));var n=this.getMonthsInYear(t);return o.createElement("table",{className:"dp-table dp-year-view"},o.createElement("tbody",null,this.renderMonths(e,n)))},renderMonths:function(e,t){for(var n=t.map(function(t){return this.renderMonth(e,t)},this),a=t.length,r=[],i=Math.ceil(a/4),s=0;i>s;s++)r.push(n.slice(4*s,4*(s+1)));return r.map(function(e,t){return o.createElement("tr",{key:"row"+t},e)})},renderMonth:function(e,t){var n=s.month(t,e.monthFormat),a=["dp-cell dp-month"],r=+t;return r==e.moment&&a.push("dp-value"),o.createElement("td",{key:n,className:a.join(" "),onClick:this.handleClick.bind(this,e,t)},n)},handleClick:function(e,t){t.target.value=e,(props.onSelect||a)(e,t)}});h.getHeaderText=function(e){return d(e).format("YYYY")},e.exports=h}])}); |
@@ -5,7 +5,11 @@ 'use strict' | ||
| window.moment = require('moment') | ||
| require('moment/locale/ro') | ||
| var React = require('react') | ||
| var DatePicker = require('./src/index') | ||
| var DATE = Date.now() | ||
| var VALUE = Date.now() | ||
| var VIEW_DATE = null | ||
| var VIEW = 'month' | ||
@@ -19,9 +23,10 @@ var App = React.createClass({ | ||
| function onNav(moment, text, view){ | ||
| console.log('nav to ', text) | ||
| function onNav(text, moment, view){ | ||
| // console.log(arguments); | ||
| // console.log(moment, text, view) | ||
| } | ||
| function onSelect(moment, text, view){ | ||
| console.log('SELECT') | ||
| console.log(moment, text, view) | ||
| function onSelect(text, moment, view){ | ||
| // console.log('SELECT', arguments) | ||
| // console.log(moment, text, view) | ||
| } | ||
@@ -41,8 +46,27 @@ | ||
| var onViewChange = function(view){ | ||
| VIEW = view | ||
| // console.log(arguments); | ||
| this.setState({}) | ||
| }.bind(this) | ||
| var onViewDateChange = function(d){ | ||
| console.log(arguments); | ||
| VIEW_DATE = d | ||
| this.setState({}) | ||
| }.bind(this) | ||
| return <div style={{margin: 10}}> | ||
| <DatePicker | ||
| onNav={onNav} | ||
| onSelect={onSelect} | ||
| view={VIEW} | ||
| onViewChange={onViewChange} | ||
| onViewDateChange={onViewDateChange} | ||
| onRenderDay={renderDay} | ||
| date={v} onChange={this.onChange}/> | ||
| xweekStartDay={0} | ||
| xlocale="fr" | ||
| xweekDayNames={['SUND','mon','marti','miercuri','joi','vineri','sam']} | ||
| minDate='2013-04-04' maxDate='2015-10-10' date={v} onChange={this.onChange}/> | ||
@@ -54,4 +78,3 @@ <button onClick={clear}>clear</button> | ||
| onChange: function(date, dateString) { | ||
| console.log('change',dateString) | ||
| DATE = dateString | ||
| // console.log(dateString, 'change') | ||
| VALUE = dateString | ||
@@ -58,0 +81,0 @@ this.setState({}) |
@@ -5,10 +5,14 @@ 'use strict' | ||
| // console.log(getWeekDayNames()) | ||
| module.exports = { | ||
| //the names of week days to be displayed in month view - first should be sunday | ||
| weekDayNames: getWeekDayNames(), | ||
| weekDayNames: getWeekDayNames, | ||
| //the day to display as first day of week. defaults to 0, which is sunday | ||
| weekStartDay: 0, | ||
| weekStartDay: null, | ||
| locale: null, | ||
| //the format in which days should be displayed in month view | ||
@@ -15,0 +19,0 @@ dayFormat: 'D', |
@@ -5,3 +5,3 @@ 'use strict' | ||
| var moment = require('moment') | ||
| var copy = require('copy-utils').copy | ||
| var assign = require('object-assign') | ||
@@ -11,2 +11,3 @@ var FORMAT = require('./utils/format') | ||
| var toMoment = require('./toMoment') | ||
| var assign = require('object-assign') | ||
@@ -54,6 +55,8 @@ var TODAY | ||
| var viewMoment = this.props.viewMoment = moment(this.props.viewDate) | ||
| var props = assign({}, this.props) | ||
| if (this.props.date){ | ||
| this.props.moment = moment(this.props.date).startOf('year') | ||
| var viewMoment = props.viewMoment = moment(this.props.viewDate) | ||
| if (props.date){ | ||
| props.moment = moment(props.date).startOf('year') | ||
| } | ||
@@ -66,4 +69,3 @@ | ||
| React.createElement("tbody", null, | ||
| this.renderYears(yearsInView) | ||
| this.renderYears(props, yearsInView) | ||
| ) | ||
@@ -79,4 +81,6 @@ ) | ||
| */ | ||
| renderYears: function(days) { | ||
| var nodes = days.map(this.renderYear, this) | ||
| renderYears: function(props, days) { | ||
| var nodes = days.map(function(date, index, arr){ | ||
| return this.renderYear(props, date, index, arr) | ||
| }, this) | ||
| var len = days.length | ||
@@ -97,4 +101,4 @@ var buckets = [] | ||
| renderYear: function(date, index, arr) { | ||
| var yearText = FORMAT.year(date) | ||
| renderYear: function(props, date, index, arr) { | ||
| var yearText = FORMAT.year(date, props.yearFormat) | ||
| var classes = ["dp-cell dp-year"] | ||
@@ -104,3 +108,3 @@ | ||
| if (dateTimestamp == this.props.moment){ | ||
| if (dateTimestamp == props.moment){ | ||
| classes.push('dp-value') | ||
@@ -118,3 +122,3 @@ } | ||
| return ( | ||
| React.createElement("td", {key: yearText, className: classes.join(' '), onClick: this.handleClick.bind(this, date)}, | ||
| React.createElement("td", {key: yearText, className: classes.join(' '), onClick: this.handleClick.bind(this, props, date)}, | ||
| yearText | ||
@@ -127,17 +131,15 @@ ) | ||
| event.target.value = date | ||
| ;(this.props.onSelect || emptyFn)(date, event) | ||
| ;(props.onSelect || emptyFn)(date, event) | ||
| } | ||
| }) | ||
| copy({ | ||
| getHeaderText: function(value) { | ||
| var year = moment(value).get('year') | ||
| var offset = year % 10 | ||
| DecadeView.getHeaderText = function(value) { | ||
| var year = moment(value).get('year') | ||
| var offset = year % 10 | ||
| year = year - offset - 1 | ||
| year = year - offset - 1 | ||
| return year + ' - ' + (year + 11) | ||
| } | ||
| }, DecadeView) | ||
| return year + ' - ' + (year + 11) | ||
| } | ||
| module.exports = DecadeView |
248
lib/index.js
@@ -5,9 +5,5 @@ 'use strict' | ||
| var moment = require('moment') | ||
| var copyUtils = require('copy-utils') | ||
| var copy = copyUtils.copy | ||
| var copyList = copyUtils.copyList | ||
| var moment = require('moment') | ||
| var asConfig = require('./utils/asConfig') | ||
| var assign = require('object-assign') | ||
@@ -17,3 +13,10 @@ var MonthView = require('./MonthView') | ||
| var DecadeView = require('./DecadeView') | ||
| var Header = require('./Header') | ||
| var toMoment = require('./toMoment') | ||
| var hasOwn = function(obj, key){ | ||
| return Object.prototype.hasOwnProperty.call(obj, key) | ||
| } | ||
| // if (React.createFactory){ | ||
@@ -50,17 +53,31 @@ // MonthView = React.createFactory(MonthView) | ||
| getInitialState: function() { | ||
| return { | ||
| } | ||
| getViewOrder: function() { | ||
| return ['month', 'year', 'decade'] | ||
| }, | ||
| getDefaultProps: function() { | ||
| return asConfig() | ||
| var props = assign({}, asConfig(), { | ||
| navOnDateClick: true, | ||
| defaultStyle: { | ||
| boxSizing: 'border-box' | ||
| } | ||
| }) | ||
| delete props.viewDate | ||
| delete props.date | ||
| return props | ||
| }, | ||
| getViewName: function() { | ||
| return this.state.view || this.props.view || 'month' | ||
| getInitialState: function() { | ||
| return { | ||
| view: this.props.defaultView, | ||
| viewDate: this.props.defaultViewDate | ||
| } | ||
| }, | ||
| getViewOrder: function() { | ||
| return ['month', 'year', 'decade'] | ||
| getViewName: function() { | ||
| return this.props.view != null? | ||
| this.props.view: | ||
| this.state.view || 'month' | ||
| }, | ||
@@ -103,3 +120,9 @@ | ||
| getViewDate: function() { | ||
| return this.state.viewMoment || this.viewMoment || this.props.viewDate || this.props.date || this.now | ||
| var date = hasOwn(this.props, 'viewDate')? | ||
| this.props.viewDate: | ||
| this.state.viewDate | ||
| date = this.toMoment(date || this.viewMoment || this.props.date || new Date()) | ||
| return date | ||
| }, | ||
@@ -109,10 +132,15 @@ | ||
| this.now = +new Date() | ||
| var props = assign({}, this.props) | ||
| var view = this.getViewFactory() | ||
| var props = asConfig(this.props) | ||
| this.toMoment = function(value, dateFormat){ | ||
| return toMoment(value, dateFormat || props.dateFormat, { locale: props.locale }) | ||
| } | ||
| props.viewDate = this.viewMoment = this.getViewDate() | ||
| var view = this.getViewFactory() | ||
| props.renderDay = this.props.renderDay | ||
| props.viewDate = this.viewMoment = this.getViewDate() | ||
| props.locale = this.props.locale | ||
| props.localeData = moment.localeData(props.locale) | ||
| props.renderDay = this.props.renderDay | ||
| props.onRenderDay = this.props.onRenderDay | ||
@@ -125,10 +153,16 @@ | ||
| props.style = this.prepareStyle(props) | ||
| var viewProps = asConfig(props) | ||
| viewProps.localeData = props.localeData | ||
| return ( | ||
| React.createElement("div", React.__spread({className: className}, this.props), | ||
| React.createElement("div", {className: "dp-inner"}, | ||
| React.createElement("div", React.__spread({className: className, style: props.style}, this.props), | ||
| React.createElement("div", {className: "dp-inner", style: {width: '100%', height: '100%', display: 'flex', flexFlow: 'column'}}, | ||
| this.renderHeader(view), | ||
| React.createElement("div", {className: "dp-body"}, | ||
| React.createElement("div", {className: "dp-body", style: {flex: 1}}, | ||
| React.createElement("div", {className: "dp-anim-target"}, | ||
| view(props) | ||
| view(viewProps) | ||
| ) | ||
@@ -143,2 +177,8 @@ ), | ||
| prepareStyle: function(props) { | ||
| var style = assign({}, props.defaultStyle, props.style) | ||
| return style | ||
| }, | ||
| renderFooter: function(props) { | ||
@@ -198,6 +238,5 @@ if (this.props.hideFooter){ | ||
| gotoDate: function(value) { | ||
| this.setState({ | ||
| view: 'month', | ||
| viewMoment: moment(value) | ||
| }) | ||
| this.setView('month') | ||
| this.setViewDate(value) | ||
| }, | ||
@@ -224,14 +263,11 @@ | ||
| return ( | ||
| React.createElement("div", {className: "dp-header"}, | ||
| React.createElement("table", {className: "dp-nav-table"}, React.createElement("tbody", null, | ||
| React.createElement("tr", {className: "dp-row"}, | ||
| React.createElement("td", {className: "dp-prev-nav dp-nav-cell dp-cell", onClick: this.handleNavPrev}, prev), | ||
| React.createElement("td", {className: "dp-nav-view dp-cell ", colSpan: colspan, onClick: this.handleViewChange}, headerText), | ||
| React.createElement("td", {className: "dp-next-nav dp-nav-cell dp-cell", onClick: this.handleNavNext}, next) | ||
| ) | ||
| )) | ||
| ) | ||
| return React.createElement(Header, { | ||
| prevText: prev, | ||
| nextText: next, | ||
| colspan: colspan, | ||
| onPrev: this.handleNavPrev, | ||
| onNext: this.handleNavNext, | ||
| onChange: this.handleViewChange | ||
| }, | ||
| headerText | ||
| ) | ||
@@ -245,19 +281,61 @@ }, | ||
| handleViewChange: function() { | ||
| this.setState({ | ||
| view: this.getNextViewName() | ||
| }) | ||
| this.setView(this.getNextViewName()) | ||
| }, | ||
| /** | ||
| * Use this method to set the view. | ||
| * | ||
| * @param {String} view 'month'/'year'/'decade' | ||
| * | ||
| * It calls onViewChange, and if the view is uncontrolled, also sets it is state, | ||
| * so the datepicker gets re-rendered view the new view | ||
| * | ||
| */ | ||
| setView: function(view) { | ||
| if (typeof this.props.onViewChange == 'function'){ | ||
| this.props.onViewChange(view) | ||
| } | ||
| if (this.props.view == null){ | ||
| this.setState({ | ||
| view: view | ||
| }) | ||
| } | ||
| }, | ||
| setViewDate: function(moment) { | ||
| moment = this.toMoment(moment) | ||
| var fn = this.props.onViewDateChange | ||
| if (typeof fn == 'function'){ | ||
| var text = moment.format(this.props.dateFormat) | ||
| var view = this.getViewName() | ||
| fn(text, moment, view) | ||
| } | ||
| if (!hasOwn(this.props, 'viewDate')){ | ||
| this.setState({ | ||
| viewDate: moment | ||
| }) | ||
| } | ||
| }, | ||
| getNext: function() { | ||
| var current = this.getViewDate() | ||
| var toMoment = this.toMoment | ||
| return ({ | ||
| month: function() { | ||
| return moment(current).add(1, 'month') | ||
| return toMoment(current).add(1, 'month') | ||
| }, | ||
| year: function() { | ||
| return moment(current).add(1, 'year') | ||
| return toMoment(current).add(1, 'year') | ||
| }, | ||
| decade: function() { | ||
| return moment(current).add(10, 'year') | ||
| return toMoment(current).add(10, 'year') | ||
| } | ||
@@ -269,12 +347,13 @@ })[this.getViewName()]() | ||
| var current = this.getViewDate() | ||
| var toMoment = this.toMoment | ||
| return ({ | ||
| month: function() { | ||
| return moment(current).add(-1, 'month') | ||
| return toMoment(current).add(-1, 'month') | ||
| }, | ||
| year: function() { | ||
| return moment(current).add(-1, 'year') | ||
| return toMoment(current).add(-1, 'year') | ||
| }, | ||
| decade: function() { | ||
| return moment(current).add(-10, 'year') | ||
| return toMoment(current).add(-10, 'year') | ||
| } | ||
@@ -284,8 +363,8 @@ })[this.getViewName()]() | ||
| handleNavPrev: function(event) { | ||
| var viewMoment = this.getPrev() | ||
| handleNavigation: function(direction, event) { | ||
| var viewMoment = direction == -1? | ||
| this.getPrev(): | ||
| this.getNext() | ||
| this.setState({ | ||
| viewMoment: viewMoment | ||
| }) | ||
| this.setViewDate(viewMoment) | ||
@@ -296,36 +375,31 @@ if (typeof this.props.onNav === 'function'){ | ||
| this.props.onNav(viewMoment, text, view, -1, event) | ||
| this.props.onNav(text, viewMoment, view, direction, event) | ||
| } | ||
| }, | ||
| handleNavPrev: function(event) { | ||
| this.handleNavigation(-1, event) | ||
| }, | ||
| handleNavNext: function(event) { | ||
| var viewMoment = this.getNext() | ||
| this.setState({ | ||
| viewMoment: viewMoment | ||
| }) | ||
| if (typeof this.props.onNav === 'function'){ | ||
| var text = viewMoment.format(this.props.dateFormat) | ||
| var view = this.getViewName() | ||
| this.props.onNav(viewMoment, text, view, 1, event) | ||
| } | ||
| this.handleNavigation(1, event) | ||
| }, | ||
| handleChange: function(date, event) { | ||
| date = moment(date) | ||
| date = this.toMoment(date) | ||
| var viewDate = moment(this.getViewDate()) | ||
| if (this.props.navOnDateClick){ | ||
| var viewDate = this.toMoment(this.getViewDate()) | ||
| //it's not enough to compare months, since the year can change as well | ||
| // | ||
| //also it's ok to hardcode the format here | ||
| var viewMonth = viewDate.format('YYYY-MM') | ||
| var dateMonth = date.format('YYYY-MM') | ||
| //it's not enough to compare months, since the year can change as well | ||
| // | ||
| //also it's ok to hardcode the format here | ||
| var viewMonth = viewDate.format('YYYY-MM') | ||
| var dateMonth = date.format('YYYY-MM') | ||
| if (dateMonth > viewMonth){ | ||
| this.handleNavNext(event) | ||
| } else if (dateMonth < viewMonth){ | ||
| this.handleNavPrev(event) | ||
| if (dateMonth > viewMonth){ | ||
| this.handleNavNext(event) | ||
| } else if (dateMonth < viewMonth){ | ||
| this.handleNavPrev(event) | ||
| } | ||
| } | ||
@@ -335,3 +409,3 @@ | ||
| ;(this.props.onChange || emptyFn)(date, text, event) | ||
| ;(this.props.onChange || emptyFn)(text, date, event) | ||
| }, | ||
@@ -341,2 +415,3 @@ | ||
| var viewName = this.getViewName() | ||
| var property = ({ | ||
@@ -347,14 +422,13 @@ decade: 'year', | ||
| var value = date.get(property) | ||
| var viewMoment = moment(this.getViewDate()).set(property, value) | ||
| var view = this.getPrevViewName() | ||
| var value = date.get(property) | ||
| var viewMoment = this.toMoment(this.getViewDate()).set(property, value) | ||
| var view = this.getPrevViewName() | ||
| this.setState({ | ||
| viewMoment: viewMoment, | ||
| view: view | ||
| }) | ||
| this.setViewDate(viewMoment) | ||
| this.setView(view) | ||
| if (typeof this.props.onSelect === 'function'){ | ||
| var text = viewMoment.format(this.props.dateFormat) | ||
| this.props.onSelect(viewMoment, text, view, event) | ||
| this.props.onSelect(text, viewMoment, view, event) | ||
| } | ||
@@ -361,0 +435,0 @@ } |
@@ -5,3 +5,3 @@ 'use strict' | ||
| var moment = require('moment') | ||
| var copy = require('copy-utils').copy | ||
| var assign = require('object-assign') | ||
@@ -40,4 +40,13 @@ var FORMAT = require('./utils/format') | ||
| getWeekStartMoment: function(value){ | ||
| var clone = moment(value).startOf('week') | ||
| // var clone = moment(value).startOf('week') | ||
| var weekStartDay = this.weekStartDay | ||
| var clone = this.toMoment(value).day(weekStartDay) | ||
| // debugger | ||
| if (weekStartDay != null){ | ||
| // debugger | ||
| // clone.add(this.props.weekStartDay, 'days') | ||
| } | ||
| // if (DEFAULT_WEEK_START_DAY != this.weekStartDay){ | ||
@@ -57,3 +66,3 @@ // clone.add('days', this.weekStartDay - DEFAULT_WEEK_START_DAY) | ||
| getDaysInMonth: function(value){ | ||
| var first = moment(value).startOf('month') | ||
| var first = this.toMoment(value).startOf('month') | ||
| var start = this.getWeekStartMoment(first) | ||
@@ -69,3 +78,3 @@ var result = [] | ||
| for (; i < 42; i++){ | ||
| result.push(moment(start)) | ||
| result.push(this.toMoment(start)) | ||
| start.add(1, 'days') | ||
@@ -79,18 +88,30 @@ } | ||
| TODAY = +moment().startOf('day') | ||
| var props = assign({}, this.props) | ||
| var viewMoment = this.props.viewMoment = toMoment(this.props.viewDate, this.props.dateFormat) | ||
| this.toMoment = function(value, dateFormat){ | ||
| // debugger | ||
| return toMoment(value, dateFormat || props.dateFormat, { locale: props.locale }) | ||
| } | ||
| this.props.minDate && (this.props.minDate = +toMoment(this.props.minDate, this.props.dateFormat)) | ||
| this.props.maxDate && (this.props.maxDate = +toMoment(this.props.maxDate, this.props.dateFormat)) | ||
| TODAY = +this.toMoment().startOf('day') | ||
| if (this.props.minDate){ | ||
| // debugger | ||
| var dateFormat = props.dateFormat | ||
| var viewMoment = props.viewMoment = this.toMoment(props.viewDate, dateFormat) | ||
| var weekStartDay = props.weekStartDay | ||
| if (weekStartDay == null){ | ||
| weekStartDay = props.localeData._week? props.localeData._week.dow: null | ||
| } | ||
| this.monthFirst = moment(viewMoment).startOf('month') | ||
| this.monthLast = moment(viewMoment).endOf('month') | ||
| this.weekStartDay = props.weekStartDay = weekStartDay | ||
| if (this.props.date){ | ||
| this.props.moment = moment(this.props.date).startOf('day') | ||
| props.minDate && (props.minDate = +this.toMoment(props.minDate, dateFormat)) | ||
| props.maxDate && (props.maxDate = +this.toMoment(props.maxDate, dateFormat)) | ||
| this.monthFirst = this.toMoment(viewMoment).startOf('month') | ||
| this.monthLast = this.toMoment(viewMoment).endOf('month') | ||
| if (props.date){ | ||
| props.moment = this.toMoment(props.date).startOf('day') | ||
| } | ||
@@ -104,5 +125,3 @@ | ||
| this.renderWeekDayNames(), | ||
| this.renderDays(daysInView) | ||
| this.renderDays(props, daysInView) | ||
| ) | ||
@@ -118,4 +137,7 @@ ) | ||
| */ | ||
| renderDays: function(days) { | ||
| var nodes = days.map(this.renderDay, this) | ||
| renderDays: function(props, days) { | ||
| var nodes = days.map(function(date){ | ||
| return this.renderDay(props, date) | ||
| }, this) | ||
| var len = days.length | ||
@@ -136,4 +158,4 @@ var buckets = [] | ||
| renderDay: function(date) { | ||
| var dayText = FORMAT.day(date) | ||
| renderDay: function(props, date) { | ||
| var dayText = FORMAT.day(date, props.dayFormat) | ||
| var classes = ["dp-cell dp-day"] | ||
@@ -151,10 +173,10 @@ | ||
| if (this.props.minDate && date < this.props.minDate){ | ||
| if (props.minDate && date < props.minDate){ | ||
| classes.push('dp-disabled dp-before-min') | ||
| } | ||
| if (this.props.maxDate && date > this.props.maxDate){ | ||
| if (props.maxDate && date > props.maxDate){ | ||
| classes.push('dp-disabled dp-after-max') | ||
| } | ||
| if (dateTimestamp == this.props.moment){ | ||
| if (dateTimestamp == props.moment){ | ||
| classes.push('dp-value') | ||
@@ -169,12 +191,12 @@ } | ||
| style : {}, | ||
| onClick : this.handleClick.bind(this, date, dateTimestamp), | ||
| onClick : this.handleClick.bind(this, props, date, dateTimestamp), | ||
| children : dayText | ||
| } | ||
| if (typeof this.props.onRenderDay === 'function'){ | ||
| renderDayProps = this.props.onRenderDay(renderDayProps) | ||
| if (typeof props.onRenderDay === 'function'){ | ||
| renderDayProps = props.onRenderDay(renderDayProps) | ||
| } | ||
| var defaultRenderFunction = React.DOM.td | ||
| var renderFunction = this.props.renderDay || defaultRenderFunction | ||
| var renderFunction = props.renderDay || defaultRenderFunction | ||
@@ -190,4 +212,24 @@ var result = renderFunction(renderDayProps) | ||
| getWeekDayNames: function(props) { | ||
| props = props || this.props | ||
| var names = props.weekDayNames | ||
| var weekStartDay = this.weekStartDay | ||
| if (typeof names == 'function'){ | ||
| names = names(weekStartDay, props.locale) | ||
| } else { | ||
| var index = weekStartDay | ||
| while (index > 0){ | ||
| names.push(names.shift()) | ||
| index-- | ||
| } | ||
| } | ||
| return names | ||
| }, | ||
| renderWeekDayNames: function(){ | ||
| var names = this.props.weekDayNames | ||
| var names = this.getWeekDayNames() | ||
@@ -201,7 +243,7 @@ return ( | ||
| handleClick: function(date, timestamp, event) { | ||
| if (this.props.minDate && timestamp < this.props.minDate){ | ||
| handleClick: function(props, date, timestamp, event) { | ||
| if (props.minDate && timestamp < props.minDate){ | ||
| return | ||
| } | ||
| if (this.props.maxDate && timestamp > this.props.maxDate){ | ||
| if (props.maxDate && timestamp > props.maxDate){ | ||
| return | ||
@@ -212,12 +254,10 @@ } | ||
| ;(this.props.onChange || emptyFn)(date, event) | ||
| ;(props.onChange || emptyFn)(date, event) | ||
| } | ||
| }) | ||
| copy({ | ||
| getHeaderText: function(moment) { | ||
| return toMoment(moment).format('MMMM YYYY') | ||
| } | ||
| }, MonthView) | ||
| MonthView.getHeaderText = function(moment) { | ||
| return toMoment(moment).format('MMMM YYYY') | ||
| } | ||
| module.exports = MonthView |
@@ -19,2 +19,3 @@ 'use strict' | ||
| var strict = !!(config && config.strict) | ||
| var locale = config && config.locale | ||
@@ -24,6 +25,8 @@ dateFormat = dateFormat || CONFIG.dateFormat | ||
| if (typeof value == 'string'){ | ||
| return moment(value, dateFormat, strict) | ||
| return moment(value, dateFormat, locale, strict) | ||
| } | ||
| return moment(value == null? new Date(): value) | ||
| // return moment.isMoment(value)? | ||
| // value: | ||
| return moment(value == null? new Date(): value)//, undefined, locale, strict) | ||
| } |
| 'use strict' | ||
| var copyUtils = require('copy-utils') | ||
| var copy = copyUtils.copy | ||
| var copyList = copyUtils.copyList | ||
| var assign = require('object-assign') | ||
@@ -10,2 +8,12 @@ var CONFIG = require('../config') | ||
| function copyList(src, target, list){ | ||
| if (src){ | ||
| list.forEach(function(key){ | ||
| target[key] = src[key] | ||
| }) | ||
| } | ||
| return target | ||
| } | ||
| /** | ||
@@ -33,6 +41,6 @@ * Returns an object that copies from given source object | ||
| if (!source){ | ||
| return copy(cfg) | ||
| return assign({}, cfg) | ||
| } | ||
| return copyList(source, copy(cfg), keys) | ||
| } | ||
| return copyList(source, assign({}, cfg), keys) | ||
| } |
@@ -7,7 +7,17 @@ 'use strict' | ||
| module.exports = function getWeekDayNames(startDay){ | ||
| module.exports = function getWeekDayNames(startDay, locale){ | ||
| var names = moment.weekdaysShort() | ||
| var index = startDay || DEFAULT_WEEK_START_DAY | ||
| var weekDays | ||
| if (locale){ | ||
| var data = moment.localeData(locale) | ||
| weekDays = data && data._weekdaysShort? data._weekdaysShort: weekDays | ||
| } | ||
| weekDays = weekDays || moment.weekdaysShort() | ||
| var names = weekDays | ||
| var index = startDay == null? DEFAULT_WEEK_START_DAY: startDay | ||
| while (index > 0){ | ||
@@ -14,0 +24,0 @@ names.push(names.shift()) |
@@ -5,3 +5,2 @@ 'use strict' | ||
| var moment = require('moment') | ||
| var copy = require('copy-utils').copy | ||
@@ -11,2 +10,3 @@ var FORMAT = require('./utils/format') | ||
| var toMoment = require('./toMoment') | ||
| var assign = require('object-assign') | ||
@@ -49,6 +49,8 @@ var TODAY | ||
| var viewMoment = this.props.viewMoment = moment(this.props.viewDate) | ||
| var props = assign({}, this.props) | ||
| if (this.props.date){ | ||
| this.props.moment = moment(this.props.date).startOf('month') | ||
| var viewMoment = props.viewMoment = moment(this.props.viewDate) | ||
| if (props.date){ | ||
| props.moment = moment(props.date).startOf('month') | ||
| } | ||
@@ -61,3 +63,3 @@ | ||
| React.createElement("tbody", null, | ||
| this.renderMonths(monthsInView) | ||
| this.renderMonths(props, monthsInView) | ||
@@ -74,4 +76,6 @@ ) | ||
| */ | ||
| renderMonths: function(days) { | ||
| var nodes = days.map(this.renderMonth, this) | ||
| renderMonths: function(props, days) { | ||
| var nodes = days.map(function(date){ | ||
| return this.renderMonth(props, date) | ||
| }, this) | ||
| var len = days.length | ||
@@ -92,4 +96,4 @@ var buckets = [] | ||
| renderMonth: function(date) { | ||
| var monthText = FORMAT.month(date) | ||
| renderMonth: function(props, date) { | ||
| var monthText = FORMAT.month(date, props.monthFormat) | ||
| var classes = ["dp-cell dp-month"] | ||
@@ -99,3 +103,3 @@ | ||
| if (dateTimestamp == this.props.moment){ | ||
| if (dateTimestamp == props.moment){ | ||
| classes.push('dp-value') | ||
@@ -105,3 +109,3 @@ } | ||
| return ( | ||
| React.createElement("td", {key: monthText, className: classes.join(' '), onClick: this.handleClick.bind(this, date)}, | ||
| React.createElement("td", {key: monthText, className: classes.join(' '), onClick: this.handleClick.bind(this, props, date)}, | ||
| monthText | ||
@@ -114,12 +118,11 @@ ) | ||
| event.target.value = date | ||
| ;(this.props.onSelect || emptyFn)(date, event) | ||
| ;(props.onSelect || emptyFn)(date, event) | ||
| } | ||
| }) | ||
| copy({ | ||
| getHeaderText: function(moment) { | ||
| return toMoment(moment).format('YYYY') | ||
| } | ||
| }, YearView) | ||
| YearView.getHeaderText = function(moment) { | ||
| return toMoment(moment).format('YYYY') | ||
| } | ||
| module.exports = YearView |
| { | ||
| "name": "react-date-picker", | ||
| "version": "1.4.5", | ||
| "version": "2.0.0", | ||
| "description": "React Date Picker", | ||
| "main": "lib/index.js", | ||
| "contributors": [ | ||
| "Radu Brehar <radu@evanghelic.ro>" | ||
| ], | ||
| "scripts": { | ||
@@ -22,8 +19,12 @@ "test": "make", | ||
| }, | ||
| "contributors": [ | ||
| "Radu Brehar <radu@evanghelic.ro>" | ||
| ], | ||
| "author": "ZippyUI <contact@zippyui.com>", | ||
| "license": "MIT", | ||
| "dependencies": { | ||
| "copy-utils": "~1.0.0", | ||
| "css-utils": "^0.4.2", | ||
| "normalize.css": "~3.0.2" | ||
| "moment": "^2.8.0", | ||
| "normalize.css": "~3.0.2", | ||
| "object-assign": "^2.0.0" | ||
| }, | ||
@@ -38,4 +39,4 @@ "peerDependencies": { | ||
| "file-loader": "~0.8.1", | ||
| "gulp": "^3.8.10", | ||
| "gulp-react": "^2.0.0", | ||
| "gulp": "^3.8.11", | ||
| "gulp-react": "^3.0.0", | ||
| "http-server": "~0.7.2", | ||
@@ -66,2 +67,2 @@ "json-loader": "~0.5.1", | ||
| "homepage": "https://github.com/zippyui/react-date-picker" | ||
| } | ||
| } |
107
README.md
| react-date-picker | ||
| ================= | ||
| > Date picker for React | ||
| > A carefully crafted date picker for React | ||
| See demo at [jslog.com/react-date-picker](http://jslog.com/react-date-picker) | ||
| <img src="http://npm.packagequality.com/badge/react-date-picker.png"/> | ||
| ## Install | ||
@@ -14,2 +16,6 @@ | ||
| ## Changelog | ||
| See [changelog](./CHANGELOG.md) | ||
| ## Usage | ||
@@ -21,3 +27,3 @@ | ||
| Also you need to have `React` included in the page. | ||
| If you use the files from the `dist` directory, (eg: `dist/react-date-picker.js`), you will need to make sure you have both `React` and `moment` global variables, so make sure you include [ReactJS](https://www.npmjs.com/package/react) and [MomentJS](https://www.npmjs.com/package/moment) | ||
@@ -31,17 +37,22 @@ The preferred **React** version for `react-date-picker` is >=0.12. The initial version of `react-date-picker` worked with React 0.11.2 as well, but I do not intend to continue to support it, in order to be able to focus on advancing the current features and developing other high-quality React components. | ||
| function onChange(moment, dateString){ | ||
| function onChange(dateString, moment){ | ||
| //... | ||
| } | ||
| <DatePicker | ||
| minDate='2014-04-04' | ||
| maxDate='2015-10-10' | ||
| date={date} | ||
| onChange={onChange} | ||
| minDate='2014-04-04' | ||
| maxDate='2015-10-10' | ||
| date={date} | ||
| onChange={onChange} | ||
| /> | ||
| ``` | ||
| ## Custom locale | ||
| ## I18n and localization | ||
| If you want to use a custom locale, simply require the appropriate momentjs locale before `require`-ing `react-date-picker` | ||
| For rendering the date picker with a custom locale, there are two options | ||
| #### require locale | ||
| The first option is to simply require the appropriate momentjs locale before `require`-ing `react-date-picker` | ||
| Example: | ||
@@ -53,23 +64,54 @@ | ||
| //and then require the date picker - it will use the locale you previously required | ||
| //and then require the date picker - it will use | ||
| //the locale you previously required | ||
| var DatePicker = require('react-date-picker') | ||
| ``` | ||
| ... | ||
| #### locale prop | ||
| The second option is specifying the `locale` prop on the date picker. This assumes you have momentjs with the locale already into page (for example, you are using `moment-with-locales.js`) | ||
| ```jsx | ||
| <DatePicker locale="fr" /> | ||
| ``` | ||
| ## Options | ||
| ### Other i18n props | ||
| * `weekDayNames` - either an array of week day names, or a function that returns an array. In case you specify `weekDayNames` as an array, it should have Sunday as the first day. If not specified, will be built with `momentjs`using `moment.weekdaysShort()` | ||
| * `weekStartDay`: Number - Sun 0, Monday 1, etc... If not specified, the locale specific value will be used. | ||
| * `locale`: String | ||
| ## Props | ||
| * hideFooter: Boolean - by default footer is shown, so specify this to true if you don't want the footer | ||
| * date : Date / String / Moment / Number | ||
| * viewDate: Date / String / Moment / Number | ||
| * minDate : Date / String / Moment / Number | ||
| * maxDate : Date / String / Moment / Number | ||
| * dateFormat: String [see moment.js formats](http://momentjs.com/docs/#/displaying/format/). Default date format is 'YYYY-MM-DD' | ||
| * onChange: Function(moment, dateText, event) - called when the user selects a date | ||
| * onSelect: Function(moment, dateText, view) - called when the user selects a year/month | ||
| * onNav: Function(moment, dateText, view, direction) - called when the user navigates to the next/previous month/year/decade. | ||
| * renderDay: Function - (optional) A function that should return a React DOM for the day cell. The first param is the props object. You can use this to have full control over what gets rendered for a day. | ||
| * onRenderDay: Function - (optional) A function that can manipulate the props object for a day, and SHOULD return a new props object. Use this for custom day styling. You can use this to take full control over the styles/css classes/attributes applied to the day cell in the month view. | ||
| * `minDate` : Date / String / Moment / Number | ||
| * `maxDate` : Date / String / Moment / Number | ||
| * `dateFormat`: String [see moment.js formats](http://momentjs.com/docs/#/displaying/format/). Default date format is 'YYYY-MM-DD' | ||
| * `onChange`: Function(dateText, moment, event) - called when the user selects a date | ||
| * `onSelect`: Function(dateText, moment, view) - called when the user selects a year/month | ||
| * `onNav`: Function(dateText, moment, view, direction) - called when the user navigates to the next/previous month/year/decade. | ||
| * `renderDay`: Function - (optional) A function that should return a React DOM for the day cell. The first param is the props object. You can use this to have full control over what gets rendered for a day. | ||
| * `onRenderDay`: Function - (optional) A function that can manipulate the props object for a day, and SHOULD return a new props object. Use this for custom day styling. You can use this to take full control over the styles/css classes/attributes applied to the day cell in the month view. | ||
| #### Formatting props | ||
| * `dayFormat` - The format in which days should be rendered (on the MonthView) | ||
| * `monthFormat` - The format in which months should be rendered (on the YearView) | ||
| * `yearFormat` - The format in which years should be rendered (on the DecadeView) | ||
| #### Props related to the view (the current date in view and the type of view) | ||
| * `defaultViewDate`: Date / String / Moment / Number - a date for the period to show in the picker. If none specified, defaults to `date` or to the current date. | ||
| * `viewDate`: Date / String / Moment / Number - controlled version for `defaultViewDate` | ||
| * `onViewDateChange`: Function(dateText, moment , view) - called when navigating to another viewDate. | ||
| * `defaultView`: String - the view to render initially in the datepicker - if no defaultView is specified, the "month" view is rendered. Possible values: "month", "year", "decade". | ||
| * `view`: String - controlled version for `defaultView`. | ||
| * `onViewChange`: Function - function called when the view is changed. If using the controlled `view` version, make sure you update the `view` prop in this function if you want to navigate to another view as expected. | ||
| * `navOnDateClick`: Boolean - defaults to true. If false, will not navigate to the date that was clicked, even if that date is in the prev/next month | ||
| ## Examples | ||
@@ -97,4 +139,2 @@ | ||
| ``` | ||
| ## Contributing | ||
@@ -108,8 +148,9 @@ | ||
| $ npm run serve # starts a local http server | ||
| $ npm run dev # starts webpack dev server, which does all the bundling | ||
| $ npm run dev # starts webpack-dev-server, which does all the bundling and live reloading | ||
| ``` | ||
| Now navigate to `http://localhost:8080/` | ||
| Now navigate to `http://localhost:8080/`. | ||
| With this setup, you have an environment which live-reloads all your changes, so you have a rapid development cycle. | ||
| In order to build a new version, make sure you run `npm run build` in order to build the `lib` directory from the `src` directory. | ||
| In order to build a new production version, make sure you run `npm run build` (it builds the `lib` directory from the `src` directory, it concats all files and builds the `dist` directory, and also prepares the css files) | ||
@@ -127,14 +168,4 @@ ## Other | ||
| ## License | ||
| ## Changelog | ||
| #### v1.4.0 | ||
| * `today` and `gotoSelected` are renamed as `todayText` and `gotoSelectedText`. Old names are now deprecated, and will be removed in a future minor version. | ||
| * add `renderFooter` prop, which can be used to render a different footer. | ||
| * change the behavior of `renderDay` prop: if it now returns undefined, we assume it just changed props, so we render the default cell, with the updated props. This means you can use `renderDay` both to affect the props object passed to day cells and/or the render a completely different cell | ||
| #### v1.3.0 | ||
| * `renderDay` & `onRenderDay` properties are available to allow full control over day-cell rendering | ||
| * `onNav` is called with new args: moment, text, view, direction - where moment is a date as a momentjs instance, text is the date formatted as text, the view is the view name ('month','year','decade') and direction is 1 (nav to next period) or -1 (nav to prev period) | ||
| * `onSelect` is called with new args: moment, text, view | ||
| ```MIT``` |
@@ -5,10 +5,14 @@ 'use strict' | ||
| // console.log(getWeekDayNames()) | ||
| module.exports = { | ||
| //the names of week days to be displayed in month view - first should be sunday | ||
| weekDayNames: getWeekDayNames(), | ||
| weekDayNames: getWeekDayNames, | ||
| //the day to display as first day of week. defaults to 0, which is sunday | ||
| weekStartDay: 0, | ||
| weekStartDay: null, | ||
| locale: null, | ||
| //the format in which days should be displayed in month view | ||
@@ -15,0 +19,0 @@ dayFormat: 'D', |
@@ -5,3 +5,3 @@ 'use strict' | ||
| var moment = require('moment') | ||
| var copy = require('copy-utils').copy | ||
| var assign = require('object-assign') | ||
@@ -11,2 +11,3 @@ var FORMAT = require('./utils/format') | ||
| var toMoment = require('./toMoment') | ||
| var assign = require('object-assign') | ||
@@ -54,6 +55,8 @@ var TODAY | ||
| var viewMoment = this.props.viewMoment = moment(this.props.viewDate) | ||
| var props = assign({}, this.props) | ||
| if (this.props.date){ | ||
| this.props.moment = moment(this.props.date).startOf('year') | ||
| var viewMoment = props.viewMoment = moment(this.props.viewDate) | ||
| if (props.date){ | ||
| props.moment = moment(props.date).startOf('year') | ||
| } | ||
@@ -66,4 +69,3 @@ | ||
| <tbody> | ||
| {this.renderYears(yearsInView)} | ||
| {this.renderYears(props, yearsInView)} | ||
| </tbody> | ||
@@ -79,4 +81,6 @@ </table> | ||
| */ | ||
| renderYears: function(days) { | ||
| var nodes = days.map(this.renderYear, this) | ||
| renderYears: function(props, days) { | ||
| var nodes = days.map(function(date, index, arr){ | ||
| return this.renderYear(props, date, index, arr) | ||
| }, this) | ||
| var len = days.length | ||
@@ -97,4 +101,4 @@ var buckets = [] | ||
| renderYear: function(date, index, arr) { | ||
| var yearText = FORMAT.year(date) | ||
| renderYear: function(props, date, index, arr) { | ||
| var yearText = FORMAT.year(date, props.yearFormat) | ||
| var classes = ["dp-cell dp-year"] | ||
@@ -104,3 +108,3 @@ | ||
| if (dateTimestamp == this.props.moment){ | ||
| if (dateTimestamp == props.moment){ | ||
| classes.push('dp-value') | ||
@@ -118,3 +122,3 @@ } | ||
| return ( | ||
| <td key={yearText} className={classes.join(' ')} onClick={this.handleClick.bind(this, date)}> | ||
| <td key={yearText} className={classes.join(' ')} onClick={this.handleClick.bind(this, props, date)}> | ||
| {yearText} | ||
@@ -127,17 +131,15 @@ </td> | ||
| event.target.value = date | ||
| ;(this.props.onSelect || emptyFn)(date, event) | ||
| ;(props.onSelect || emptyFn)(date, event) | ||
| } | ||
| }) | ||
| copy({ | ||
| getHeaderText: function(value) { | ||
| var year = moment(value).get('year') | ||
| var offset = year % 10 | ||
| DecadeView.getHeaderText = function(value) { | ||
| var year = moment(value).get('year') | ||
| var offset = year % 10 | ||
| year = year - offset - 1 | ||
| year = year - offset - 1 | ||
| return year + ' - ' + (year + 11) | ||
| } | ||
| }, DecadeView) | ||
| return year + ' - ' + (year + 11) | ||
| } | ||
| module.exports = DecadeView |
@@ -5,9 +5,5 @@ 'use strict' | ||
| var moment = require('moment') | ||
| var copyUtils = require('copy-utils') | ||
| var copy = copyUtils.copy | ||
| var copyList = copyUtils.copyList | ||
| var moment = require('moment') | ||
| var asConfig = require('./utils/asConfig') | ||
| var assign = require('object-assign') | ||
@@ -17,3 +13,10 @@ var MonthView = require('./MonthView') | ||
| var DecadeView = require('./DecadeView') | ||
| var Header = require('./Header') | ||
| var toMoment = require('./toMoment') | ||
| var hasOwn = function(obj, key){ | ||
| return Object.prototype.hasOwnProperty.call(obj, key) | ||
| } | ||
| // if (React.createFactory){ | ||
@@ -50,17 +53,31 @@ // MonthView = React.createFactory(MonthView) | ||
| getInitialState: function() { | ||
| return { | ||
| } | ||
| getViewOrder: function() { | ||
| return ['month', 'year', 'decade'] | ||
| }, | ||
| getDefaultProps: function() { | ||
| return asConfig() | ||
| var props = assign({}, asConfig(), { | ||
| navOnDateClick: true, | ||
| defaultStyle: { | ||
| boxSizing: 'border-box' | ||
| } | ||
| }) | ||
| delete props.viewDate | ||
| delete props.date | ||
| return props | ||
| }, | ||
| getViewName: function() { | ||
| return this.state.view || this.props.view || 'month' | ||
| getInitialState: function() { | ||
| return { | ||
| view: this.props.defaultView, | ||
| viewDate: this.props.defaultViewDate | ||
| } | ||
| }, | ||
| getViewOrder: function() { | ||
| return ['month', 'year', 'decade'] | ||
| getViewName: function() { | ||
| return this.props.view != null? | ||
| this.props.view: | ||
| this.state.view || 'month' | ||
| }, | ||
@@ -103,3 +120,9 @@ | ||
| getViewDate: function() { | ||
| return this.state.viewMoment || this.viewMoment || this.props.viewDate || this.props.date || this.now | ||
| var date = hasOwn(this.props, 'viewDate')? | ||
| this.props.viewDate: | ||
| this.state.viewDate | ||
| date = this.toMoment(date || this.viewMoment || this.props.date || new Date()) | ||
| return date | ||
| }, | ||
@@ -109,10 +132,15 @@ | ||
| this.now = +new Date() | ||
| var props = assign({}, this.props) | ||
| var view = this.getViewFactory() | ||
| var props = asConfig(this.props) | ||
| this.toMoment = function(value, dateFormat){ | ||
| return toMoment(value, dateFormat || props.dateFormat, { locale: props.locale }) | ||
| } | ||
| props.viewDate = this.viewMoment = this.getViewDate() | ||
| var view = this.getViewFactory() | ||
| props.renderDay = this.props.renderDay | ||
| props.viewDate = this.viewMoment = this.getViewDate() | ||
| props.locale = this.props.locale | ||
| props.localeData = moment.localeData(props.locale) | ||
| props.renderDay = this.props.renderDay | ||
| props.onRenderDay = this.props.onRenderDay | ||
@@ -125,10 +153,16 @@ | ||
| props.style = this.prepareStyle(props) | ||
| var viewProps = asConfig(props) | ||
| viewProps.localeData = props.localeData | ||
| return ( | ||
| <div className={className} {...this.props}> | ||
| <div className="dp-inner"> | ||
| <div className={className} style={props.style} {...this.props}> | ||
| <div className="dp-inner" style={{width: '100%', height: '100%', display: 'flex', flexFlow: 'column'}}> | ||
| {this.renderHeader(view)} | ||
| <div className="dp-body"> | ||
| <div className="dp-body" style={{flex: 1}}> | ||
| <div className="dp-anim-target"> | ||
| {view(props)} | ||
| {view(viewProps)} | ||
| </div> | ||
@@ -143,2 +177,8 @@ </div> | ||
| prepareStyle: function(props) { | ||
| var style = assign({}, props.defaultStyle, props.style) | ||
| return style | ||
| }, | ||
| renderFooter: function(props) { | ||
@@ -198,6 +238,5 @@ if (this.props.hideFooter){ | ||
| gotoDate: function(value) { | ||
| this.setState({ | ||
| view: 'month', | ||
| viewMoment: moment(value) | ||
| }) | ||
| this.setView('month') | ||
| this.setViewDate(value) | ||
| }, | ||
@@ -224,15 +263,12 @@ | ||
| return ( | ||
| <div className="dp-header"> | ||
| <table className="dp-nav-table"><tbody> | ||
| <tr className="dp-row"> | ||
| <td className="dp-prev-nav dp-nav-cell dp-cell" onClick={this.handleNavPrev}>{prev}</td> | ||
| <td className="dp-nav-view dp-cell " colSpan={colspan} onClick={this.handleViewChange}>{headerText}</td> | ||
| <td className="dp-next-nav dp-nav-cell dp-cell" onClick={this.handleNavNext}>{next}</td> | ||
| </tr> | ||
| </tbody></table> | ||
| </div> | ||
| ) | ||
| return <Header | ||
| prevText={prev} | ||
| nextText={next} | ||
| colspan={colspan} | ||
| onPrev={this.handleNavPrev} | ||
| onNext={this.handleNavNext} | ||
| onChange={this.handleViewChange} | ||
| > | ||
| {headerText} | ||
| </Header> | ||
| }, | ||
@@ -245,19 +281,61 @@ | ||
| handleViewChange: function() { | ||
| this.setState({ | ||
| view: this.getNextViewName() | ||
| }) | ||
| this.setView(this.getNextViewName()) | ||
| }, | ||
| /** | ||
| * Use this method to set the view. | ||
| * | ||
| * @param {String} view 'month'/'year'/'decade' | ||
| * | ||
| * It calls onViewChange, and if the view is uncontrolled, also sets it is state, | ||
| * so the datepicker gets re-rendered view the new view | ||
| * | ||
| */ | ||
| setView: function(view) { | ||
| if (typeof this.props.onViewChange == 'function'){ | ||
| this.props.onViewChange(view) | ||
| } | ||
| if (this.props.view == null){ | ||
| this.setState({ | ||
| view: view | ||
| }) | ||
| } | ||
| }, | ||
| setViewDate: function(moment) { | ||
| moment = this.toMoment(moment) | ||
| var fn = this.props.onViewDateChange | ||
| if (typeof fn == 'function'){ | ||
| var text = moment.format(this.props.dateFormat) | ||
| var view = this.getViewName() | ||
| fn(text, moment, view) | ||
| } | ||
| if (!hasOwn(this.props, 'viewDate')){ | ||
| this.setState({ | ||
| viewDate: moment | ||
| }) | ||
| } | ||
| }, | ||
| getNext: function() { | ||
| var current = this.getViewDate() | ||
| var toMoment = this.toMoment | ||
| return ({ | ||
| month: function() { | ||
| return moment(current).add(1, 'month') | ||
| return toMoment(current).add(1, 'month') | ||
| }, | ||
| year: function() { | ||
| return moment(current).add(1, 'year') | ||
| return toMoment(current).add(1, 'year') | ||
| }, | ||
| decade: function() { | ||
| return moment(current).add(10, 'year') | ||
| return toMoment(current).add(10, 'year') | ||
| } | ||
@@ -269,12 +347,13 @@ })[this.getViewName()]() | ||
| var current = this.getViewDate() | ||
| var toMoment = this.toMoment | ||
| return ({ | ||
| month: function() { | ||
| return moment(current).add(-1, 'month') | ||
| return toMoment(current).add(-1, 'month') | ||
| }, | ||
| year: function() { | ||
| return moment(current).add(-1, 'year') | ||
| return toMoment(current).add(-1, 'year') | ||
| }, | ||
| decade: function() { | ||
| return moment(current).add(-10, 'year') | ||
| return toMoment(current).add(-10, 'year') | ||
| } | ||
@@ -284,8 +363,8 @@ })[this.getViewName()]() | ||
| handleNavPrev: function(event) { | ||
| var viewMoment = this.getPrev() | ||
| handleNavigation: function(direction, event) { | ||
| var viewMoment = direction == -1? | ||
| this.getPrev(): | ||
| this.getNext() | ||
| this.setState({ | ||
| viewMoment: viewMoment | ||
| }) | ||
| this.setViewDate(viewMoment) | ||
@@ -296,36 +375,31 @@ if (typeof this.props.onNav === 'function'){ | ||
| this.props.onNav(viewMoment, text, view, -1, event) | ||
| this.props.onNav(text, viewMoment, view, direction, event) | ||
| } | ||
| }, | ||
| handleNavPrev: function(event) { | ||
| this.handleNavigation(-1, event) | ||
| }, | ||
| handleNavNext: function(event) { | ||
| var viewMoment = this.getNext() | ||
| this.setState({ | ||
| viewMoment: viewMoment | ||
| }) | ||
| if (typeof this.props.onNav === 'function'){ | ||
| var text = viewMoment.format(this.props.dateFormat) | ||
| var view = this.getViewName() | ||
| this.props.onNav(viewMoment, text, view, 1, event) | ||
| } | ||
| this.handleNavigation(1, event) | ||
| }, | ||
| handleChange: function(date, event) { | ||
| date = moment(date) | ||
| date = this.toMoment(date) | ||
| var viewDate = moment(this.getViewDate()) | ||
| if (this.props.navOnDateClick){ | ||
| var viewDate = this.toMoment(this.getViewDate()) | ||
| //it's not enough to compare months, since the year can change as well | ||
| // | ||
| //also it's ok to hardcode the format here | ||
| var viewMonth = viewDate.format('YYYY-MM') | ||
| var dateMonth = date.format('YYYY-MM') | ||
| //it's not enough to compare months, since the year can change as well | ||
| // | ||
| //also it's ok to hardcode the format here | ||
| var viewMonth = viewDate.format('YYYY-MM') | ||
| var dateMonth = date.format('YYYY-MM') | ||
| if (dateMonth > viewMonth){ | ||
| this.handleNavNext(event) | ||
| } else if (dateMonth < viewMonth){ | ||
| this.handleNavPrev(event) | ||
| if (dateMonth > viewMonth){ | ||
| this.handleNavNext(event) | ||
| } else if (dateMonth < viewMonth){ | ||
| this.handleNavPrev(event) | ||
| } | ||
| } | ||
@@ -335,3 +409,3 @@ | ||
| ;(this.props.onChange || emptyFn)(date, text, event) | ||
| ;(this.props.onChange || emptyFn)(text, date, event) | ||
| }, | ||
@@ -341,2 +415,3 @@ | ||
| var viewName = this.getViewName() | ||
| var property = ({ | ||
@@ -347,14 +422,13 @@ decade: 'year', | ||
| var value = date.get(property) | ||
| var viewMoment = moment(this.getViewDate()).set(property, value) | ||
| var view = this.getPrevViewName() | ||
| var value = date.get(property) | ||
| var viewMoment = this.toMoment(this.getViewDate()).set(property, value) | ||
| var view = this.getPrevViewName() | ||
| this.setState({ | ||
| viewMoment: viewMoment, | ||
| view: view | ||
| }) | ||
| this.setViewDate(viewMoment) | ||
| this.setView(view) | ||
| if (typeof this.props.onSelect === 'function'){ | ||
| var text = viewMoment.format(this.props.dateFormat) | ||
| this.props.onSelect(viewMoment, text, view, event) | ||
| this.props.onSelect(text, viewMoment, view, event) | ||
| } | ||
@@ -361,0 +435,0 @@ } |
@@ -5,3 +5,3 @@ 'use strict' | ||
| var moment = require('moment') | ||
| var copy = require('copy-utils').copy | ||
| var assign = require('object-assign') | ||
@@ -40,4 +40,13 @@ var FORMAT = require('./utils/format') | ||
| getWeekStartMoment: function(value){ | ||
| var clone = moment(value).startOf('week') | ||
| // var clone = moment(value).startOf('week') | ||
| var weekStartDay = this.weekStartDay | ||
| var clone = this.toMoment(value).day(weekStartDay) | ||
| // debugger | ||
| if (weekStartDay != null){ | ||
| // debugger | ||
| // clone.add(this.props.weekStartDay, 'days') | ||
| } | ||
| // if (DEFAULT_WEEK_START_DAY != this.weekStartDay){ | ||
@@ -57,3 +66,3 @@ // clone.add('days', this.weekStartDay - DEFAULT_WEEK_START_DAY) | ||
| getDaysInMonth: function(value){ | ||
| var first = moment(value).startOf('month') | ||
| var first = this.toMoment(value).startOf('month') | ||
| var start = this.getWeekStartMoment(first) | ||
@@ -69,3 +78,3 @@ var result = [] | ||
| for (; i < 42; i++){ | ||
| result.push(moment(start)) | ||
| result.push(this.toMoment(start)) | ||
| start.add(1, 'days') | ||
@@ -79,18 +88,30 @@ } | ||
| TODAY = +moment().startOf('day') | ||
| var props = assign({}, this.props) | ||
| var viewMoment = this.props.viewMoment = toMoment(this.props.viewDate, this.props.dateFormat) | ||
| this.toMoment = function(value, dateFormat){ | ||
| // debugger | ||
| return toMoment(value, dateFormat || props.dateFormat, { locale: props.locale }) | ||
| } | ||
| this.props.minDate && (this.props.minDate = +toMoment(this.props.minDate, this.props.dateFormat)) | ||
| this.props.maxDate && (this.props.maxDate = +toMoment(this.props.maxDate, this.props.dateFormat)) | ||
| TODAY = +this.toMoment().startOf('day') | ||
| if (this.props.minDate){ | ||
| // debugger | ||
| var dateFormat = props.dateFormat | ||
| var viewMoment = props.viewMoment = this.toMoment(props.viewDate, dateFormat) | ||
| var weekStartDay = props.weekStartDay | ||
| if (weekStartDay == null){ | ||
| weekStartDay = props.localeData._week? props.localeData._week.dow: null | ||
| } | ||
| this.monthFirst = moment(viewMoment).startOf('month') | ||
| this.monthLast = moment(viewMoment).endOf('month') | ||
| this.weekStartDay = props.weekStartDay = weekStartDay | ||
| if (this.props.date){ | ||
| this.props.moment = moment(this.props.date).startOf('day') | ||
| props.minDate && (props.minDate = +this.toMoment(props.minDate, dateFormat)) | ||
| props.maxDate && (props.maxDate = +this.toMoment(props.maxDate, dateFormat)) | ||
| this.monthFirst = this.toMoment(viewMoment).startOf('month') | ||
| this.monthLast = this.toMoment(viewMoment).endOf('month') | ||
| if (props.date){ | ||
| props.moment = this.toMoment(props.date).startOf('day') | ||
| } | ||
@@ -104,5 +125,3 @@ | ||
| {this.renderWeekDayNames()} | ||
| {this.renderDays(daysInView)} | ||
| {this.renderDays(props, daysInView)} | ||
| </tbody> | ||
@@ -118,4 +137,7 @@ </table> | ||
| */ | ||
| renderDays: function(days) { | ||
| var nodes = days.map(this.renderDay, this) | ||
| renderDays: function(props, days) { | ||
| var nodes = days.map(function(date){ | ||
| return this.renderDay(props, date) | ||
| }, this) | ||
| var len = days.length | ||
@@ -136,4 +158,4 @@ var buckets = [] | ||
| renderDay: function(date) { | ||
| var dayText = FORMAT.day(date) | ||
| renderDay: function(props, date) { | ||
| var dayText = FORMAT.day(date, props.dayFormat) | ||
| var classes = ["dp-cell dp-day"] | ||
@@ -151,10 +173,10 @@ | ||
| if (this.props.minDate && date < this.props.minDate){ | ||
| if (props.minDate && date < props.minDate){ | ||
| classes.push('dp-disabled dp-before-min') | ||
| } | ||
| if (this.props.maxDate && date > this.props.maxDate){ | ||
| if (props.maxDate && date > props.maxDate){ | ||
| classes.push('dp-disabled dp-after-max') | ||
| } | ||
| if (dateTimestamp == this.props.moment){ | ||
| if (dateTimestamp == props.moment){ | ||
| classes.push('dp-value') | ||
@@ -169,12 +191,12 @@ } | ||
| style : {}, | ||
| onClick : this.handleClick.bind(this, date, dateTimestamp), | ||
| onClick : this.handleClick.bind(this, props, date, dateTimestamp), | ||
| children : dayText | ||
| } | ||
| if (typeof this.props.onRenderDay === 'function'){ | ||
| renderDayProps = this.props.onRenderDay(renderDayProps) | ||
| if (typeof props.onRenderDay === 'function'){ | ||
| renderDayProps = props.onRenderDay(renderDayProps) | ||
| } | ||
| var defaultRenderFunction = React.DOM.td | ||
| var renderFunction = this.props.renderDay || defaultRenderFunction | ||
| var renderFunction = props.renderDay || defaultRenderFunction | ||
@@ -190,4 +212,24 @@ var result = renderFunction(renderDayProps) | ||
| getWeekDayNames: function(props) { | ||
| props = props || this.props | ||
| var names = props.weekDayNames | ||
| var weekStartDay = this.weekStartDay | ||
| if (typeof names == 'function'){ | ||
| names = names(weekStartDay, props.locale) | ||
| } else { | ||
| var index = weekStartDay | ||
| while (index > 0){ | ||
| names.push(names.shift()) | ||
| index-- | ||
| } | ||
| } | ||
| return names | ||
| }, | ||
| renderWeekDayNames: function(){ | ||
| var names = this.props.weekDayNames | ||
| var names = this.getWeekDayNames() | ||
@@ -201,7 +243,7 @@ return ( | ||
| handleClick: function(date, timestamp, event) { | ||
| if (this.props.minDate && timestamp < this.props.minDate){ | ||
| handleClick: function(props, date, timestamp, event) { | ||
| if (props.minDate && timestamp < props.minDate){ | ||
| return | ||
| } | ||
| if (this.props.maxDate && timestamp > this.props.maxDate){ | ||
| if (props.maxDate && timestamp > props.maxDate){ | ||
| return | ||
@@ -212,12 +254,10 @@ } | ||
| ;(this.props.onChange || emptyFn)(date, event) | ||
| ;(props.onChange || emptyFn)(date, event) | ||
| } | ||
| }) | ||
| copy({ | ||
| getHeaderText: function(moment) { | ||
| return toMoment(moment).format('MMMM YYYY') | ||
| } | ||
| }, MonthView) | ||
| MonthView.getHeaderText = function(moment) { | ||
| return toMoment(moment).format('MMMM YYYY') | ||
| } | ||
| module.exports = MonthView |
@@ -19,2 +19,3 @@ 'use strict' | ||
| var strict = !!(config && config.strict) | ||
| var locale = config && config.locale | ||
@@ -24,6 +25,8 @@ dateFormat = dateFormat || CONFIG.dateFormat | ||
| if (typeof value == 'string'){ | ||
| return moment(value, dateFormat, strict) | ||
| return moment(value, dateFormat, locale, strict) | ||
| } | ||
| return moment(value == null? new Date(): value) | ||
| // return moment.isMoment(value)? | ||
| // value: | ||
| return moment(value == null? new Date(): value)//, undefined, locale, strict) | ||
| } |
| 'use strict' | ||
| var copyUtils = require('copy-utils') | ||
| var copy = copyUtils.copy | ||
| var copyList = copyUtils.copyList | ||
| var assign = require('object-assign') | ||
@@ -10,2 +8,12 @@ var CONFIG = require('../config') | ||
| function copyList(src, target, list){ | ||
| if (src){ | ||
| list.forEach(function(key){ | ||
| target[key] = src[key] | ||
| }) | ||
| } | ||
| return target | ||
| } | ||
| /** | ||
@@ -33,6 +41,6 @@ * Returns an object that copies from given source object | ||
| if (!source){ | ||
| return copy(cfg) | ||
| return assign({}, cfg) | ||
| } | ||
| return copyList(source, copy(cfg), keys) | ||
| } | ||
| return copyList(source, assign({}, cfg), keys) | ||
| } |
@@ -7,7 +7,17 @@ 'use strict' | ||
| module.exports = function getWeekDayNames(startDay){ | ||
| module.exports = function getWeekDayNames(startDay, locale){ | ||
| var names = moment.weekdaysShort() | ||
| var index = startDay || DEFAULT_WEEK_START_DAY | ||
| var weekDays | ||
| if (locale){ | ||
| var data = moment.localeData(locale) | ||
| weekDays = data && data._weekdaysShort? data._weekdaysShort: weekDays | ||
| } | ||
| weekDays = weekDays || moment.weekdaysShort() | ||
| var names = weekDays | ||
| var index = startDay == null? DEFAULT_WEEK_START_DAY: startDay | ||
| while (index > 0){ | ||
@@ -14,0 +24,0 @@ names.push(names.shift()) |
@@ -5,3 +5,2 @@ 'use strict' | ||
| var moment = require('moment') | ||
| var copy = require('copy-utils').copy | ||
@@ -11,2 +10,3 @@ var FORMAT = require('./utils/format') | ||
| var toMoment = require('./toMoment') | ||
| var assign = require('object-assign') | ||
@@ -49,6 +49,8 @@ var TODAY | ||
| var viewMoment = this.props.viewMoment = moment(this.props.viewDate) | ||
| var props = assign({}, this.props) | ||
| if (this.props.date){ | ||
| this.props.moment = moment(this.props.date).startOf('month') | ||
| var viewMoment = props.viewMoment = moment(this.props.viewDate) | ||
| if (props.date){ | ||
| props.moment = moment(props.date).startOf('month') | ||
| } | ||
@@ -61,3 +63,3 @@ | ||
| <tbody> | ||
| {this.renderMonths(monthsInView)} | ||
| {this.renderMonths(props, monthsInView)} | ||
@@ -74,4 +76,6 @@ </tbody> | ||
| */ | ||
| renderMonths: function(days) { | ||
| var nodes = days.map(this.renderMonth, this) | ||
| renderMonths: function(props, days) { | ||
| var nodes = days.map(function(date){ | ||
| return this.renderMonth(props, date) | ||
| }, this) | ||
| var len = days.length | ||
@@ -92,4 +96,4 @@ var buckets = [] | ||
| renderMonth: function(date) { | ||
| var monthText = FORMAT.month(date) | ||
| renderMonth: function(props, date) { | ||
| var monthText = FORMAT.month(date, props.monthFormat) | ||
| var classes = ["dp-cell dp-month"] | ||
@@ -99,3 +103,3 @@ | ||
| if (dateTimestamp == this.props.moment){ | ||
| if (dateTimestamp == props.moment){ | ||
| classes.push('dp-value') | ||
@@ -105,3 +109,3 @@ } | ||
| return ( | ||
| <td key={monthText} className={classes.join(' ')} onClick={this.handleClick.bind(this, date)}> | ||
| <td key={monthText} className={classes.join(' ')} onClick={this.handleClick.bind(this, props, date)}> | ||
| {monthText} | ||
@@ -114,12 +118,11 @@ </td> | ||
| event.target.value = date | ||
| ;(this.props.onSelect || emptyFn)(date, event) | ||
| ;(props.onSelect || emptyFn)(date, event) | ||
| } | ||
| }) | ||
| copy({ | ||
| getHeaderText: function(moment) { | ||
| return toMoment(moment).format('YYYY') | ||
| } | ||
| }, YearView) | ||
| YearView.getHeaderText = function(moment) { | ||
| return toMoment(moment).format('YYYY') | ||
| } | ||
| module.exports = YearView |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
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
Fixed alerts
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
New author
Supply chain riskA new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.
Found 1 instance in 1 package
Improved metrics
- Number of package files
- increased by5.88%
54
- Number of lines in readme file
- increased by23.31%
164
- Number of medium supply chain risk alerts
- decreased by-100%
0
Worsened metrics
- Total package byte prevSize
- decreased by-22.14%
1408526
- Dependency count
- increased by20%
6
- Lines of code
- decreased by-36.77%
16584
Dependency changes
+ Addedmoment@^2.8.0
+ Addedobject-assign@^2.0.0
+ Addedobject-assign@2.1.1(transitive)
- Removedcopy-utils@~1.0.0
- Removedcopy-utils@1.0.0(transitive)