react-date-picker - npm Package Compare versions

Comparing version 0.1.0 to 0.1.1

boilerplate.json

 {
     "script": {
         "main"  : "./index.jsx",
-        "output": "./bundle.js"
+        "output": "browser.js"
     },
@@ -6,0 +6,0 @@ "style": {

build-script.config.js

 var CONFIG = require('./boilerplate.json')
 
-var scriptConfig = CONFIG.style || {}
+var scriptConfig = CONFIG.script || {}
 var mainFile     = scriptConfig.main || './index.jsx'
-var outputFile   = scriptConfig.output || './bundle.js'
+var outputFile   = scriptConfig.output || 'bundle.js'
 
@@ -7,0 +7,0 @@ module.exports = {

index.jsx

@@ -6,4 +6,9 @@ 'use strict'
 var React = require('react')
+var moment = require('moment')
+
 var DatePicker = require('./src/index')
 
+var DATE = Date.now() - 1000*60*60*24 * 200
+var VALUE
+
 var App = React.createClass({
@@ -14,3 +19,12 @@
     render: function(){
-        return <div style={{margin: 10}}><DatePicker /></div>
+        console.log(moment(DATE).format('YYYY MM DD'))
+        var v = VALUE || Date.now()
+        return <div style={{margin: 10}}>
+            <DatePicker minDate='2014-04-04' maxDate='2014-10-10' date={v} viewDate={DATE} onChange={this.onChange}/></div>
+    },
+
+    onChange: function(date) {
+        DATE = date
+        VALUE = date
+        this.setState({})
     }
@@ -17,0 +31,0 @@ })

package.json

 {
   "name": "react-date-picker",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "React Date Picker",
-  "main": "index.js",
+  "main": "src/index.jsx",
   "scripts": {
@@ -7,0 +7,0 @@ "test": "make",

src/config.js

@@ -17,3 +17,3 @@ 'use strict'
     //the format in which months should be displayed in year view
-    monthFormat: 'M',
+    monthFormat: 'MMMM',
 
@@ -32,9 +32,16 @@ //the format in which years should be displayed in decade view
 
-    //the date to show in the date picker. defaults to today.
+    //the date to mark as selected in the date picker.
     //Can be a Date object, a moment object or a string.
     //If it's a string, it will be parsed using dateFormat
-    date: new Date(),
+    date: null,
 
+    minDate: null,
+
+    maxDate: null,
+
+    //the date where to open the picker. defaults to today if no date and no viewDate specified
+    viewDate: null,
+
     //if the date property is given as string, it will be parsed using this format
     dateFormat: 'YYYY-MM-DD'
 }

src/index.jsx

@@ -12,5 +12,5 @@ 'use strict'
 
-var MonthView = require('./MonthView')
-var YearView
-var DecadeView
+var MonthView  = require('./MonthView')
+var YearView   = require('./YearView')
+var DecadeView = require('./DecadeView')
 
@@ -25,2 +25,4 @@ var Views = {
 
+function emptyFn(){}
+
 var DatePicker = React.createClass({
@@ -30,2 +32,6 @@
 
+    getInitialState: function() {
+        return {
+        }
+    },
 
@@ -36,7 +42,53 @@ getDefaultProps: function() {
 
+    getViewName: function() {
+        return this.state.view || this.props.view || 'month'
+    },
+
+    getViewOrder: function() {
+        return ['month', 'year', 'decade']
+    },
+
+    addViewIndex: function(amount) {
+        var viewName = this.getViewName()
+
+        var order = this.getViewOrder()
+        var index = order.indexOf(viewName)
+
+        index += amount
+
+        return index % order.length
+    },
+
+    getNextViewName: function() {
+        return this.getViewOrder()[this.addViewIndex(1)]
+    },
+
+    getPrevViewName: function() {
+        return this.getViewOrder()[this.addViewIndex(-1)]
+    },
+
+    getView: function() {
+        return Views[this.getViewName()] || Views.month
+    },
+
+    getViewDate: function() {
+        return this.state.viewMoment || this.props.viewDate || this.props.date || this.now
+    },
+
     render: function() {
 
-        var view = Views[this.props.view] || Views.month
+        this.now = +new Date()
 
-        return <div className="date-picker" style={{width: 400, border: '1px solid red', height: 400}}>
+        var view     = this.getView()
+        var props    = asConfig(this.props)
+
+        props.viewDate = this.getViewDate()
+        props.onChange = this.handleChange
+        props.onSelect = this.handleSelect
+
+        // console.log('value',moment(this.props.value).format('YYYY MM DD'))
+
+        return React.DOM.div(copy({
+            className: (this.props.className || '') + ' date-picker'
+        }, this.props),
             <div className="dp-inner">
@@ -47,9 +99,42 @@ {this.renderHeader(view)}
                     <div className="dp-anim-target">
-                    {view(asConfig(this.props))}
+                    {view(props)}
                     </div>
                 </div>
+
+                {this.renderFooter()}
             </div>
-        </div>
+        )
     },
 
+    renderFooter: function() {
+        var todayText = this.props.today || 'Today'
+        var gotoSelected = this.props.gotoSelected || 'Go to selected'
+
+        return (
+            <div className="dp-footer">
+                <div className="dp-footer-today" onClick={this.gotoNow}>
+                    {todayText}
+                </div>
+                <div className="dp-footer-selected" onClick={this.gotoSelected}>
+                    {gotoSelected}
+                </div>
+            </div>
+        )
+    },
+
+    gotoNow: function() {
+        this.gotoDate(+new Date())
+    },
+
+    gotoSelected: function() {
+        this.gotoDate(this.props.date || +new Date())
+    },
+
+    gotoDate: function(value) {
+        this.setState({
+            view: 'month',
+            viewMoment: moment(value)
+        })
+    },
+
     getViewColspan: function(){
@@ -62,3 +147,3 @@ var map = {
 
-        return map[this.props.view] || map.month
+        return map[this.getViewName()]
     },
@@ -68,2 +153,5 @@
 
+        var viewDate   = this.getViewDate()
+        var headerText = this.getView().getHeaderText(viewDate)
+
         var colspan = this.getViewColspan()
@@ -77,7 +165,7 @@ var prev    = this.props.navPrev
                     <tr className="dp-row">
-                        <td  className="dp-prev-nav dp-nav-cell dp-cell">{prev}</td>
+                        <td  className="dp-prev-nav dp-nav-cell dp-cell" onClick={this.handlePrevNav}>{prev}</td>
 
-                        <td className="dp-nav-view dp-cell " colSpan={colspan}>Current month</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">{next}</td>
+                        <td className="dp-next-nav dp-nav-cell dp-cell" onClick={this.handleNextNav}>{next}</td>
                     </tr>
@@ -87,2 +175,78 @@ </tbody></table>
         )
+    },
+
+    handleViewChange: function() {
+        this.setState({
+            view: this.getNextViewName()
+        })
+    },
+
+    getNext: function() {
+        var current = this.getViewDate()
+
+        return ({
+            month: function() {
+                return moment(current).add(1, 'month')
+            },
+            year: function() {
+                return moment(current).add(1, 'year')
+            },
+            decade: function() {
+                return moment(current).add(10, 'year')
+            }
+        })[this.getViewName()]()
+    },
+
+    getPrev: function() {
+        var current = this.getViewDate()
+
+        return ({
+            month: function() {
+                return moment(current).add(-1, 'month')
+            },
+            year: function() {
+                return moment(current).add(-1, 'year')
+            },
+            decade: function() {
+                return moment(current).add(-10, 'year')
+            }
+        })[this.getViewName()]()
+    },
+
+    handlePrevNav: function(event) {
+        ;(this.props.onNav || emptyFn)(event)
+
+        this.setState({
+            viewMoment: this.getPrev()
+        })
+    },
+
+    handleNextNav: function(event) {
+        ;(this.props.onNav || emptyFn)(event)
+
+        this.setState({
+            viewMoment: this.getNext()
+        })
+    },
+
+    handleChange: function(date, event) {
+        ;(this.props.onChange || emptyFn)(moment(date), event)
+    },
+
+    handleSelect: function(date, event) {
+        var viewName = this.getViewName()
+        var property = ({
+            decade: 'year',
+            year  : 'month'
+        })[viewName]
+
+        var value = date.get(property)
+        var viewMoment = moment(this.getViewDate()).set(property, value)
+
+        this.setState({
+            viewMoment: viewMoment,
+            view: this.getPrevViewName()
+        })
+
+        ;(this.props.onSelect || emptyFn)(moment(viewMoment), event)
     }
@@ -89,0 +253,0 @@

src/MonthView.jsx

@@ -5,32 +5,16 @@ 'use strict'
 var moment = require('moment')
+var copy   = require('copy-utils').copy
 
+var FORMAT   = require('./utils/format')
 var asConfig = require('./utils/asConfig')
-var format   = require('./utils/format')
+var toMoment = require('./toMoment')
 
-function formatMoment(moment, format){
-    return moment.format(format)
-}
+var TODAY
 
-var toMoment = require('./utils/toMoment')
+function emptyFn(){}
 
-var getWeekDayNames = require('./utils/getWeekDayNames')
+var MonthView = React.createClass({
 
-var TODAY = formatMoment(moment().startOf("day"), "YYYY-MM-DD")
-
-module.exports = React.createClass({
-
     displayName: 'MonthView',
 
-    format: function(value, format){
-        return this.formatMoment(this.toMoment(value), format)
-    },
-
-    formatMoment: function(moment, format){
-        return formatMoment(moment, format || this.props.dateFormat)
-    },
-
-    toMoment: function(value, format, config){
-        return toMoment(value, format || this.props.dateFormat, config || { strict: this.props.strictDateParse })
-    },
-
     /**
@@ -65,3 +49,9 @@ * Formats the given date in the specified format.
 
-    getDaysForView: function(value){
+    /**
+     * Returns all the days in the specified month.
+     *
+     * @param  {Moment/Date/Number} value
+     * @return {Moment[]}
+     */
+    getDaysInMonth: function(value){
         var first = moment(value).startOf('month')
@@ -85,56 +75,87 @@ var start = this.getWeekStartMoment(first)
 
-    renderDay: function(date) {
-        var dayMonth = this.format('M') * 1
-        var dayText  = format.day(date)
+    render: function() {
 
-        var classes = ["dp-cell"]
+        TODAY = +moment().startOf('day')
 
-        if (date == TODAY){
-            classes.push('dp-current')
+        var viewMoment = this.props.viewMoment = toMoment(this.props.viewDate, this.props.dateFormat)
+
+        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))
+
+        if (this.props.minDate){
+            // debugger
         }
 
+        this.monthFirst = moment(viewMoment).startOf('month')
+        this.monthLast  = moment(viewMoment).endOf('month')
+
+        if (this.props.date){
+            this.props.moment = moment(this.props.date).startOf('day')
+        }
+
+        var daysInView = this.getDaysInMonth(viewMoment)
+
         return (
-            <td className={classes.join(' ')}>
-                {dayText}
-            </td>
+            <table className="dp-table dp-month-view">
+                <tbody>
+                    {this.renderWeekDayNames()}
+
+                    {this.renderDays(daysInView)}
+
+                </tbody>
+            </table>
         )
     },
 
-    render: function() {
+    /**
+     * Render the given array of days
+     * @param  {Moment[]} days
+     * @return {React.DOM}
+     */
+    renderDays: function(days) {
+        var nodes      = days.map(this.renderDay, this)
+        var len        = days.length
+        var buckets    = []
+        var bucketsLen = Math.ceil(len / 7)
 
-        function renderDayName(day){
+        var i = 0
 
+        for ( ; i < bucketsLen; i++){
+            buckets.push(nodes.slice(i * 7, (i + 1) * 7))
         }
 
-        function renderDays(days){
-            var nodes = days.map(this.renderDay, this)
-            var len = days.length
-            var buckets = []
-            var bucketsLen = Math.ceil(len / 7)
+        return buckets.map(function(bucket, i){
+            return <tr key={"row" + i} className="dp-week dp-row">{bucket}</tr>
+        })
+    },
 
-            var i = 0
+    renderDay: function(date) {
+        var dayText = FORMAT.day(date)
+        var classes = ["dp-cell dp-day"]
 
-            for ( ; i < bucketsLen; i++){
-                buckets.push(nodes.slice(i * 7, (i + 1) * 7))
-            }
+        var dateTimestamp = +date
 
+        if (dateTimestamp == TODAY){
+            classes.push('dp-current')
+        } else if (dateTimestamp < this.monthFirst){
+            classes.push('dp-prev')
+        } else if (dateTimestamp > this.monthLast){
+            classes.push('dp-next')
+        }
 
-            return buckets.map(function(bucket){
-                return <tr className="dp-week dp-row">{bucket}</tr>
-            })
+        if (this.props.minDate && date < this.props.minDate){
+            classes.push('dp-disabled dp-before-min')
         }
+        if (this.props.maxDate && date > this.props.maxDate){
+            classes.push('dp-disabled dp-after-max')
+        }
 
-        var date = moment(this.props.date)
-        var daysInView = this.getDaysForView(date)
-        var month = date.format('M')*1
+        if (dateTimestamp == this.props.moment){
+            classes.push('dp-value')
+        }
 
         return (
-            <table className="dp-table dp-month-view">
-                <tbody>
-                    {this.renderWeekDayNames()}
-
-                    {renderDays.call(this, daysInView)}
-
-                </tbody>
-            </table>
+            <td key={dayText} className={classes.join(' ')} onClick={this.handleClick.bind(this, date, dateTimestamp)}>
+                {dayText}
+            </td>
         )
@@ -151,4 +172,24 @@ },
         )
+    },
+
+    handleClick: function(date, timestamp, event) {
+        if (this.props.minDate && timestamp < this.props.minDate){
+            return
+        }
+        if (this.props.maxDate && timestamp > this.props.maxDate){
+            return
+        }
+
+        event.target.value = date
+
+        ;(this.props.onChange || emptyFn)(date, event)
     }
+})
 
-})
+copy({
+    getHeaderText: function(moment) {
+        return toMoment(moment).format('MMMM YYYY')
+    }
+}, MonthView)
+
+module.exports = MonthView

src/utils/format.js

 'use strict'
 
-var moment = require('moment')
 var CONFIG = require('../config')
+var toMoment = require('../toMoment')
 
 function f(mom, format){
-    return mom.format(format)
+    return toMoment(mom).format(format)
 }
@@ -9,0 +9,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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

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

513084

increased by2307.38%

Number of package files

30

increased by25%

Lines of code

12132

increased by2880.84%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes