1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
|
import React from 'react'
import client from '../client'
import moment from 'moment'
import { DateRange } from 'react-date-range';
export default class MealFilter extends React.Component {
constructor(){
super()
const start = new Date ()
const end = new Date ()
end.setDate(end.getDate()-6)
this.state = {
startDate: moment(start),
endDate: moment(end),
startTime: 0,
endTime: 23,
}
this.handleSelect = this.handleSelect.bind(this)
}
handleSelect(range){
console.log(range)
// range.startDate; // Momentjs object
// range.endDate
this.setState(range)
}
pickTimeRange(event,start,end){
this.setState({startTime: start, endTime: end})
}
render(){
var times = [
[0, 11, 'Breakfast'],
[12, 15, 'Lunch'],
[15, 23, 'Dinner'],
[0, 23, 'All'],
].map( (r,i) => {
const start = r[0]
const end = r[1]
const name = r[2]
let className = ''
if (this.state.startTime === start && this.state.endTime === end) {
className = 'selected'
}
return (
<button
key={i}
className={className}
onClick={(e) => {this.pickTimeRange(e,start,end)}}>
{name}
</button>
)
})
return (
<div>
<DateRange
onInit={this.handleSelect}
onChange={this.handleSelect}
startDate={this.state.startDate}
endDate={this.state.endDate}
/>
{times}
</div>
)
}
}
// class MealFilter extends React.Component {
// constructor(props){
// super()
// this.state = {
// fromDate: new Date (),
// toDate: new Date (),
// fromTime: new Date (),
// toTime: new Date (),
// }
// this.updateState = this.updateState.bind(this)
// }
// updateState(e){
// const name = event.target.name
// let value = event.target.value
// if (name === 'date') {
// value = new Date(value + 'T' + this.state.date.split("T")[1] ).toString()
// } else if (name === 'time') {
// value = new Date(this.state.date.split("T")[0] + value).toString()
// }
// this.setState({
// [name]: value,
// error: null,
// })
// }
// render () {
// const fromDate = parseDate(this.state.fromDate)
// const toDate = parseDate(this.state.toDate)
// const fromTime = parseTime(this.state.fromTime)
// const toTime = parseTime(this.state.toTime)
// return (
// <div>
// Filter by date:
// <input type='date' name='fromDate' placeholder='From date' value={fromDate} required onChange={this.updateState} />
// to
// <input type='date' name='toDate' placeholder='To date' value={toDate} required onChange={this.updateState} />
// and from time
// <input type='time' name='fromTime' placeholder='From iime' value={fromTime} required onChange={this.updateState} step='3600' />
// to
// <input type='time' name='toTime' placeholder='To time' value={toTime} required onChange={this.updateState} step='3600' />
// </div>
// )
// }
// }
|
