Set up date picker to use months and years selectors in calendar

react-toolbox · Sep 4, 2015 · 8bfb3fa · 8bfb3fa
1 parent 5dd406d
commit 8bfb3fa
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 15 deletions.
diff --git a/components/date_picker/dialog.cjsx b/components/date_picker/dialog.cjsx
@@ -1,6 +1,5 @@
 css       = require './style'
 dateUtils = require '../date_utils'
-
 Dialog    = require '../dialog'
 Calendar  = require '../calendar'
 
@@ -9,24 +8,25 @@ module.exports = React.createClass
 
   # -- States & Properties
   propTypes:
-    className      : React.PropTypes.string
     initialDate    : React.PropTypes.object
     onDateSelected : React.PropTypes.func
 
   getDefaultProps: ->
-    className      : ''
     initialDate    : new Date()
 
   getInitialState: ->
-    date: @props.initialDate
-    actions: [
+    date           : @props.initialDate
+    display        : 'months'
+    actions        : [
       { caption: "Cancel", type: "flat accent", onClick: @onDateCancel },
       { caption: "Ok",     type: "flat accent", onClick: @onDateSelected }
     ]
 
   # -- Events
   onCalendarChange: (calendar) ->
-    @setState date: dateUtils.cloneDatetime(calendar.getValue())
+    @setState
+      date: dateUtils.cloneDatetime(calendar.getValue())
+      display: 'months'
 
   onDateCancel: (ref, method) ->
     @refs.dialog.hide()
@@ -39,19 +39,32 @@ module.exports = React.createClass
   show: ->
     @refs.dialog.show()
 
+  displayMonths: ->
+    @setState display: 'months'
+
+  displayYears: ->
+    @setState display: 'years'
+
   # -- Render
   render: ->
-    className  = " "
-
+    className = "display-#{@state.display}"
     <Dialog ref="dialog" type={css.dialog} className={className} actions={@state.actions}>
       <header className={css.header}>
         <span className={css.headerWeekday}>{dateUtils.weekDayInWords(@state.date.getDay())}</span>
-        <span className={css.headerMonth}>{dateUtils.monthInShortWords(@state.date)}</span>
-        <span className={css.headerDay}>{@state.date.getDate()}</span>
-        <span className={css.headerYear}>{@state.date.getFullYear()}</span>
+        <div onClick={@displayMonths}>
+          <span className={css.headerMonth}>{dateUtils.monthInShortWords(@state.date)}</span>
+          <span className={css.headerDay}>{@state.date.getDate()}</span>
+        </div>
+        <span className={css.headerYear} onClick={@displayYears}>
+          {@state.date.getFullYear()}
+        </span>
       </header>
 
       <div className={css.calendarWrapper}>
-        <Calendar onChange={@onCalendarChange} selectedDate={@state.date} />
+        <Calendar
+          ref="calendar"
+          display={@state.display}
+          onChange={@onCalendarChange}
+          selectedDate={@state.date} />
       </div>
     </Dialog>
diff --git a/components/date_picker/style.styl b/components/date_picker/style.styl
@@ -23,21 +23,31 @@ TOTAL_WIDTH         = 330px
   width             : 100%
 
 :local(.headerMonth)
+  cursor            : pointer
   display           : block
   font-size         : 18px
   padding           : 10px
   text-transform    : uppercase
 
 :local(.headerDay)
+  cursor            : pointer
   display           : block
   font-size         : 50px
   line-height       : 40px
 
 :local(.headerYear)
+  cursor            : pointer
   display           : block
   font-size         : 18px
-  opacity           : .7
   padding           : 10px
 
 :local(.calendarWrapper)
-  padding           : 10px
+  padding           : 10px 5px
+
+:local(.dialog)
+  &.display-years
+    :local(.headerDay), :local(.headerMonth)
+      opacity       : .7
+
+  &.display-months :local(.headerYear)
+    opacity         : .7
diff --git a/components/time_picker/style.styl b/components/time_picker/style.styl
@@ -2,7 +2,7 @@
 
 AMPM_HEIGHT     = 22px
 AMPM_WIDTH      = 40px
-PICKER_WIDTH    = 280px
+PICKER_WIDTH    = 330px
 
 // Picker dialog
 :local(.dialog)