Add date picker

components/date_picker/dialog.cjsx

@@ -0,0 +1,57 @@
+css       = require './style'
+dateUtils = require '../date_utils'
+
+Dialog    = require '../dialog'
+Calendar  = require '../calendar'
+
+module.exports = React.createClass
+  displayName: 'CalendarDialog'
+
+  # -- 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: [
+      { caption: "Cancel", type: "flat accent", onClick: @onDateCancel },
+      { caption: "Ok",     type: "flat accent", onClick: @onDateSelected }
+    ]
+
+  # -- Events
+  onCalendarChange: (calendar) ->
+    @setState date: dateUtils.cloneDatetime(calendar.getValue())
+
+  onDateCancel: (ref, method) ->
+    @refs.dialog.hide()
+
+  onDateSelected: ->
+    @props.onDateSelected(@state.date) if @props.onDateSelected
+    @refs.dialog.hide()
+
+  # -- Public methods
+  show: ->
+    @refs.dialog.show()
+
+  # -- Render
+  render: ->
+    className  = " "
+
+    <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>
+      </header>
+
+      <div className={css.calendarWrapper}>
+        <Calendar onChange={@onCalendarChange} selectedDate={@state.date} />
+      </div>
+    </Dialog>

components/date_picker/index.cjsx

@@ -1,35 +1,46 @@
-css       = require './style'
-Calendar  = require '../calendar'
-dateUtils = require '../date_utils'
+css            = require './style'
+dateUtils      = require '../date_utils'
+
+Input          = require '../input'
+CalendarDialog = require './dialog'
 
 module.exports = React.createClass
+  displayName  : 'DatePicker'
 
-  # -- States & Properties
   propTypes:
-    className:    React.PropTypes.string
-    initialDate:  React.PropTypes.object
+    className  : React.PropTypes.string
+    value      : React.PropTypes.object
 
   getDefaultProps: ->
-    className:    ''
-    initialDate:  new Date()
+    className  :    ''
 
   getInitialState: ->
-    date:         @props.initialDate
+    value      : @props.value
 
   # -- Events
-  onCalendarChange: (calendar) ->
-    @setState
-      date: dateUtils.cloneDatetime(calendar.getValue())
+  openCalendarDialog: ->
+    @refs.dialog.show()
+
+  onDateSelected: (value) ->
+    @refs.input.setValue(@formatDate(value))
+    @setState value: value
+
+  # -- Private methods
+  formatDate: (date) ->
+    day = date.getDate()
+    month = dateUtils.monthInWords(date)
+    year = date.getFullYear()
+    "#{day} #{month} #{year}"
 
   # -- 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>
+      <Input
+          ref="input"
+          type="text"
+          disabled={true}
+          onClick={@openCalendarDialog}
+          placeholder="Pick up date"
+          value={@formatDate(@state.value) if @state.value} />
+      <CalendarDialog ref="dialog" onDateSelected={@onDateSelected} />
     </div>

components/date_picker/style.styl

@@ -1,13 +1,15 @@
 @import '../constants'
 
-dayWidth            = 38px
-innerPadding        = 10px
-calendarWidth       = dayWidth  * 7
-totalWidth          = calendarWidth + innerPadding * 2
+TOTAL_WIDTH         = 330px
 
-:local(.root)
+:local(.dialog)
+  padding           : 0
   text-align        : center
-  width             : totalWidth
+  width             : TOTAL_WIDTH
+
+  > nav
+    margin-top      : 0
+    padding-bottom  : 10px
 
 :local(.header)
   background-color  : ACCENT
@@ -15,20 +17,27 @@ totalWidth          = calendarWidth + innerPadding * 2
 
 :local(.headerWeekday)
   background-color  : darken(ACCENT, 20%)
+  display           : block
   font-size         : 14px
   line-height       : 1.8
   width             : 100%
 
 :local(.headerMonth)
+  display           : block
   font-size         : 18px
   padding           : 10px
   text-transform    : uppercase
 
 :local(.headerDay)
+  display           : block
   font-size         : 50px
   line-height       : 40px
 
 :local(.headerYear)
+  display           : block
   font-size         : 18px
   opacity           : .7
   padding           : 10px
+
+:local(.calendarWrapper)
+  padding           : 10px