Add date picker
parent
334e4d0665
commit
d709093bd6
|
@ -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>
|
|
@ -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>
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in New Issue