Add date picker initial version

react-toolbox · Aug 9, 2015 · 8f2734d · 8f2734d
1 parent 8a967f1
commit 8f2734d
Show file tree

Hide file tree

Showing 4 changed files with 103 additions and 2 deletions.
diff --git a/components/calendar/index.cjsx b/components/calendar/index.cjsx
@@ -8,6 +8,7 @@ module.exports = React.createClass
   # -- States & Properties
   propTypes:
     className:      React.PropTypes.string
+    onChange:       React.PropTypes.func
     selectedDate:   React.PropTypes.object
     viewDate:       React.PropTypes.object
 
@@ -20,6 +21,9 @@ module.exports = React.createClass
     selectedDate:   @props.selectedDate
     viewDate:       @props.viewDate
 
+  componentDidUpdate: (prevProps, prevState) ->
+    @props.onChange? @ if prevState.selectedDate.getTime() != @state.selectedDate.getTime()
+
   # -- Events
   onDayClick: (event) ->
     day = parseInt(event.target.textContent)
@@ -90,3 +94,6 @@ module.exports = React.createClass
         </div>
       </CTG>
     </div>
+
+  getValue: ->
+    @state.selectedDate
diff --git a/components/date_picker/index.cjsx b/components/date_picker/index.cjsx
@@ -0,0 +1,35 @@
+css       = require './style'
+Calendar  = require '../calendar'
+dateUtils = require '../date_utils'
+
+module.exports = React.createClass
+
+  # -- States & Properties
+  propTypes:
+    className:    React.PropTypes.string
+    initialDate:  React.PropTypes.object
+
+  getDefaultProps: ->
+    className:    ''
+    initialDate:  new Date()
+
+  getInitialState: ->
+    date:         @props.initialDate
+
+  # -- Events
+  onCalendarChange: (calendar) ->
+    @setState
+      date: dateUtils.cloneDatetime(calendar.getValue())
+
+  # -- Render
+  render: ->
+    <div className={css.root}>
+      <header className={css.header}>
+        <p className={css.headerWeekday}>{dateUtils.weekDayInWords(@state.date.getDay())}</p>
+        <p className={css.headerMonth}>{dateUtils.monthInShortWords(@state.date)}</p>
+        <p className={css.headerDay}>{@state.date.getDate()}</p>
+        <p className={css.headerYear}>{@state.date.getFullYear()}</p>
+      </header>
+
+      <Calendar onChange={@onCalendarChange} selectedDate={@state.date} />
+    </div>
diff --git a/components/date_picker/style.styl b/components/date_picker/style.styl
@@ -0,0 +1,34 @@
+@import '../constants'
+
+dayWidth            = 38px
+innerPadding        = 10px
+calendarWidth       = dayWidth  * 7
+totalWidth          = calendarWidth + innerPadding * 2
+
+:local(.root)
+  text-align        : center
+  width             : totalWidth
+
+:local(.header)
+  background-color  : ACCENT
+  color             : white
+
+:local(.headerWeekday)
+  background-color  : darken(ACCENT, 20%)
+  font-size         : 14px
+  line-height       : 1.8
+  width             : 100%
+
+:local(.headerMonth)
+  font-size         : 18px
+  padding           : 10px
+  text-transform    : uppercase
+
+:local(.headerDay)
+  font-size         : 50px
+  line-height       : 40px
+
+:local(.headerYear)
+  font-size         : 18px
+  opacity           : .7
+  padding           : 10px
diff --git a/components/date_utils.coffee b/components/date_utils.coffee
@@ -1,9 +1,9 @@
 module.exports =
   daysInMonth: (date) ->
-    (new Date(date.getFullYear(), date.getMonth() + 1, 0)).getDate()
+    (new Date(date.getFullYear(), date.getMonth(), 0)).getDate()
 
   firstWeekDay: (date) ->
-    (new Date(date.getFullYear(), date.getMonth() + 1, 1)).getDay()
+    (new Date(date.getFullYear(), date.getMonth(), 1)).getDay()
 
   monthInWords: (date) ->
     switch (date.getMonth())
@@ -20,6 +20,21 @@ module.exports =
       when 10 then 'November'
       when 11 then 'December'
 
+  monthInShortWords: (date) ->
+    switch (date.getMonth())
+      when 0  then 'Jan'
+      when 1  then 'Feb'
+      when 2  then 'Mar'
+      when 3  then 'Apr'
+      when 4  then 'May'
+      when 5  then 'Jun'
+      when 6  then 'Jul'
+      when 7  then 'Aug'
+      when 8  then 'Sep'
+      when 9  then 'Oct'
+      when 10 then 'Nov'
+      when 11 then 'Dec'
+
   weekDayInWords: (day) ->
     switch (day)
       when 0 then 'Sunday'
@@ -30,6 +45,16 @@ module.exports =
       when 5 then 'Friday'
       when 6 then 'Saturday'
 
+  weekDayInShortWords: (day) ->
+    switch (day)
+      when 0 then 'Sun'
+      when 1 then 'Mon'
+      when 2 then 'Tue'
+      when 3 then 'Wed'
+      when 4 then 'Thu'
+      when 5 then 'Fri'
+      when 6 then 'Sat'
+
   addDays: (date, days) ->
     newDate = @cloneDatetime(date)
     newDate.setDate(date.getDate() + days)