diff --git a/components/date_picker/dialog.cjsx b/components/date_picker/dialog.cjsx new file mode 100644 index 00000000..3bc5191c --- /dev/null +++ b/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 = " " + + diff --git a/components/date_picker/index.cjsx b/components/date_picker/index.cjsx index 8e1b8810..214a07b2 100644 --- a/components/date_picker/index.cjsx +++ b/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: -> -
{dateUtils.weekDayInWords(@state.date.getDay())}
-{dateUtils.monthInShortWords(@state.date)}
-{@state.date.getDate()}
-{@state.date.getFullYear()}
-