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'
|
css = require './style'
|
||||||
Calendar = require '../calendar'
|
dateUtils = require '../date_utils'
|
||||||
dateUtils = require '../date_utils'
|
|
||||||
|
Input = require '../input'
|
||||||
|
CalendarDialog = require './dialog'
|
||||||
|
|
||||||
module.exports = React.createClass
|
module.exports = React.createClass
|
||||||
|
displayName : 'DatePicker'
|
||||||
|
|
||||||
# -- States & Properties
|
|
||||||
propTypes:
|
propTypes:
|
||||||
className: React.PropTypes.string
|
className : React.PropTypes.string
|
||||||
initialDate: React.PropTypes.object
|
value : React.PropTypes.object
|
||||||
|
|
||||||
getDefaultProps: ->
|
getDefaultProps: ->
|
||||||
className: ''
|
className : ''
|
||||||
initialDate: new Date()
|
|
||||||
|
|
||||||
getInitialState: ->
|
getInitialState: ->
|
||||||
date: @props.initialDate
|
value : @props.value
|
||||||
|
|
||||||
# -- Events
|
# -- Events
|
||||||
onCalendarChange: (calendar) ->
|
openCalendarDialog: ->
|
||||||
@setState
|
@refs.dialog.show()
|
||||||
date: dateUtils.cloneDatetime(calendar.getValue())
|
|
||||||
|
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
|
||||||
render: ->
|
render: ->
|
||||||
<div className={css.root}>
|
<div>
|
||||||
<header className={css.header}>
|
<Input
|
||||||
<p className={css.headerWeekday}>{dateUtils.weekDayInWords(@state.date.getDay())}</p>
|
ref="input"
|
||||||
<p className={css.headerMonth}>{dateUtils.monthInShortWords(@state.date)}</p>
|
type="text"
|
||||||
<p className={css.headerDay}>{@state.date.getDate()}</p>
|
disabled={true}
|
||||||
<p className={css.headerYear}>{@state.date.getFullYear()}</p>
|
onClick={@openCalendarDialog}
|
||||||
</header>
|
placeholder="Pick up date"
|
||||||
|
value={@formatDate(@state.value) if @state.value} />
|
||||||
<Calendar onChange={@onCalendarChange} selectedDate={@state.date} />
|
<CalendarDialog ref="dialog" onDateSelected={@onDateSelected} />
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,13 +1,15 @@
|
||||||
@import '../constants'
|
@import '../constants'
|
||||||
|
|
||||||
dayWidth = 38px
|
TOTAL_WIDTH = 330px
|
||||||
innerPadding = 10px
|
|
||||||
calendarWidth = dayWidth * 7
|
|
||||||
totalWidth = calendarWidth + innerPadding * 2
|
|
||||||
|
|
||||||
:local(.root)
|
:local(.dialog)
|
||||||
|
padding : 0
|
||||||
text-align : center
|
text-align : center
|
||||||
width : totalWidth
|
width : TOTAL_WIDTH
|
||||||
|
|
||||||
|
> nav
|
||||||
|
margin-top : 0
|
||||||
|
padding-bottom : 10px
|
||||||
|
|
||||||
:local(.header)
|
:local(.header)
|
||||||
background-color : ACCENT
|
background-color : ACCENT
|
||||||
|
@ -15,20 +17,27 @@ totalWidth = calendarWidth + innerPadding * 2
|
||||||
|
|
||||||
:local(.headerWeekday)
|
:local(.headerWeekday)
|
||||||
background-color : darken(ACCENT, 20%)
|
background-color : darken(ACCENT, 20%)
|
||||||
|
display : block
|
||||||
font-size : 14px
|
font-size : 14px
|
||||||
line-height : 1.8
|
line-height : 1.8
|
||||||
width : 100%
|
width : 100%
|
||||||
|
|
||||||
:local(.headerMonth)
|
:local(.headerMonth)
|
||||||
|
display : block
|
||||||
font-size : 18px
|
font-size : 18px
|
||||||
padding : 10px
|
padding : 10px
|
||||||
text-transform : uppercase
|
text-transform : uppercase
|
||||||
|
|
||||||
:local(.headerDay)
|
:local(.headerDay)
|
||||||
|
display : block
|
||||||
font-size : 50px
|
font-size : 50px
|
||||||
line-height : 40px
|
line-height : 40px
|
||||||
|
|
||||||
:local(.headerYear)
|
:local(.headerYear)
|
||||||
|
display : block
|
||||||
font-size : 18px
|
font-size : 18px
|
||||||
opacity : .7
|
opacity : .7
|
||||||
padding : 10px
|
padding : 10px
|
||||||
|
|
||||||
|
:local(.calendarWrapper)
|
||||||
|
padding : 10px
|
||||||
|
|
Loading…
Reference in New Issue