Add documentation and fixes for date picker
parent
bdf798debe
commit
8880287acb
|
@ -17,11 +17,10 @@ module.exports = React.createClass
|
||||||
getDefaultProps: ->
|
getDefaultProps: ->
|
||||||
display : 'months'
|
display : 'months'
|
||||||
selectedDate : new Date()
|
selectedDate : new Date()
|
||||||
viewDate : new Date()
|
|
||||||
|
|
||||||
getInitialState: ->
|
getInitialState: ->
|
||||||
selectedDate : @props.selectedDate
|
selectedDate : @props.selectedDate
|
||||||
viewDate : @props.viewDate
|
viewDate : @props.selectedDate
|
||||||
|
|
||||||
# -- Lifecycle
|
# -- Lifecycle
|
||||||
componentDidUpdate: (prevProps, prevState) ->
|
componentDidUpdate: (prevProps, prevState) ->
|
||||||
|
|
|
@ -0,0 +1,25 @@
|
||||||
|
# DatePicker
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
var DatePicker = require('react-toolbox/components/date_picker');
|
||||||
|
|
||||||
|
var date = new Date(1995,11,17);
|
||||||
|
|
||||||
|
// Initialized date picker
|
||||||
|
<DatePicker value={date} />
|
||||||
|
```
|
||||||
|
|
||||||
|
## Properties
|
||||||
|
|
||||||
|
| Name | Type | Default | Description|
|
||||||
|
| ------------- |:-------:|:--------------- |:---------- |
|
||||||
|
| **value** | Date | `new Date()` | Date object with currrent date by default |
|
||||||
|
|
||||||
|
## Methods
|
||||||
|
|
||||||
|
#### getValue
|
||||||
|
Returns the value of the picker.
|
||||||
|
|
||||||
|
```
|
||||||
|
input_instance.getValue();
|
||||||
|
```
|
|
@ -1,6 +1,5 @@
|
||||||
css = require './style'
|
css = require './style'
|
||||||
dateUtils = require '../date_utils'
|
dateUtils = require '../date_utils'
|
||||||
|
|
||||||
Input = require '../input'
|
Input = require '../input'
|
||||||
CalendarDialog = require './dialog'
|
CalendarDialog = require './dialog'
|
||||||
|
|
||||||
|
@ -32,6 +31,10 @@ module.exports = React.createClass
|
||||||
year = date.getFullYear()
|
year = date.getFullYear()
|
||||||
"#{day} #{month} #{year}"
|
"#{day} #{month} #{year}"
|
||||||
|
|
||||||
|
# -- Public methods
|
||||||
|
getValue: ->
|
||||||
|
@state.value
|
||||||
|
|
||||||
# -- Render
|
# -- Render
|
||||||
render: ->
|
render: ->
|
||||||
<div>
|
<div>
|
||||||
|
@ -42,5 +45,8 @@ module.exports = React.createClass
|
||||||
onClick={@openCalendarDialog}
|
onClick={@openCalendarDialog}
|
||||||
placeholder="Pick up date"
|
placeholder="Pick up date"
|
||||||
value={@formatDate(@state.value) if @state.value} />
|
value={@formatDate(@state.value) if @state.value} />
|
||||||
<CalendarDialog ref="dialog" onDateSelected={@onDateSelected} />
|
<CalendarDialog
|
||||||
|
ref="dialog"
|
||||||
|
initialDate={@state.value}
|
||||||
|
onDateSelected={@onDateSelected} />
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,7 +0,0 @@
|
||||||
DatePicker = require '../../components/date_picker'
|
|
||||||
|
|
||||||
module.exports = React.createClass
|
|
||||||
displayName: 'DatePickerTest'
|
|
||||||
|
|
||||||
render: ->
|
|
||||||
<DatePicker />
|
|
|
@ -5,12 +5,13 @@ module.exports = React.createClass
|
||||||
displayName: 'PickersTest'
|
displayName: 'PickersTest'
|
||||||
|
|
||||||
render: ->
|
render: ->
|
||||||
time = new Date(1995,11,17);
|
datetime = new Date(1995,11,17)
|
||||||
time.setHours(17)
|
datetime.setHours(17)
|
||||||
time.setMinutes(28)
|
datetime.setMinutes(28)
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
<DatePicker />
|
<DatePicker />
|
||||||
<TimePicker value={time} />
|
<DatePicker value={datetime} />
|
||||||
|
<TimePicker value={datetime} />
|
||||||
<TimePicker format="ampm" />
|
<TimePicker format="ampm" />
|
||||||
</section>
|
</section>
|
||||||
|
|
Loading…
Reference in New Issue