react-date-picker - npm Package Compare versions

Comparing version 1.2.2 to 1.3.0

dist/react-date-picker.nomoment.js

@@ -154,6 +154,10 @@ (function webpackUniversalModuleDefinition(root, factory) {
 
-	        props.viewDate = this.getViewDate()
-	        props.onChange = this.handleChange
-	        props.onSelect = this.handleSelect
+	        props.viewDate  = this.getViewDate()
 
+	        props.renderDay = this.props.renderDay
+	        props.onRenderDay = this.props.onRenderDay
+
+	        props.onChange  = this.handleChange
+	        props.onSelect  = this.handleSelect
+
 	        return React.DOM.div(copy({
@@ -245,2 +249,6 @@ className: (this.props.className || '') + ' date-picker'
 
+	    handleRenderDay: function (date) {
+	        return (this.props.renderDay || emptyFn)(date) || []
+	    },
+
 	    handleViewChange: function() {
@@ -285,15 +293,29 @@ this.setState({
 	    handlePrevNav: function(event) {
-	        ;(this.props.onNav || emptyFn)(event)
+	        var viewMoment = this.getPrev()
 
 	        this.setState({
-	            viewMoment: this.getPrev()
+	            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)
+	        }
 	    },
 
 	    handleNextNav: function(event) {
-	        ;(this.props.onNav || emptyFn)(event)
+	        var viewMoment = this.getNext()
 
 	        this.setState({
-	            viewMoment: this.getNext()
+	            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)
+	        }
 	    },
@@ -303,2 +325,3 @@
 	        date = moment(date)
+
 	        var text = date.format(this.props.dateFormat)
@@ -318,9 +341,13 @@
 	        var viewMoment = moment(this.getViewDate()).set(property, value)
+	        var view = this.getPrevViewName()
 
 	        this.setState({
 	            viewMoment: viewMoment,
-	            view: this.getPrevViewName()
+	            view: view
 	        })
 
-	        ;(this.props.onSelect || emptyFn)(moment(viewMoment), event)
+	        if (typeof this.props.onSelect === 'function'){
+	            var text = viewMoment.format(this.props.dateFormat)
+	            this.props.onSelect(viewMoment, text, view, event)
+	        }
 	    }
@@ -501,7 +528,17 @@
 
-	        return (
-	            React.DOM.td({key: dayText, className: classes.join(' '), onClick: this.handleClick.bind(this, date, dateTimestamp)}, 
-	                dayText
-	            )
-	        )
+	        var renderDayProps = {
+	            key      : dayText,
+	            text     : dayText,
+	            date     : date,
+	            className: classes.join(' '),
+	            style    : {},
+	            onClick  : this.handleClick.bind(this, date, dateTimestamp),
+	            children : dayText
+	        }
+
+	        if (typeof this.props.onRenderDay === 'function'){
+	            renderDayProps = this.props.onRenderDay(renderDayProps)
+	        }
+
+	        return (this.props.renderDay || React.DOM.td)(renderDayProps)
 	    },
@@ -508,0 +545,0 @@

dist/react-date-picker.nomoment.min.js

@@ -1,1 +0,1 @@
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("moment"),require("React")):"function"==typeof define&&define.amd?define(["moment","React"],e):"object"==typeof exports?exports.DatePicker=e(require("moment"),require("React")):t.DatePicker=e(t.moment,t.React)}(this,function(t,e){return function(t){function e(n){if(r[n])return r[n].exports;var a=r[n]={exports:{},id:n,loaded:!1};return t[n].call(a.exports,a,a.exports,e),a.loaded=!0,a.exports}var r={};return e.m=t,e.c=r,e.p="",e(0)}([function(t,e,r){"use strict";function n(){}var a=r(5),o=r(1),i=r(2),s=i.copy,p=(i.copyList,r(4)),c=r(16),u=r(17),d=r(15),h={month:c,year:u,decade:d},f=(r(10),a.createClass({displayName:"DatePicker",getInitialState:function(){return{}},getDefaultProps:function(){return p()},getViewName:function(){return this.state.view||this.props.view||"month"},getViewOrder:function(){return["month","year","decade"]},addViewIndex:function(t){var e=this.getViewName(),r=this.getViewOrder(),n=r.indexOf(e);return n+=t,n%r.length},getNextViewName:function(){return this.getViewOrder()[this.addViewIndex(1)]},getPrevViewName:function(){return this.getViewOrder()[this.addViewIndex(-1)]},getView:function(){return h[this.getViewName()]||h.month},getViewFactory:function(){var t=this.getView();return a.createFactory&&(t.__factory=t.__factory||a.createFactory(t),t=t.__factory),t},getViewDate:function(){return this.state.viewMoment||this.props.viewDate||this.props.date||this.now},render:function(){this.now=+new Date;var t=this.getViewFactory(),e=p(this.props);return e.viewDate=this.getViewDate(),e.onChange=this.handleChange,e.onSelect=this.handleSelect,a.DOM.div(s({className:(this.props.className||"")+" date-picker"},this.props),a.DOM.div({className:"dp-inner"},this.renderHeader(t),a.DOM.div({className:"dp-body"},a.DOM.div({className:"dp-anim-target"},t(e))),this.renderFooter()))},renderFooter:function(){if(!this.props.hideFooter){var t=this.props.today||"Today",e=this.props.gotoSelected||"Go to selected";return a.DOM.div({className:"dp-footer"},a.DOM.div({className:"dp-footer-today",onClick:this.gotoNow},t),a.DOM.div({className:"dp-footer-selected",onClick:this.gotoSelected},e))}},gotoNow:function(){this.gotoDate(+new Date)},gotoSelected:function(){this.gotoDate(this.props.date||+new Date)},gotoDate:function(t){this.setState({view:"month",viewMoment:o(t)})},getViewColspan:function(){var t={month:5,year:2,decade:2};return t[this.getViewName()]},renderHeader:function(){var t=this.getViewDate(),e=this.getView().getHeaderText(t),r=this.getViewColspan(),n=this.props.navPrev,o=this.props.navNext;return a.DOM.div({className:"dp-header"},a.DOM.table({className:"dp-nav-table"},a.DOM.tbody(null,a.DOM.tr({className:"dp-row"},a.DOM.td({className:"dp-prev-nav dp-nav-cell dp-cell",onClick:this.handlePrevNav},n),a.DOM.td({className:"dp-nav-view dp-cell ",colSpan:r,onClick:this.handleViewChange},e),a.DOM.td({className:"dp-next-nav dp-nav-cell dp-cell",onClick:this.handleNextNav},o)))))},handleViewChange:function(){this.setState({view:this.getNextViewName()})},getNext:function(){var t=this.getViewDate();return{month:function(){return o(t).add(1,"month")},year:function(){return o(t).add(1,"year")},decade:function(){return o(t).add(10,"year")}}[this.getViewName()]()},getPrev:function(){var t=this.getViewDate();return{month:function(){return o(t).add(-1,"month")},year:function(){return o(t).add(-1,"year")},decade:function(){return o(t).add(-10,"year")}}[this.getViewName()]()},handlePrevNav:function(t){(this.props.onNav||n)(t),this.setState({viewMoment:this.getPrev()})},handleNextNav:function(t){(this.props.onNav||n)(t),this.setState({viewMoment:this.getNext()})},handleChange:function(t,e){t=o(t);var r=t.format(this.props.dateFormat);(this.props.onChange||n)(t,r,e)},handleSelect:function(t,e){var r=this.getViewName(),a={decade:"year",year:"month"}[r],i=t.get(a),s=o(this.getViewDate()).set(a,i);this.setState({viewMoment:s,view:this.getPrevViewName()}),(this.props.onSelect||n)(o(s),e)}}));t.exports=f},function(e){e.exports=t},function(t,e,r){t.exports=function(){"use strict";var t=Object.prototype.hasOwnProperty,e="object",n="undefined";return{copy:r(11),copyIf:r(12),copyAs:function(r,n){var a={};if(n=n||1,null!=r&&typeof r===e)for(var o in r)t.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===e)for(var o in r)t.call(r,o)&&!t.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===e&&null!=o&&typeof o===e){var i,s,p,c;for(var u in o)t.call(o,u)&&(s=o[u],i=typeof s,c=r[u],p=typeof c,p!==n&&(a["string"==i?s:u]="function"==p?c.bind(r):c))}return a}}}()},function(t,e,r){"use strict";var n=r(1),a=r(6);t.exports=function(t,e,r){var o=!(!r||!r.strict);return e=e||a.dateFormat,"string"==typeof t?n(t,e,o):n(null==t?new Date:t)}},function(t,e,r){"use strict";var n=r(2),a=n.copy,o=n.copyList,i=r(6),s=Object.keys(i);t.exports=function(t,e){var r=s;return e&&(r=Object.keys(e)),e=e||i,t?o(t,a(e),r):a(e)}},function(t){t.exports=e},function(t,e,r){"use strict";var n=r(10);t.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(t,e,r){"use strict";function n(t,e){return o(t).format(e)}var a=r(6),o=r(3);t.exports={day:function(t,e){return n(t,e||a.dayFormat)},month:function(t,e){return n(t,e||a.monthFormat)},year:function(t,e){return n(t,e||a.yearFormat)}}},function(t){"use strict";var e="undefined";t.exports=function(t,r,n){arguments.length<3&&(n=r,r=null),r=r||{},n=n||Object.keys(t);for(var a,o=0,i=n.length;i>o;o++)a=n[o],typeof t[a]!==e&&(r[n[o]]=t[n[o]]);return r}},function(t){"use strict";var e="undefined";t.exports=function(t,r,n){arguments.length<3&&(n=r,r=null),r=r||{},n=n||Object.keys(t);for(var a,o=0,i=n.length;i>o;o++)a=n[o],typeof t[a]!==e&&typeof r[a]===e&&(r[a]=t[a]);return r}},function(t,e,r){"use strict";var n=r(1),a=1*n().startOf("week").format("d");t.exports=function(t){var e=n.weekdaysShort();if(void 0!==t&&a!=t)for(var r=t;r>a;)e.push(e.shift()),r--;return e}},function(t){"use strict";var e=Object.prototype.hasOwnProperty,r="object";t.exports=function(t,n){if(n=n||{},null!=t&&typeof t===r)for(var a in t)e.call(t,a)&&(n[a]=t[a]);return n}},function(t){"use strict";var e=Object.prototype.hasOwnProperty,r="object",n="undefined";t.exports=function(t,a){if(a=a||{},null!=t&&typeof t===r)for(var o in t)e.call(t,o)&&typeof a[o]===n&&(a[o]=t[o]);return a}},function(t,e,r){"use strict";var n="undefined",a="object",o=Object.prototype.hasOwnProperty,i=r(8);t.exports=function(t,e,r){if(arguments.length<3&&(r=e,e=null),e=e||{},!r||Array.isArray(r))return i(t,e,r);if(null!=t&&typeof t===a&&null!=r&&typeof r===a){var s,p;for(var c in r)o.call(r,c)&&(p=r[c],s=typeof p,typeof t[c]!==n&&(e["string"==s?p:c]=t[c]))}return e}},function(t,e,r){"use strict";var n="undefined",a="object",o=Object.prototype.hasOwnProperty,i=r(9);t.exports=function(t,e,r){if(arguments.length<3&&(r=e,e=null),e=e||{},!r||Array.isArray(r))return i(t,e,r);if(null!=t&&typeof t===a&&null!=r&&typeof r===a){var s,p,c;for(var u in r)o.call(r,u)&&(p=r[u],s=typeof p,c="string"==s?p:u,typeof t[u]!==n&&typeof e[c]===n&&(e[c]=t[u]))}return e}},function(t,e,r){"use strict";function n(){}var a,o=r(5),i=r(1),s=r(2).copy,p=r(7),c=r(4),u=(r(3),o.createClass({displayName:"DecadeView",getDefaultProps:function(){return c()},getYearsInDecade:function(t){var e=i(t).get("year"),r=e%10;e=e-r-1;for(var n=[],a=0,o=i(e,"YYYY").startOf("year");12>a;a++)n.push(i(o)),o.add(1,"year");return n},render:function(){a=+i().startOf("day");var t=this.props.viewMoment=i(this.props.viewDate);this.props.date&&(this.props.moment=i(this.props.date).startOf("year"));var e=this.getYearsInDecade(t);return o.DOM.table({className:"dp-table dp-decade-view"},o.DOM.tbody(null,this.renderYears(e)))},renderYears:function(t){for(var e=t.map(this.renderYear,this),r=t.length,n=[],a=Math.ceil(r/4),i=0;a>i;i++)n.push(e.slice(4*i,4*(i+1)));return n.map(function(t,e){return o.DOM.tr({key:"row"+e},t)})},renderYear:function(t,e,r){var n=p.year(t),a=["dp-cell dp-year"],i=+t;return i==this.props.moment&&a.push("dp-value"),e||a.push("dp-prev"),e==r.length-1&&a.push("dp-next"),o.DOM.td({key:n,className:a.join(" "),onClick:this.handleClick.bind(this,t)},n)},handleClick:function(t,e){e.target.value=t,(this.props.onSelect||n)(t,e)}}));s({getHeaderText:function(t){var e=i(t).get("year"),r=e%10;return e=e-r-1,e+" - "+(e+11)}},u),t.exports=u},function(t,e,r){"use strict";function n(){}var a,o=r(5),i=r(1),s=r(2).copy,p=r(7),c=r(4),u=r(3),d=o.createClass({displayName:"MonthView",formatAsDay:function(t,e){return t.format(e||"D")},getDefaultProps:function(){return c()},getWeekStartMoment:function(t){var e=i(t).startOf("week");return e},getDaysInMonth:function(t){var e=i(t).startOf("month"),r=this.getWeekStartMoment(e),n=[],a=0;for(e.add(-1,"days").isBefore(r)&&r.add(-1,"weeks");42>a;a++)n.push(i(r)),r.add(1,"days");return n},render:function(){a=+i().startOf("day");var t=this.props.viewMoment=u(this.props.viewDate,this.props.dateFormat);this.props.minDate&&(this.props.minDate=+u(this.props.minDate,this.props.dateFormat)),this.props.maxDate&&(this.props.maxDate=+u(this.props.maxDate,this.props.dateFormat)),this.props.minDate,this.monthFirst=i(t).startOf("month"),this.monthLast=i(t).endOf("month"),this.props.date&&(this.props.moment=i(this.props.date).startOf("day"));var e=this.getDaysInMonth(t);return o.DOM.table({className:"dp-table dp-month-view"},o.DOM.tbody(null,this.renderWeekDayNames(),this.renderDays(e)))},renderDays:function(t){for(var e=t.map(this.renderDay,this),r=t.length,n=[],a=Math.ceil(r/7),i=0;a>i;i++)n.push(e.slice(7*i,7*(i+1)));return n.map(function(t,e){return o.DOM.tr({key:"row"+e,className:"dp-week dp-row"},t)})},renderDay:function(t){var e=p.day(t),r=["dp-cell dp-day"],n=+t;return n==a?r.push("dp-current"):n<this.monthFirst?r.push("dp-prev"):n>this.monthLast&&r.push("dp-next"),this.props.minDate&&t<this.props.minDate&&r.push("dp-disabled dp-before-min"),this.props.maxDate&&t>this.props.maxDate&&r.push("dp-disabled dp-after-max"),n==this.props.moment&&r.push("dp-value"),o.DOM.td({key:e,className:r.join(" "),onClick:this.handleClick.bind(this,t,n)},e)},renderWeekDayNames:function(){var t=this.props.weekDayNames;return o.DOM.tr({className:"dp-row dp-week-day-names"},t.map(function(t){return o.DOM.td({key:t,className:"dp-cell dp-week-day-name"},t)}))},handleClick:function(t,e,r){this.props.minDate&&e<this.props.minDate||this.props.maxDate&&e>this.props.maxDate||(r.target.value=t,(this.props.onChange||n)(t,r))}});s({getHeaderText:function(t){return u(t).format("MMMM YYYY")}},d),t.exports=d},function(t,e,r){"use strict";function n(){}var a,o=r(5),i=r(1),s=r(2).copy,p=r(7),c=r(4),u=r(3),d=o.createClass({displayName:"YearView",getDefaultProps:function(){return c()},getMonthsInYear:function(t){for(var e=i(t).startOf("year"),r=[],n=0;12>n;n++)r.push(i(e)),e.add(1,"month");return r},render:function(){a=+i().startOf("day");var t=this.props.viewMoment=i(this.props.viewDate);this.props.date&&(this.props.moment=i(this.props.date).startOf("month"));var e=this.getMonthsInYear(t);return o.DOM.table({className:"dp-table dp-year-view"},o.DOM.tbody(null,this.renderMonths(e)))},renderMonths:function(t){for(var e=t.map(this.renderMonth,this),r=t.length,n=[],a=Math.ceil(r/4),i=0;a>i;i++)n.push(e.slice(4*i,4*(i+1)));return n.map(function(t,e){return o.DOM.tr({key:"row"+e},t)})},renderMonth:function(t){var e=p.month(t),r=["dp-cell dp-month"],n=+t;return n==this.props.moment&&r.push("dp-value"),o.DOM.td({key:e,className:r.join(" "),onClick:this.handleClick.bind(this,t)},e)},handleClick:function(t,e){e.target.value=t,(this.props.onSelect||n)(t,e)}});s({getHeaderText:function(t){return u(t).format("YYYY")}},d),t.exports=d}])});
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("moment"),require("React")):"function"==typeof define&&define.amd?define(["moment","React"],e):"object"==typeof exports?exports.DatePicker=e(require("moment"),require("React")):t.DatePicker=e(t.moment,t.React)}(this,function(t,e){return function(t){function e(n){if(r[n])return r[n].exports;var a=r[n]={exports:{},id:n,loaded:!1};return t[n].call(a.exports,a,a.exports,e),a.loaded=!0,a.exports}var r={};return e.m=t,e.c=r,e.p="",e(0)}([function(t,e,r){"use strict";function n(){}var a=r(5),o=r(1),i=r(2),s=i.copy,p=(i.copyList,r(4)),c=r(16),u=r(17),d=r(15),h={month:c,year:u,decade:d},f=(r(10),a.createClass({displayName:"DatePicker",getInitialState:function(){return{}},getDefaultProps:function(){return p()},getViewName:function(){return this.state.view||this.props.view||"month"},getViewOrder:function(){return["month","year","decade"]},addViewIndex:function(t){var e=this.getViewName(),r=this.getViewOrder(),n=r.indexOf(e);return n+=t,n%r.length},getNextViewName:function(){return this.getViewOrder()[this.addViewIndex(1)]},getPrevViewName:function(){return this.getViewOrder()[this.addViewIndex(-1)]},getView:function(){return h[this.getViewName()]||h.month},getViewFactory:function(){var t=this.getView();return a.createFactory&&(t.__factory=t.__factory||a.createFactory(t),t=t.__factory),t},getViewDate:function(){return this.state.viewMoment||this.props.viewDate||this.props.date||this.now},render:function(){this.now=+new Date;var t=this.getViewFactory(),e=p(this.props);return e.viewDate=this.getViewDate(),e.renderDay=this.props.renderDay,e.onRenderDay=this.props.onRenderDay,e.onChange=this.handleChange,e.onSelect=this.handleSelect,a.DOM.div(s({className:(this.props.className||"")+" date-picker"},this.props),a.DOM.div({className:"dp-inner"},this.renderHeader(t),a.DOM.div({className:"dp-body"},a.DOM.div({className:"dp-anim-target"},t(e))),this.renderFooter()))},renderFooter:function(){if(!this.props.hideFooter){var t=this.props.today||"Today",e=this.props.gotoSelected||"Go to selected";return a.DOM.div({className:"dp-footer"},a.DOM.div({className:"dp-footer-today",onClick:this.gotoNow},t),a.DOM.div({className:"dp-footer-selected",onClick:this.gotoSelected},e))}},gotoNow:function(){this.gotoDate(+new Date)},gotoSelected:function(){this.gotoDate(this.props.date||+new Date)},gotoDate:function(t){this.setState({view:"month",viewMoment:o(t)})},getViewColspan:function(){var t={month:5,year:2,decade:2};return t[this.getViewName()]},renderHeader:function(){var t=this.getViewDate(),e=this.getView().getHeaderText(t),r=this.getViewColspan(),n=this.props.navPrev,o=this.props.navNext;return a.DOM.div({className:"dp-header"},a.DOM.table({className:"dp-nav-table"},a.DOM.tbody(null,a.DOM.tr({className:"dp-row"},a.DOM.td({className:"dp-prev-nav dp-nav-cell dp-cell",onClick:this.handlePrevNav},n),a.DOM.td({className:"dp-nav-view dp-cell ",colSpan:r,onClick:this.handleViewChange},e),a.DOM.td({className:"dp-next-nav dp-nav-cell dp-cell",onClick:this.handleNextNav},o)))))},handleRenderDay:function(t){return(this.props.renderDay||n)(t)||[]},handleViewChange:function(){this.setState({view:this.getNextViewName()})},getNext:function(){var t=this.getViewDate();return{month:function(){return o(t).add(1,"month")},year:function(){return o(t).add(1,"year")},decade:function(){return o(t).add(10,"year")}}[this.getViewName()]()},getPrev:function(){var t=this.getViewDate();return{month:function(){return o(t).add(-1,"month")},year:function(){return o(t).add(-1,"year")},decade:function(){return o(t).add(-10,"year")}}[this.getViewName()]()},handlePrevNav:function(t){var e=this.getPrev();if(this.setState({viewMoment:e}),"function"==typeof this.props.onNav){var r=e.format(this.props.dateFormat),n=this.getViewName();this.props.onNav(e,r,n,-1,t)}},handleNextNav:function(t){var e=this.getNext();if(this.setState({viewMoment:e}),"function"==typeof this.props.onNav){var r=e.format(this.props.dateFormat),n=this.getViewName();this.props.onNav(e,r,n,1,t)}},handleChange:function(t,e){t=o(t);var r=t.format(this.props.dateFormat);(this.props.onChange||n)(t,r,e)},handleSelect:function(t,e){var r=this.getViewName(),n={decade:"year",year:"month"}[r],a=t.get(n),i=o(this.getViewDate()).set(n,a),s=this.getPrevViewName();if(this.setState({viewMoment:i,view:s}),"function"==typeof this.props.onSelect){var p=i.format(this.props.dateFormat);this.props.onSelect(i,p,s,e)}}}));t.exports=f},function(e){e.exports=t},function(t,e,r){t.exports=function(){"use strict";var t=Object.prototype.hasOwnProperty,e="object",n="undefined";return{copy:r(11),copyIf:r(12),copyAs:function(r,n){var a={};if(n=n||1,null!=r&&typeof r===e)for(var o in r)t.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===e)for(var o in r)t.call(r,o)&&!t.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===e&&null!=o&&typeof o===e){var i,s,p,c;for(var u in o)t.call(o,u)&&(s=o[u],i=typeof s,c=r[u],p=typeof c,p!==n&&(a["string"==i?s:u]="function"==p?c.bind(r):c))}return a}}}()},function(t,e,r){"use strict";var n=r(1),a=r(6);t.exports=function(t,e,r){var o=!(!r||!r.strict);return e=e||a.dateFormat,"string"==typeof t?n(t,e,o):n(null==t?new Date:t)}},function(t,e,r){"use strict";var n=r(2),a=n.copy,o=n.copyList,i=r(6),s=Object.keys(i);t.exports=function(t,e){var r=s;return e&&(r=Object.keys(e)),e=e||i,t?o(t,a(e),r):a(e)}},function(t){t.exports=e},function(t,e,r){"use strict";var n=r(10);t.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(t,e,r){"use strict";function n(t,e){return o(t).format(e)}var a=r(6),o=r(3);t.exports={day:function(t,e){return n(t,e||a.dayFormat)},month:function(t,e){return n(t,e||a.monthFormat)},year:function(t,e){return n(t,e||a.yearFormat)}}},function(t){"use strict";var e="undefined";t.exports=function(t,r,n){arguments.length<3&&(n=r,r=null),r=r||{},n=n||Object.keys(t);for(var a,o=0,i=n.length;i>o;o++)a=n[o],typeof t[a]!==e&&(r[n[o]]=t[n[o]]);return r}},function(t){"use strict";var e="undefined";t.exports=function(t,r,n){arguments.length<3&&(n=r,r=null),r=r||{},n=n||Object.keys(t);for(var a,o=0,i=n.length;i>o;o++)a=n[o],typeof t[a]!==e&&typeof r[a]===e&&(r[a]=t[a]);return r}},function(t,e,r){"use strict";var n=r(1),a=1*n().startOf("week").format("d");t.exports=function(t){var e=n.weekdaysShort();if(void 0!==t&&a!=t)for(var r=t;r>a;)e.push(e.shift()),r--;return e}},function(t){"use strict";var e=Object.prototype.hasOwnProperty,r="object";t.exports=function(t,n){if(n=n||{},null!=t&&typeof t===r)for(var a in t)e.call(t,a)&&(n[a]=t[a]);return n}},function(t){"use strict";var e=Object.prototype.hasOwnProperty,r="object",n="undefined";t.exports=function(t,a){if(a=a||{},null!=t&&typeof t===r)for(var o in t)e.call(t,o)&&typeof a[o]===n&&(a[o]=t[o]);return a}},function(t,e,r){"use strict";var n="undefined",a="object",o=Object.prototype.hasOwnProperty,i=r(8);t.exports=function(t,e,r){if(arguments.length<3&&(r=e,e=null),e=e||{},!r||Array.isArray(r))return i(t,e,r);if(null!=t&&typeof t===a&&null!=r&&typeof r===a){var s,p;for(var c in r)o.call(r,c)&&(p=r[c],s=typeof p,typeof t[c]!==n&&(e["string"==s?p:c]=t[c]))}return e}},function(t,e,r){"use strict";var n="undefined",a="object",o=Object.prototype.hasOwnProperty,i=r(9);t.exports=function(t,e,r){if(arguments.length<3&&(r=e,e=null),e=e||{},!r||Array.isArray(r))return i(t,e,r);if(null!=t&&typeof t===a&&null!=r&&typeof r===a){var s,p,c;for(var u in r)o.call(r,u)&&(p=r[u],s=typeof p,c="string"==s?p:u,typeof t[u]!==n&&typeof e[c]===n&&(e[c]=t[u]))}return e}},function(t,e,r){"use strict";function n(){}var a,o=r(5),i=r(1),s=r(2).copy,p=r(7),c=r(4),u=(r(3),o.createClass({displayName:"DecadeView",getDefaultProps:function(){return c()},getYearsInDecade:function(t){var e=i(t).get("year"),r=e%10;e=e-r-1;for(var n=[],a=0,o=i(e,"YYYY").startOf("year");12>a;a++)n.push(i(o)),o.add(1,"year");return n},render:function(){a=+i().startOf("day");var t=this.props.viewMoment=i(this.props.viewDate);this.props.date&&(this.props.moment=i(this.props.date).startOf("year"));var e=this.getYearsInDecade(t);return o.DOM.table({className:"dp-table dp-decade-view"},o.DOM.tbody(null,this.renderYears(e)))},renderYears:function(t){for(var e=t.map(this.renderYear,this),r=t.length,n=[],a=Math.ceil(r/4),i=0;a>i;i++)n.push(e.slice(4*i,4*(i+1)));return n.map(function(t,e){return o.DOM.tr({key:"row"+e},t)})},renderYear:function(t,e,r){var n=p.year(t),a=["dp-cell dp-year"],i=+t;return i==this.props.moment&&a.push("dp-value"),e||a.push("dp-prev"),e==r.length-1&&a.push("dp-next"),o.DOM.td({key:n,className:a.join(" "),onClick:this.handleClick.bind(this,t)},n)},handleClick:function(t,e){e.target.value=t,(this.props.onSelect||n)(t,e)}}));s({getHeaderText:function(t){var e=i(t).get("year"),r=e%10;return e=e-r-1,e+" - "+(e+11)}},u),t.exports=u},function(t,e,r){"use strict";function n(){}var a,o=r(5),i=r(1),s=r(2).copy,p=r(7),c=r(4),u=r(3),d=o.createClass({displayName:"MonthView",formatAsDay:function(t,e){return t.format(e||"D")},getDefaultProps:function(){return c()},getWeekStartMoment:function(t){var e=i(t).startOf("week");return e},getDaysInMonth:function(t){var e=i(t).startOf("month"),r=this.getWeekStartMoment(e),n=[],a=0;for(e.add(-1,"days").isBefore(r)&&r.add(-1,"weeks");42>a;a++)n.push(i(r)),r.add(1,"days");return n},render:function(){a=+i().startOf("day");var t=this.props.viewMoment=u(this.props.viewDate,this.props.dateFormat);this.props.minDate&&(this.props.minDate=+u(this.props.minDate,this.props.dateFormat)),this.props.maxDate&&(this.props.maxDate=+u(this.props.maxDate,this.props.dateFormat)),this.props.minDate,this.monthFirst=i(t).startOf("month"),this.monthLast=i(t).endOf("month"),this.props.date&&(this.props.moment=i(this.props.date).startOf("day"));var e=this.getDaysInMonth(t);return o.DOM.table({className:"dp-table dp-month-view"},o.DOM.tbody(null,this.renderWeekDayNames(),this.renderDays(e)))},renderDays:function(t){for(var e=t.map(this.renderDay,this),r=t.length,n=[],a=Math.ceil(r/7),i=0;a>i;i++)n.push(e.slice(7*i,7*(i+1)));return n.map(function(t,e){return o.DOM.tr({key:"row"+e,className:"dp-week dp-row"},t)})},renderDay:function(t){var e=p.day(t),r=["dp-cell dp-day"],n=+t;n==a?r.push("dp-current"):n<this.monthFirst?r.push("dp-prev"):n>this.monthLast&&r.push("dp-next"),this.props.minDate&&t<this.props.minDate&&r.push("dp-disabled dp-before-min"),this.props.maxDate&&t>this.props.maxDate&&r.push("dp-disabled dp-after-max"),n==this.props.moment&&r.push("dp-value");var i={key:e,text:e,date:t,className:r.join(" "),style:{},onClick:this.handleClick.bind(this,t,n),children:e};return"function"==typeof this.props.onRenderDay&&(i=this.props.onRenderDay(i)),(this.props.renderDay||o.DOM.td)(i)},renderWeekDayNames:function(){var t=this.props.weekDayNames;return o.DOM.tr({className:"dp-row dp-week-day-names"},t.map(function(t){return o.DOM.td({key:t,className:"dp-cell dp-week-day-name"},t)}))},handleClick:function(t,e,r){this.props.minDate&&e<this.props.minDate||this.props.maxDate&&e>this.props.maxDate||(r.target.value=t,(this.props.onChange||n)(t,r))}});s({getHeaderText:function(t){return u(t).format("MMMM YYYY")}},d),t.exports=d},function(t,e,r){"use strict";function n(){}var a,o=r(5),i=r(1),s=r(2).copy,p=r(7),c=r(4),u=r(3),d=o.createClass({displayName:"YearView",getDefaultProps:function(){return c()},getMonthsInYear:function(t){for(var e=i(t).startOf("year"),r=[],n=0;12>n;n++)r.push(i(e)),e.add(1,"month");return r},render:function(){a=+i().startOf("day");var t=this.props.viewMoment=i(this.props.viewDate);this.props.date&&(this.props.moment=i(this.props.date).startOf("month"));var e=this.getMonthsInYear(t);return o.DOM.table({className:"dp-table dp-year-view"},o.DOM.tbody(null,this.renderMonths(e)))},renderMonths:function(t){for(var e=t.map(this.renderMonth,this),r=t.length,n=[],a=Math.ceil(r/4),i=0;a>i;i++)n.push(e.slice(4*i,4*(i+1)));return n.map(function(t,e){return o.DOM.tr({key:"row"+e},t)})},renderMonth:function(t){var e=p.month(t),r=["dp-cell dp-month"],n=+t;return n==this.props.moment&&r.push("dp-value"),o.DOM.td({key:e,className:r.join(" "),onClick:this.handleClick.bind(this,t)},e)},handleClick:function(t,e){e.target.value=t,(this.props.onSelect||n)(t,e)}});s({getHeaderText:function(t){return u(t).format("YYYY")}},d),t.exports=d}])});

index.jsx

@@ -18,4 +18,22 @@ 'use strict'
 
+        function onNav(moment, text, view){
+            console.log(moment, text, view)
+        }
+
+        function onSelect(moment, text, view){
+            console.log(moment, text, view)
+        }
+
+        function renderDay(props){
+            props.className += ' aaa '
+
+            return props
+        }
+
         return <div style={{margin: 10}}>
-            <DatePicker minDate='2014-04-04' maxDate='2015-10-10' date={v} hideFooter={true} viewDate={DATE} onChange={this.onChange}/></div>
+            <DatePicker
+                onNav={onNav}
+                onSelect={onSelect}
+                onRenderDay={renderDay}
+                minDate='2014-04-04' maxDate='2015-10-10' date={v} hideFooter={true} viewDate={DATE} onChange={this.onChange}/></div>
     },
@@ -22,0 +40,0 @@

lib/index.js

@@ -98,6 +98,10 @@ 'use strict'
 
-        props.viewDate = this.getViewDate()
-        props.onChange = this.handleChange
-        props.onSelect = this.handleSelect
+        props.viewDate  = this.getViewDate()
 
+        props.renderDay = this.props.renderDay
+        props.onRenderDay = this.props.onRenderDay
+
+        props.onChange  = this.handleChange
+        props.onSelect  = this.handleSelect
+
         return React.DOM.div(copy({
@@ -189,2 +193,6 @@ className: (this.props.className || '') + ' date-picker'
 
+    handleRenderDay: function (date) {
+        return (this.props.renderDay || emptyFn)(date) || []
+    },
+
     handleViewChange: function() {
@@ -229,15 +237,29 @@ this.setState({
     handlePrevNav: function(event) {
-        ;(this.props.onNav || emptyFn)(event)
+        var viewMoment = this.getPrev()
 
         this.setState({
-            viewMoment: this.getPrev()
+            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)
+        }
     },
 
     handleNextNav: function(event) {
-        ;(this.props.onNav || emptyFn)(event)
+        var viewMoment = this.getNext()
 
         this.setState({
-            viewMoment: this.getNext()
+            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)
+        }
     },
@@ -247,2 +269,3 @@
         date = moment(date)
+
         var text = date.format(this.props.dateFormat)
@@ -262,9 +285,13 @@
         var viewMoment = moment(this.getViewDate()).set(property, value)
+        var view = this.getPrevViewName()
 
         this.setState({
             viewMoment: viewMoment,
-            view: this.getPrevViewName()
+            view: view
         })
 
-        ;(this.props.onSelect || emptyFn)(moment(viewMoment), event)
+        if (typeof this.props.onSelect === 'function'){
+            var text = viewMoment.format(this.props.dateFormat)
+            this.props.onSelect(viewMoment, text, view, event)
+        }
     }
@@ -271,0 +298,0 @@

lib/MonthView.js

@@ -154,7 +154,17 @@ 'use strict'
 
-        return (
-            React.createElement("td", {key: dayText, className: classes.join(' '), onClick: this.handleClick.bind(this, date, dateTimestamp)}, 
-                dayText
-            )
-        )
+        var renderDayProps = {
+            key      : dayText,
+            text     : dayText,
+            date     : date,
+            className: classes.join(' '),
+            style    : {},
+            onClick  : this.handleClick.bind(this, date, dateTimestamp),
+            children : dayText
+        }
+
+        if (typeof this.props.onRenderDay === 'function'){
+            renderDayProps = this.props.onRenderDay(renderDayProps)
+        }
+
+        return (this.props.renderDay || React.DOM.td)(renderDayProps)
     },
@@ -161,0 +171,0 @@

package.json

 {
   "name": "react-date-picker",
-  "version": "1.2.2",
+  "version": "1.3.0",
   "description": "React Date Picker",
@@ -24,5 +24,6 @@ "main": "lib/index.js",
     "css-utils": "^0.4.2",
+    "gulp-react": "^2.0.0",
     "moment": "~2.8.3",
     "normalize.css": "~3.0.2",
-    "react": "^0.12.0"
+    "react": "^0.12.2"
   },
@@ -29,0 +30,0 @@ "devDependencies": {

README.md

@@ -48,4 +48,48 @@ react-date-picker
  * dateFormat: String [see moment.js formats](http://momentjs.com/docs/#/displaying/format/). Default date format is 'YYYY-MM-DD'
- * onChange: Function
+ * 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.
 
+
+## Examples
+
+
+#### Custom styling of day cells
+
+```jsx
+
+function onRenderDay(props){
+    if (props.date.isBefore('2010-01-01')){
+        props.className += ' invalid'
+    }
+
+    props.style.border = '1px solid red'
+
+    return props
+}
+
+<DatePicker
+    onChange={this.onChange}
+    onRenderDay={onRenderDay}
+/>
+```
+
+
+## Contributing
+
+When contributing, please work on the `src` dir.
+
+You'll need to run the following commands:
+
+```sh
+$ npm run serve # starts a local http server
+$ npm run dev # starts webpack dev server, which does all the bundling
+```
+
+Now navigate to `http://localhost:8080/`
+
+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.
+
 ## Other
@@ -57,6 +101,13 @@
 
- * `dist/react-color-picker.js` - the full sources. NOTE: You'll need to include `React` separately
- * `dist/react-color-picker.min.js` - minified & optimized version. NOTE: You'll need to include `React` separately
- * `dist/react-color-picker.nomoment.js` - the full sources. NOTE: You'll need to include `React` AND `moment.js` separately
- * `dist/react-color-picker.nomoment.min.js` - minified & optimized version. NOTE: You'll need to include `React` AND `moment.js` separately
+ * `dist/react-date-picker.js` - the full sources. NOTE: You'll need to include `React` separately
+ * `dist/react-date-picker.min.js` - minified & optimized version. NOTE: You'll need to include `React` separately
+ * `dist/react-date-picker.nomoment.js` - the full sources. NOTE: You'll need to include `React` AND `moment.js` separately
+ * `dist/react-date-picker.nomoment.min.js` - minified & optimized version. NOTE: You'll need to include `React` AND `moment.js` separately
 
+
+## Changelog
+
+#### 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

src/index.jsx

@@ -98,6 +98,10 @@ 'use strict'
 
-        props.viewDate = this.getViewDate()
-        props.onChange = this.handleChange
-        props.onSelect = this.handleSelect
+        props.viewDate  = this.getViewDate()
 
+        props.renderDay = this.props.renderDay
+        props.onRenderDay = this.props.onRenderDay
+
+        props.onChange  = this.handleChange
+        props.onSelect  = this.handleSelect
+
         return React.DOM.div(copy({
@@ -189,2 +193,6 @@ className: (this.props.className || '') + ' date-picker'
 
+    handleRenderDay: function (date) {
+        return (this.props.renderDay || emptyFn)(date) || []
+    },
+
     handleViewChange: function() {
@@ -229,15 +237,29 @@ this.setState({
     handlePrevNav: function(event) {
-        ;(this.props.onNav || emptyFn)(event)
+        var viewMoment = this.getPrev()
 
         this.setState({
-            viewMoment: this.getPrev()
+            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)
+        }
     },
 
     handleNextNav: function(event) {
-        ;(this.props.onNav || emptyFn)(event)
+        var viewMoment = this.getNext()
 
         this.setState({
-            viewMoment: this.getNext()
+            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)
+        }
     },
@@ -247,2 +269,3 @@
         date = moment(date)
+
         var text = date.format(this.props.dateFormat)
@@ -262,9 +285,13 @@
         var viewMoment = moment(this.getViewDate()).set(property, value)
+        var view = this.getPrevViewName()
 
         this.setState({
             viewMoment: viewMoment,
-            view: this.getPrevViewName()
+            view: view
         })
 
-        ;(this.props.onSelect || emptyFn)(moment(viewMoment), event)
+        if (typeof this.props.onSelect === 'function'){
+            var text = viewMoment.format(this.props.dateFormat)
+            this.props.onSelect(viewMoment, text, view, event)
+        }
     }
@@ -271,0 +298,0 @@

src/MonthView.jsx

@@ -154,7 +154,17 @@ 'use strict'
 
-        return (
-            <td key={dayText} className={classes.join(' ')} onClick={this.handleClick.bind(this, date, dateTimestamp)}>
-                {dayText}
-            </td>
-        )
+        var renderDayProps = {
+            key      : dayText,
+            text     : dayText,
+            date     : date,
+            className: classes.join(' '),
+            style    : {},
+            onClick  : this.handleClick.bind(this, date, dateTimestamp),
+            children : dayText
+        }
+
+        if (typeof this.props.onRenderDay === 'function'){
+            renderDayProps = this.props.onRenderDay(renderDayProps)
+        }
+
+        return (this.props.renderDay || React.DOM.td)(renderDayProps)
     },
@@ -161,0 +171,0 @@

New alerts

License Policy Violation

License

This 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

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

827423

increased by0.99%

Lines of code

14775

increased by0.85%

Number of lines in readme file

111

increased by81.97%

Worsened metrics

Dependency count

6

increased by20%

Dependency changes

• + Addedgulp-react@^2.0.0

• + Addedansi-gray@0.1.1(transitive)

• + Addedansi-regex@2.1.1(transitive)

• + Addedansi-styles@2.2.1(transitive)

• + Addedansi-wrap@0.1.0(transitive)

• + Addedarray-differ@1.0.0(transitive)

• + Addedarray-uniq@1.0.3(transitive)

• + Addedbase62@0.1.1(transitive)

• + Addedbeeper@1.1.1(transitive)

• + Addedchalk@1.1.3(transitive)

• + Addedclone@1.0.4(transitive)

• + Addedclone-stats@0.0.1(transitive)

• + Addedcolor-support@1.1.3(transitive)

• + Addedcore-util-is@1.0.3(transitive)

• + Addeddateformat@2.2.0(transitive)

• + Addedduplexer2@0.0.2(transitive)

• + Addedescape-string-regexp@1.0.5(transitive)

• + Addedesprima-fb@8001.1001.0-dev-harmony-fb(transitive)

• + Addedfancy-log@1.3.3(transitive)

• + Addedglogg@1.0.2(transitive)

• + Addedgulp-react@2.0.0(transitive)

• + Addedgulp-util@3.0.8(transitive)

• + Addedgulplog@1.0.0(transitive)

• + Addedhas-ansi@2.0.0(transitive)

• + Addedhas-gulplog@0.1.0(transitive)

• + Addedisarray@0.0.11.0.0(transitive)

• + Addedjstransform@8.2.0(transitive)

• + Addedlodash._basecopy@3.0.1(transitive)

• + Addedlodash._basetostring@3.0.1(transitive)

• + Addedlodash._basevalues@3.0.0(transitive)

• + Addedlodash._getnative@3.9.1(transitive)

• + Addedlodash._isiterateecall@3.0.9(transitive)

• + Addedlodash._reescape@3.0.0(transitive)

• + Addedlodash._reevaluate@3.0.0(transitive)

• + Addedlodash._reinterpolate@3.0.0(transitive)

• + Addedlodash._root@3.0.1(transitive)

• + Addedlodash.escape@3.2.0(transitive)

• + Addedlodash.isarguments@3.1.0(transitive)

• + Addedlodash.isarray@3.0.4(transitive)

• + Addedlodash.keys@3.1.2(transitive)

• + Addedlodash.restparam@3.6.1(transitive)

• + Addedlodash.template@3.6.2(transitive)

• + Addedlodash.templatesettings@3.1.1(transitive)

• + Addedmultipipe@0.1.2(transitive)

• + Addedobject-assign@3.0.0(transitive)

• + Addedparse-node-version@1.0.1(transitive)

• + Addedprocess-nextick-args@2.0.1(transitive)

• + Addedreact-tools@0.12.2(transitive)

• + Addedreadable-stream@1.0.341.1.142.3.8(transitive)

• + Addedreplace-ext@0.0.1(transitive)

• + Addedsafe-buffer@5.1.2(transitive)

• + Addedsource-map@0.1.31(transitive)

• + Addedsparkles@1.0.1(transitive)

• + Addedstring_decoder@0.10.311.1.1(transitive)

• + Addedstrip-ansi@3.0.1(transitive)

• + Addedsupports-color@2.0.0(transitive)

• + Addedthrough2@0.6.52.0.5(transitive)

• + Addedtime-stamp@1.1.0(transitive)

• + Addedutil-deprecate@1.0.2(transitive)

• + Addedvinyl@0.5.3(transitive)

• + Addedxtend@4.0.2(transitive)

• Updatedreact@^0.12.2